[Playwright] Follow-up survey tests (#2174)

* playwright test for follow-up survey

Author: aweng98

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

@@ -182,7 +182,7 @@ export class Search {
 
   /* XPaths */
 
-  private get openButtonXPath(): string {
+  public get openButtonXPath(): string {
     return (
       "//div[text()[normalize-space()='Search'] and button[.//*[local-name()='svg' and @data-icon='search']/*[local-name()='path']]]/button"
     );

playwright-e2e/dsm/component/modal.ts

@@ -2,6 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import Button from 'dss/component/button';
 import Input from 'dss/component/input';
 import Radiobutton from 'dss/component/radiobutton';
+import { waitForNoSpinner } from 'utils/test-utils';
 
 export default class Modal {
   private readonly rootSelector: Locator;
@@ -31,6 +32,15 @@ export default class Modal {
     return this.headerLocator().innerText();
   }
 
+  async getBodyText(): Promise<string> {
+    return this.bodyLocator().innerText();
+  }
+
+  async close(): Promise<void> {
+    await this.getButton({ label: 'Close' }).click();
+    await waitForNoSpinner(this.page);
+  }
+
   public getButton(opts: { label?: string | RegExp; ddpTestID?: string }): Button {
     const { label, ddpTestID } = opts;
     return new Button(this.page, { label, ddpTestID, root: this.toLocator() });

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

@@ -4,9 +4,9 @@ import ParticipantPage from 'dsm/pages/participant-page/participant-page';
 import {ParticipantsListPaginator} from 'lib/component/dsm/paginators/participantsListPaginator';
 import {rows} from 'lib/component/dsm/paginators/types/rowsPerPage';
 import { getDate, offsetDaysFromToday } from 'utils/date-utils';
-import { AdditionalFilter } from '../filters/sections/search/search-enums';
+import { waitForNoSpinner } from 'utils/test-utils';
+import { AdditionalFilter } from 'dsm/component/filters/sections/search/search-enums';
 import ParticipantListPage from 'dsm/pages/participant-list-page';
-import addColumnsToParticipantList from 'dsm/pages/participant-list-page';
 
 export class ParticipantListTable extends Table {
   private readonly _participantPage: ParticipantPage = new ParticipantPage(this.page);
@@ -34,6 +34,7 @@ export class ParticipantListTable extends Table {
 
   public async openParticipantPageAt(position: number): Promise<ParticipantPage> {
     await this.getParticipantAt(position).click();
+    await waitForNoSpinner(this.page);
     await this._participantPage.assertPageTitle();
     return this._participantPage;
   }

playwright-e2e/dsm/component/tables/previous-surveys-table.ts

@@ -0,0 +1,8 @@
+import { Page } from '@playwright/test';
+import Table from 'dss/component/table';
+
+export default class PreviousSurveysTable extends Table {
+  constructor(page: Page) {
+    super(page, { cssClassAttribute: '.table' });
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Page } from '@playwright/test';
+import { waitForNoSpinner } from 'utils/test-utils';
+
+export default abstract class DsmPageBase {
+  protected readonly page: Page;
+  protected readonly baseUrl: string | undefined;
+
+  protected constructor(page: Page, baseURL?: string) {
+    this.page = page;
+    this.baseUrl = baseURL;
+  }
+
+  async reload(): Promise<void> {
+    await this.page.reload();
+    await waitForNoSpinner(this.page);
+  }
+}

playwright-e2e/dsm/pages/follow-up-survey-page.ts

@@ -0,0 +1,67 @@
+import { APIRequestContext, expect, Page } from '@playwright/test';
+import { MiscellaneousEnum } from 'dsm/component/navigation/enums/miscellaneousNav-enum';
+import { Navigation } from 'dsm/component/navigation/navigation';
+import PreviousSurveysTable from 'dsm/component/tables/previous-surveys-table';
+import { WelcomePage } from 'dsm/pages/welcome-page';
+import Button from 'dss/component/button';
+import Input from 'dss/component/input';
+import Select from 'dss/component/select';
+import { waitForNoSpinner } from 'utils/test-utils';
+
+export default class FollowUpSurveyPage {
+  private readonly _table: PreviousSurveysTable = new PreviousSurveysTable(this.page);
+
+  static async goto(page: Page, study: string, request: APIRequestContext): Promise<FollowUpSurveyPage> {
+    const welcomePage = new WelcomePage(page);
+    await welcomePage.selectStudy(study);
+
+    const navigation = new Navigation(page, request);
+    await navigation.selectMiscellaneous(MiscellaneousEnum.FOLLOW_UP_SURVEY);
+    const followUpPage = new FollowUpSurveyPage(page);
+    await followUpPage.waitForReady();
+    return followUpPage;
+  }
+
+  constructor(private readonly page: Page) {}
+
+  public get previousSurveysTable(): PreviousSurveysTable {
+    return this._table;
+  }
+
+  public async waitForReady(): Promise<void> {
+    await expect(this.page.locator('h1')).toHaveText(/^\s*Follow-Up Survey\s*$/);
+    await expect(this.select().toLocator()).toBeVisible({ timeout: 30000 });
+    await waitForNoSpinner(this.page);
+  }
+
+  public async selectSurvey(survey: string): Promise<void> {
+    await this.select().selectOption(survey);
+    await waitForNoSpinner(this.page);
+  }
+
+  public async participantId(id: string): Promise<void> {
+    const input = new Input(this.page, { label: 'Participant ID' });
+    await input.fill(id);
+  }
+
+  public async reasonForFollowUpSurvey(reason: string): Promise<void> {
+    const input = new Input(this.page, { label: 'Reason for Follow-Up Survey' });
+    await input.fill(reason);
+  }
+
+  public async createSurvey(): Promise<void> {
+    const button = new Button(this.page, { label: 'Create Survey', root: 'app-survey' });
+    await button.click();
+    await waitForNoSpinner(this.page);
+  }
+
+  public select(): Select {
+    return new Select(this.page, { label: 'Survey', root: 'app-survey' });
+  }
+
+  public async reloadTable(): Promise<void> {
+    const button = new Button(this.page, { label: 'Reload', root: 'app-survey' });
+    await button.click();
+    await waitForNoSpinner(this.page);
+  }
+}

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

@@ -1,4 +1,5 @@
 import { Download, expect, Locator, Page } from '@playwright/test';
+import DsmPageBase from 'dsm/pages/dsm-page-base';
 import Table from 'dss/component/table';
 
 export const COLUMN = {
@@ -8,11 +9,12 @@ export const COLUMN = {
   LAST_NAME: 'Last Name'
 }
 
-export default class MailingListPage {
+export default class MailingListPage extends DsmPageBase {
   private readonly title: string | RegExp;
   readonly downloadButton: Locator;
 
-  constructor(private readonly page: Page, study: string|RegExp) {
+  constructor(page: Page, study: string|RegExp) {
+    super(page);
     this.title = study;
     this.downloadButton = this.page.getByRole('button', { name: 'Download mailing list' })
   }

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

@@ -21,7 +21,6 @@ export default class ParticipantListPage {
     const navigation = new Navigation(page, request);
     const participantListPage = await navigation.selectFromStudy<ParticipantListPage>(StudyNavEnum.PARTICIPANT_LIST);
     await participantListPage.waitForReady();
-    await participantListPage.assertPageTitle();
 
     const participantsTable = participantListPage.participantListTable;
     const rowsTotal = await participantsTable.rowLocator().count();
@@ -32,7 +31,9 @@ export default class ParticipantListPage {
   constructor(private readonly page: Page) {}
 
   public async waitForReady(): Promise<void> {
+    await this.assertPageTitle();
     await waitForNoSpinner(this.page);
+    await expect(this.page.locator(this.filters.searchPanel.openButtonXPath)).toBeVisible();
   }
 
   public async selectAll(): Promise<void> {

playwright-e2e/dsm/pages/welcome-page.ts

@@ -1,5 +1,6 @@
-import { Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 import Select from 'dss/component/select';
+import { waitForNoSpinner } from 'utils/test-utils';
 
 export class WelcomePage {
   private readonly selectWidget: Select = new Select(this.page, { label: 'Select study' });
@@ -8,5 +9,8 @@ export class WelcomePage {
 
   public async selectStudy(studyName: string): Promise<void> {
     await this.selectWidget.selectOption(studyName);
+    await waitForNoSpinner(this.page);
+    await expect(this.page.locator('h1')).toHaveText('Welcome to the DDP Study Management System');
+    await expect(this.page.locator('h2')).toHaveText(`You have selected the ${studyName} study.`);
   }
 }

playwright-e2e/dss/component/select.ts

@@ -71,4 +71,32 @@ export default class Select extends WidgetBase {
         break;
     }
   }
+
+  /**
+   * Finds all options in a Select or mat-select
+   * @returns {Promise<string[]>}
+   */
+  async getAllOptions(): Promise<string[]> {
+    let options;
+    const tagName = await this.toLocator().evaluate((elem) => elem.tagName);
+    switch (tagName) {
+      case 'SELECT':
+        options = await this.toLocator().locator('option').allInnerTexts();
+        break;
+      default:
+        // Click first to open mat-select dropdown
+        await this.toLocator().click();
+        const ariaControlsId = await this.toLocator().getAttribute('aria-controls');
+        if (!ariaControlsId) {
+          throw Error('ERROR: Cannot find attribute "aria-controls"');
+        }
+        const dropdown = this.page.locator(`#${ariaControlsId}[role="listbox"]`);
+        options = await dropdown.locator('mat-option .mat-option-text').allInnerTexts();
+        break;
+    }
+    if (!options) {
+      throw new Error(`Failed to find all options in Select or mat-select`);
+    }
+    return options!;
+  }
 }