Collated Search Page tests (#14)

---------

Co-authored-by: IA Jim <[email protected]>

.prettierc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

README.md

@@ -13,13 +13,31 @@
 - run command to install Playwright browser libs: `npx install playwright`
 - run command to run all the tests: `npm run test`
 
-## Running individual tests
+
+## Running individual tests by category
 
 - run books tests: `npm run test:books`
 - run login tests: `npm run test:login`
 - run music tests: `npm run test:music`
 - run search tests: `npm run test:search`
 
+
+## Running tests using VSCode Playwright plugin
+
+- install [VSCode Playwright plugin](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) to run specific tests using VSCode
+
+## Running specific test spec by file:
+
+- run command format: `npx playwright test <test-file-path>`
+- sample: `npx playwright test tests/search/search-layout.spec.ts`
+
+
+## Running specific test spec by file in debug mode:
+
+- run command format: `npx playwright test <test-file-path> --debug`
+- sample: `npx playwright test tests/search/search-layout.spec.ts --debug`
+
+
 ## View tests execution result
 
 - run: `npm run show:report`

package.json

@@ -18,7 +18,10 @@
     "test:search": "npx playwright test tests/search",
     "test:books": "npx playwright test tests/books",
     "test:login": "npx playwright test tests/login",
-    "test:music": "npx playwright test tests/music"
+    "test:music": "npx playwright test tests/music",
+    "format": "prettier --write \"tests/**/*.ts\"",
+    "lint": "prettier --check \"tests/**/*.ts\"",
+    "typecheck": "node node_modules/typescript/bin/tsc --noEmit"
   },
   "keywords": [],
   "author": "",

tests/books/base-test.spec.ts

@@ -54,7 +54,9 @@ test('On load, pages fit fully inside of the BookReader™', async () => {
   const brContainerBox = await brContainer.boundingBox();
 
   // images do not get cropped vertically
-  expect(brContainerBox?.height).toBeLessThanOrEqual(Number(brShellBox?.height));
+  expect(brContainerBox?.height).toBeLessThanOrEqual(
+    Number(brShellBox?.height),
+  );
   // images do not get cropped horizontally
   expect(brContainerBox?.width).toBeLessThanOrEqual(Number(brShellBox?.width));
 });
@@ -88,9 +90,13 @@ test.describe('Test bookreader navigations', () => {
     const brContainerBox = await brContainer.boundingBox();
 
     // images do not get cropped vertically
-    expect(brContainerBox?.height).toBeLessThanOrEqual(Number(brShellBox?.height));
+    expect(brContainerBox?.height).toBeLessThanOrEqual(
+      Number(brShellBox?.height),
+    );
     // images do not get cropped horizontally
-    expect(brContainerBox?.width).toBeLessThanOrEqual(Number(brShellBox?.width));
+    expect(brContainerBox?.width).toBeLessThanOrEqual(
+      Number(brShellBox?.width),
+    );
   });
 
   test('2. nav menu displays properly', async () => {
@@ -146,7 +152,7 @@ test.describe('Test bookreader navigations', () => {
     await goNext.click();
     await page.waitForTimeout(PAGE_FLIP_WAIT_TIME);
 
-    const onLoadBrState = brContainer.nth(0);// .child(0);
+    const onLoadBrState = brContainer.nth(0); // .child(0);
     const initialImages = onLoadBrState.locator('img'); // .find('img');
     const origImg1Src = await initialImages.nth(0).getAttribute('src');
     const origImg2Src = await initialImages.nth(-1).getAttribute('src');
@@ -155,7 +161,7 @@ test.describe('Test bookreader navigations', () => {
     await page.waitForTimeout(PAGE_FLIP_WAIT_TIME);
 
     const nextBrState = brContainer.nth(0);
-    const prevImages = nextBrState.locator('img'); 
+    const prevImages = nextBrState.locator('img');
     const prevImg1Src = await prevImages.nth(0).getAttribute('src');
     const prevImg2Src = await prevImages.nth(-1).getAttribute('src');
 
@@ -190,5 +196,4 @@ test.describe('Test bookreader navigations', () => {
     expect(await isPageInUrl()).toEqual(true);
     expect(await isModeInUrl('2up')).toEqual(true);
   });
-
 });

tests/fixtures.ts

@@ -0,0 +1,28 @@
+import { test as base } from '@playwright/test';
+
+import { SearchPage } from './pageObjects/search-page';
+
+type PageFixtures = {
+  searchPage: SearchPage;
+};
+
+export const test = base.extend<PageFixtures>({
+  searchPage: async ({ page }, use) => {
+    // Set up the fixture.
+    const searchPage = new SearchPage(page);
+    await searchPage.visit();
+    await searchPage.queryFor('cats');
+
+    await page.route(/(analytics|fonts)/, route => {
+      route.abort();
+    });
+
+    // Use the fixture value in the test.
+    await use(searchPage);
+
+    // Clean up the fixture.
+    await page.close();
+  },
+});
+
+export { expect } from '@playwright/test';

tests/login/login.spec.ts

@@ -9,8 +9,12 @@ test('page load - check login page fields elements', async ({ page }) => {
   const loginFormElement = boxRow.locator('.login-form-element');
   const formLoginFields = loginFormElement.locator('.iaform.login-form');
   const inputEmail = loginFormElement.locator('.form-element.input-email');
-  const inputPassword = loginFormElement.locator('.form-element.input-password');
-  const btnLogin = loginFormElement.locator('.btn.btn-primary.btn-submit.input-submit.js-submit-login');
+  const inputPassword = loginFormElement.locator(
+    '.form-element.input-password',
+  );
+  const btnLogin = loginFormElement.locator(
+    '.btn.btn-primary.btn-submit.input-submit.js-submit-login',
+  );
 
   expect(await loginFormElement.count()).toEqual(1);
   expect(await inputEmail.count()).toEqual(1);

tests/models.ts

@@ -0,0 +1,58 @@
+export type DateMetadataLabel = {
+  filter: string;
+  date: string;
+};
+
+export type LayoutViewMode = 'tile' | 'list' | 'compact';
+
+export enum LayoutViewModeLocator {
+  TILE = '#grid-button',
+  LIST = '#list-detail-button',
+  COMPACT = '#list-compact-button',
+}
+
+export enum SearchOption {
+  METADATA = `Search metadata`,
+  TEXT = `Search text contents`,
+  TV = `Search TV news captions`,
+  RADIO = `Search radio transcripts`,
+  WEB = `Search archived web sites`,
+}
+
+export type SortFilter =
+  | 'Weekly views'
+  | 'All-time views'
+  | 'Title'
+  | 'Date published'
+  | 'Date archived'
+  | 'Date reviewed'
+  | 'Date added'
+  | 'Creator';
+
+export type SortOrder = 'ascending' | 'descending';
+
+export const SortFilterURL = {
+  'Weekly views': 'week',
+  'All-time views': 'downloads',
+  Title: 'title',
+  'Date published': 'date',
+  'Date archived': 'publicdate',
+  'Date reviewed': 'reviewdate',
+  'Date added': 'addeddate',
+  Creator: 'creator',
+};
+
+export enum FacetGroupLocatorLabel {
+  DATE = 'date-picker-label',
+  MEDIATYPE = 'facet-group-header-label-mediatype',
+  LENDING = 'facet-group-header-label-lending',
+  YEAR = 'facet-group-header-label-year',
+  SUBJECT = 'facet-group-header-label-subject',
+  COLLECTION = 'facet-group-header-label-collection',
+  CREATOR = 'facet-group-header-label-creator',
+  LANGUAGE = 'facet-group-header-label-language',
+}
+
+export type FacetType = 'positive' | 'negative';
+
+export type ViewFacetGroup = 'tile-title' | 'list-date';

tests/music/music.spec.ts

@@ -5,38 +5,42 @@ const trackListDetails = [
   {
     number: '1',
     title: 'Squeaking Door',
-    length: '00:06'
+    length: '00:06',
   },
   {
     number: '2',
     title: 'Steps',
-    length: '00:03'
+    length: '00:03',
   },
   {
     number: '3',
     title: 'Steps',
-    length: '00:03'
+    length: '00:03',
   },
 ];
 
 test('Play 3 mystery sound effects', async ({ page }) => {
-  await page.goto('https://archive.org/details/cd_mystery-sound-effects_gateway-gecordings');
+  await page.goto(
+    'https://archive.org/details/cd_mystery-sound-effects_gateway-gecordings',
+  );
 
   const iaMusicTheater = page.locator('ia-music-theater');
   expect(await iaMusicTheater.count()).toEqual(1);
   const musicTheater = page.locator('#music-theater');
   expect(await musicTheater.count()).toEqual(1);
-  
+
   // player controls
   const channelSelector = musicTheater.locator('channel-selector');
   const channelSelectorRadio = channelSelector.locator('#radio');
   expect(await channelSelector.count()).toEqual(1);
   expect(await channelSelectorRadio.count()).toEqual(1);
-  expect(await channelSelectorRadio.locator('#selector-title').count()).toEqual(1);
+  expect(await channelSelectorRadio.locator('#selector-title').count()).toEqual(
+    1,
+  );
   const rows = channelSelectorRadio.getByRole('listitem');
   expect(await rows.count()).toEqual(2);
   await expect(rows).toHaveText(['Player', 'Webamp']);
-  
+
   // photo-viewer
   const iauxPhotoViewer = musicTheater.locator('iaux-photo-viewer');
   expect(await iauxPhotoViewer.count()).toEqual(1);
@@ -58,18 +62,25 @@ test('Play 3 mystery sound effects', async ({ page }) => {
     const trackTitle = trackListButtons.nth(i).locator('.track-title');
     const trackLength = trackListButtons.nth(i).locator('.track-length');
 
-    expect(await trackNumber.textContent()).toContain(trackListDetails[i].number);
+    expect(await trackNumber.textContent()).toContain(
+      trackListDetails[i].number,
+    );
     expect(await trackTitle.textContent()).toContain(trackListDetails[i].title);
-    expect(await trackLength.textContent()).toContain(trackListDetails[i].length);
+    expect(await trackLength.textContent()).toContain(
+      trackListDetails[i].length,
+    );
   }
 
   // select button tracks
   await trackListButtons.nth(1).click();
-  await page.waitForURL('https://archive.org/details/cd_mystery-sound-effects_gateway-gecordings/disc1/02.+Gateway+Gecordings+-+Steps.flac');
+  await page.waitForURL(
+    'https://archive.org/details/cd_mystery-sound-effects_gateway-gecordings/disc1/02.+Gateway+Gecordings+-+Steps.flac',
+  );
 
   await trackListButtons.nth(2).click();
-  await page.waitForURL('https://archive.org/details/cd_mystery-sound-effects_gateway-gecordings/disc1/03.+Gateway+Gecordings+-+Steps.flac');
+  await page.waitForURL(
+    'https://archive.org/details/cd_mystery-sound-effects_gateway-gecordings/disc1/03.+Gateway+Gecordings+-+Steps.flac',
+  );
 
   await page.close();
 });
-