[DSM] [Playwright] test for Receive Kit in A-T study (#2161)

* kit received dsm playwright test

Author: aweng98

playwright-e2e/dsm/component/filters/sections/customize-view.ts

@@ -18,16 +18,18 @@ export class CustomizeView {
     }
   }
 
-  public async selectColumns(columnsGroupName: string, columns: string[]): Promise<void> {
+  public async selectColumns(columnsGroupName: string, columns: string[], opts: { nth?: number } = {}): Promise<void> {
+    const { nth } = opts;
     this.activeColumnsGroup = columnsGroupName;
-    await this.openColumnsGroup();
+    await this.openColumnsGroup({nth});
     await this.select(columns);
     await this.closeColumnsGroup();
   }
 
-  public async deselectColumns(columnsGroupName: string, columns: string[]): Promise<void> {
+  public async deselectColumns(columnsGroupName: string, columns: string[], opts: { nth?: number } = {}): Promise<void> {
+    const { nth } = opts;
     this.activeColumnsGroup = columnsGroupName;
-    await this.openColumnsGroup();
+    await this.openColumnsGroup({nth});
     await this.select(columns, true);
     await this.closeColumnsGroup();
   }
@@ -49,13 +51,15 @@ export class CustomizeView {
       }
   }
 
-  private async openColumnsGroup(): Promise<void> {
-    const columnsGroupButton = this.columnsGroupButton;
+  private async openColumnsGroup(opts: { nth?: number } = {}): Promise<void> {
+    const { nth } = opts;
+    const columnsGroupButton = this.columnsGroupButton({nth});
     !(await this.isExpanded(columnsGroupButton)) && (await columnsGroupButton.click());
   }
 
-  private async closeColumnsGroup(): Promise<void> {
-    const columnsGroupButton = this.columnsGroupButton;
+  private async closeColumnsGroup(opts: { nth?: number } = {}): Promise<void> {
+    const { nth } = opts;
+    const columnsGroupButton = this.columnsGroupButton({nth});
     (await this.isExpanded(columnsGroupButton)) && (await columnsGroupButton.click());
   }
 
@@ -71,8 +75,9 @@ export class CustomizeView {
 
   /* Locators */
 
-  private get columnsGroupButton(): Locator {
-    return this.page.locator(`${this.columnsGroupXPath}/button`);
+  private columnsGroupButton(opts: { nth?: number } = {}): Locator {
+    const { nth = 0 } = opts;
+    return this.page.locator(`${this.columnsGroupXPath}/button`).nth(nth);
   }
 
   /* XPaths */

playwright-e2e/dsm/component/filters/sections/search/search.ts

@@ -12,7 +12,9 @@ export class Search {
   constructor(private readonly page: Page) {}
 
   public async open(): Promise<void> {
-    await this.page.locator(this.openButtonXPath).click();
+    const open = await this.isOpen();
+    !open && await this.page.locator(this.openButtonXPath).click();
+    await expect(async () => expect(await this.isOpen()).toBe(true)).toPass();
   }
 
   public async search(): Promise<void> {
@@ -166,6 +168,10 @@ export class Search {
     return this.page.locator(`${this.baseTextColumnXPath(columnName)}//mat-form-field//input`);
   }
 
+  private async isOpen(): Promise<boolean> {
+    return this.page.locator('#searchTable').isVisible();
+  }
+
   private additionalFilterCheckboxLocator(columnName: string, checkboxName: AdditionalFilter, isTextField = false): Locator {
     return this.page.locator(
       `${

playwright-e2e/dsm/component/tables/participant-list-table.ts

@@ -42,8 +42,8 @@ export class ParticipantListTable extends Table {
     return await this.page.locator(this.participantDataByXPath(columnName, columnValue, xColumnName)).innerText();
   }
 
-  public async getParticipantDataAt(position: number, columnName: string): Promise<string> {
-    const columnIndex = await this.getHeaderIndex(columnName);
+  public async getParticipantDataAt(position: number, columnName: string, opts: { exactMatch?: boolean } = {}): Promise<string> {
+    const columnIndex = await this.getHeaderIndex(columnName, opts);
     return this.cell(position, columnIndex).innerText();
   }
 

playwright-e2e/dsm/component/tabs/enums/tab-enum.ts

@@ -1,6 +1,7 @@
 export enum TabEnum {
-  SURVEY_DATA = 'Survey Data',
   CONTACT_INFORMATION = 'Contact Information',
+  GENOME_STUDY = 'Genome Study',
+  INVITAE = 'Invitae',
   SAMPLE_INFORMATION = 'Sample Information',
-  INVITAE = 'Invitae'
+  SURVEY_DATA = 'Survey Data',
 }

playwright-e2e/dsm/component/tabs/genome-study-tab.ts

@@ -0,0 +1,26 @@
+import { Locator, Page } from '@playwright/test';
+
+export default class GenomeStudyTab {
+  constructor(private readonly page: Page) {
+  }
+
+  async setValue(field: string, value: string): Promise<void> {
+    await this.getField(field).locator('input').fill(value);
+  }
+
+  async clearSelection(field: string): Promise<void> {
+    await this.getField(field).locator('button', { hasText: 'Clear Selection' }).click();
+  }
+
+  async clearValue(field: string): Promise<void> {
+    await this.getField(field).getByRole('textbox').clear();
+  }
+
+  async setNotesAboutPreviousSampleKits(value: string): Promise<void> {
+    await this.getField('Notes about previous sample kits').locator('textarea').fill(value);
+  }
+
+  getField(field: string): Locator {
+    return this.page.locator('tab.active[role="tabpanel"]').locator(`xpath=//tr[td[normalize-space()="${field}"]]`);
+  }
+}

playwright-e2e/dsm/component/tabs/tabs.ts

@@ -1,18 +1,21 @@
-import {Locator, Page} from '@playwright/test';
+import { expect, Locator, Page } from '@playwright/test';
 import {TabEnum} from 'dsm/component/tabs/enums/tab-enum';
 import ContactInformationTab from 'dsm/component/tabs/contactInformationTab';
+import GenomeStudyTab from 'dsm/component/tabs/genome-study-tab';
 import SampleInformationTab from 'dsm/component/tabs/sampleInformationTab';
 
 export default class Tabs {
   private readonly tabs = new Map<string, object>([
     [TabEnum.CONTACT_INFORMATION, new ContactInformationTab(this.page)],
-    [TabEnum.SAMPLE_INFORMATION, new SampleInformationTab(this.page)]
+    [TabEnum.SAMPLE_INFORMATION, new SampleInformationTab(this.page)],
+    [TabEnum.GENOME_STUDY, new GenomeStudyTab(this.page)],
   ])
 
   constructor(private readonly page: Page) {}
 
   public async clickTab<T extends object>(tabName: TabEnum): Promise<T> {
     await this.tabLocator(tabName).click();
+    await expect(await new Tabs(this.page).isOpen(tabName)).toBe(true);
     return (this.tabs as Map<string, object>).get(tabName) as T;
   }
 
@@ -26,6 +29,11 @@ export default class Tabs {
     return isTabVisible && contactInformationEntered;
   }
 
+  private async isOpen(tabName: TabEnum): Promise<boolean> {
+    const clas = await this.tabLocator(tabName).getAttribute('class');
+    return clas ? clas.includes('active') : false;
+  }
+
   private async HasContactInformationTabEnteredData(): Promise<boolean> {
     const isNotEnteredVisible = await (this.tabs.get(TabEnum.CONTACT_INFORMATION) as ContactInformationTab)
       .isNotEnteredVisible()

playwright-e2e/dsm/pages/participant-list-page.ts

@@ -151,12 +151,30 @@ export default class ParticipantListPage {
     await searchPanel.search();
   }
 
+  public async filterListByShortId(shortId: string, opts: { resultsCount?: number } = {}): Promise<void> {
+    if (!shortId) {
+      throw new Error('shortId cannot be null');
+    }
+    const { resultsCount = 1 } = opts;
+    const participantsTable = this.participantListTable;
+    await this.waitForReady();
+
+    const searchPanel = this.filters.searchPanel;
+    await searchPanel.open();
+    await searchPanel.text('Short ID', { textValue: shortId });
+    await searchPanel.search();
+
+    await expect(participantsTable.footerLocator().first()).toBeVisible();
+    await expect(await participantsTable.rowsCount).toBe(resultsCount);
+  }
+
   public async addColumnsToParticipantList(columnGroup: string, columnOptions: string[]): Promise<void> {
     const customizeViewPanel = this.filters.customizeViewPanel;
     await customizeViewPanel.open();
     await customizeViewPanel.selectColumns(columnGroup, columnOptions);
   }
 
+
   /* Locators */
   private get tableRowsLocator(): Locator {
     return this.page.locator('[role="row"]:not([mat-header-row]):not(mat-header-row), tbody tr');

playwright-e2e/dsm/pages/samples/search-page.ts

@@ -0,0 +1,45 @@
+import { expect, Page } from '@playwright/test';
+import DatePicker from 'dsm/component/date-picker';
+import Select from 'dss/component/select';
+import Table from 'dss/component/table';
+import { waitForNoSpinner } from 'utils/test-utils';
+
+export enum SearchByField {
+  SHORT_ID = 'Short ID',
+  TRACKING_NUMBER = 'Tracking Number (Blood kit return)',
+  MANUFACTURE_BARCODE = 'Manufacturer Barcode'
+}
+
+export default class SearchPage {
+  constructor(private readonly page: Page) {}
+
+  async waitForReady(): Promise<void> {
+    await expect(this.page.locator('h1')).toHaveText('Kit Search');
+  }
+
+  async searchByField(searchField: SearchByField, value: string): Promise<Table> {
+    const select = new Select(this.page, { label: 'Search by Field', root: 'app-shipping-search' });
+    await select.selectOption(searchField);
+    const locator = this.page.locator('//div[button[normalize-space()="Search Kit"]]');
+    await locator.locator('//input').fill(value);
+    await locator.locator('//button').click();
+    await waitForNoSpinner(this.page);
+
+    const table = new Table(this.page);
+    await table.waitForReady();
+    return table
+  }
+
+  async pickEndDate(opts: { yyyy?: number, month?: number, dayOfMonth?: number } = {}): Promise<string> {
+    const { yyyy, month, dayOfMonth } = opts;
+    return new DatePicker(this.page, { nth: 1 }).pickDate({ yyyy, month, dayOfMonth });
+  }
+
+  /**
+   * Click Reload button
+   * @returns {Promise<void>}
+   */
+  async reload(): Promise<void> {
+    await this.page.locator('button', { hasText: 'Reload' }).click();
+  }
+}

playwright-e2e/dss/pages/page-base.ts

@@ -2,7 +2,6 @@ import { expect, Locator, Page, Response } from '@playwright/test';
 import Address from 'dss/component/address';
 import Institution from 'dss/component/institution';
 import Question from 'dss/component/Question';
-import Checkbox from 'dss/component/checkbox';
 import Input from 'dss/component/input';
 import { assertSelectedOption } from 'utils/assertion-helper';
 import { generateRandomPhoneNum } from 'utils/faker-utils';
@@ -416,9 +415,10 @@ export default abstract class PageBase implements PageInterface {
       : new Question(this.page, { prompt: 'Signature' }).toInput();
   }
 
-  async getDate(): Promise<Date> {
+  async getDisplayedDate(): Promise<string> {
     const locator = this.page.locator('//*[./h3[text()="Date"]]/following-sibling::*/p');
-    const str = (await locator.innerText()).trim().replace(' ', '');
-    return new Date(str);
+    const dateString = await locator.innerText();
+    const [MM, DD, YYYY] = dateString.split('/');
+    return `${MM.trim()}/${DD.trim()}/${YYYY.trim()}`;
   }
 }

playwright-e2e/playwright.config.ts

@@ -74,12 +74,12 @@ const testConfig: PlaywrightTestConfig = {
     // baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: process.env.CI ? 'on-first-retry' : 'retain-on-failure',
+    trace: 'retain-on-failure',
     screenshot: {
       mode: 'only-on-failure',
       fullPage: true
     },
-    video: process.env.video ? 'on' : process.env.CI ? 'on-first-retry' : 'retain-on-failure', // Limit load on CI system because trace and video add load
+    video: 'retain-on-failure', // Limit load on CI system because trace and video add load
 
     userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36',
     viewport: { width: 1280, height: 960 },