(fix) Fix e2e tests that use the OpenmrsDatePicker (#1241)

* (fix) E2E tests failing due to OpenmrsDatePicker * (chore) fix lint issues and remove unnecessary awaits * (fix) Update locator selector for date picker * (refactor) remove function def * Update e2e/specs/register-new-patient.spec.ts Co-authored-by: Jayasanka Weerasinghe <[email protected]> * (chore): Disable eslint rules for e2e --------- Co-authored-by: Jayasanka Weerasinghe <[email protected]>
openmrs · Aug 5, 2024 · 0b56d9d · 0b56d9d
1 parent f2f22c4
commit 0b56d9d
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 68 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -32,7 +32,12 @@
       }
     ],
     "prefer-const": "off",
-    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-console": [
+      "error",
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
     "no-unsafe-optional-chaining": "off",
     "no-explicit-any": "off",
     "no-extra-boolean-cast": "off",
@@ -64,5 +69,35 @@
         ]
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/e2e/**"],
+      "rules": {
+        "testing-library/await-async-events": "off",
+        "testing-library/await-async-query": "off",
+        "testing-library/await-async-utils": "off",
+        "testing-library/no-await-sync-events": "off",
+        "testing-library/no-await-sync-queries": "off",
+        "testing-library/no-container": "off",
+        "testing-library/no-debugging-utils": "off",
+        "testing-library/no-dom-import": "off",
+        "testing-library/no-global-regexp-flag-in-query": "off",
+        "testing-library/no-manual-cleanup": "off",
+        "testing-library/no-node-access": "off",
+        "testing-library/no-promise-in-fire-event": "off",
+        "testing-library/no-render-in-lifecycle": "off",
+        "testing-library/no-unnecessary-act": "off",
+        "testing-library/no-wait-for-multiple-assertions": "off",
+        "testing-library/no-wait-for-side-effects": "off",
+        "testing-library/no-wait-for-snapshot": "off",
+        "testing-library/prefer-find-by": "off",
+        "testing-library/prefer-implicit-assert": "off",
+        "testing-library/prefer-presence-queries": "off",
+        "testing-library/prefer-query-by-disappearance": "off",
+        "testing-library/prefer-screen-queries": "off",
+        "testing-library/render-result-naming-convention": "off"
+      }
+    }
+  ]
 }
diff --git a/e2e/pages/registration-and-edit-page.ts b/e2e/pages/registration-and-edit-page.ts
@@ -7,7 +7,11 @@ export interface PatientRegistrationFormValues {
   middleName?: string;
   familyName?: string;
   sex?: PatientRegistrationSex;
-  birthdate?: string;
+  birthdate?: {
+    day: string;
+    month: string;
+    year: string;
+  };
   postalCode?: string;
   address1?: string;
   address2?: string;
@@ -26,7 +30,10 @@ export class RegistrationAndEditPage {
   readonly middleNameInput = () => this.page.locator('#middleName');
   readonly familyNameInput = () => this.page.locator('#familyName');
   readonly sexRadioButton = (sex: PatientRegistrationSex) => this.page.locator(`label[for=gender-option-${sex}]`);
-  readonly birthdateInput = () => this.page.locator('#birthdate');
+  readonly birthDateInput = () => this.page.locator('#birthdate');
+  readonly birthdateDayInput = () => this.birthDateInput().locator('[data-type="day"]');
+  readonly birthdateMonthInput = () => this.birthDateInput().locator('[data-type="month"]');
+  readonly birthdateYearInput = () => this.birthDateInput().locator('[data-type="year"]');
   readonly address1Input = () => this.page.locator('#address1');
   readonly countryInput = () => this.page.locator('#country');
   readonly countyDistrictInput = () => this.page.locator('#countyDistrict');
@@ -50,8 +57,10 @@ export class RegistrationAndEditPage {
     await tryFill(this.middleNameInput(), formValues.middleName);
     await tryFill(this.familyNameInput(), formValues.familyName);
     formValues.sex && (await this.sexRadioButton(formValues.sex).check());
-    // TODO: O3-3482 Broken due to the date picker and should be fixed
-    // await tryFill(this.birthdateInput(), formValues.birthdate);
+    this.birthDateInput().getByRole('presentation').focus();
+    await tryFill(this.birthdateDayInput(), formValues.birthdate.day);
+    await tryFill(this.birthdateMonthInput(), formValues.birthdate.month);
+    await tryFill(this.birthdateYearInput(), formValues.birthdate.year);
     await tryFill(this.phoneInput(), formValues.phone);
     await tryFill(this.emailInput(), formValues.email);
     await tryFill(this.address1Input(), formValues.address1);

diff --git a/e2e/specs/active-visits.spec.ts b/e2e/specs/active-visits.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { Visit } from '@openmrs/esm-framework';
+import type { Visit } from '@openmrs/esm-framework';
 import { test } from '../core';
 import type { Provider } from '../../packages/esm-appointments-app/src/types/index';
 import type { Encounter } from '../../packages/esm-active-visits-app/src/visits-summary/visit.resource';
@@ -9,7 +9,7 @@ import {
   deletePatient,
   endVisit,
   generateRandomPatient,
-  Patient,
+  type Patient,
   startVisit,
   getProvider,
 } from '../commands';

diff --git a/e2e/specs/edit-patient.spec.ts b/e2e/specs/edit-patient.spec.ts
@@ -16,7 +16,7 @@ const formValues: PatientRegistrationFormValues = {
   middleName: 'Donny',
   familyName: `Ronny`,
   sex: 'male',
-  birthdate: '01/02/2020',
+  birthdate: { day: '01', month: '02', year: '2020' },
   postalCode: '',
   address1: 'Bom Jesus Street',
   address2: '',
@@ -46,15 +46,16 @@ test('Edit a patient', async ({ page, api }) => {
     const { person } = updatedPatient;
     const { givenName, middleName, familyName, sex } = formValues;
 
-    await expect(person.display).toBe(`${givenName} ${middleName} ${familyName}`);
-    await expect(person.gender).toMatch(new RegExp(sex[0], 'i'));
-    // TODO: O3-3482 Broken due to the date picker and should be fixed
-    // await expect(dayjs(person.birthdate).format('DD/MM/YYYY')).toBe(formValues.birthdate);
-    await expect(person.preferredAddress.address1).toBe(formValues.address1);
-    await expect(person.preferredAddress.cityVillage).toBe(formValues.cityVillage);
-    await expect(person.preferredAddress.stateProvince).toBe(formValues.stateProvince);
-    await expect(person.preferredAddress.country).toBe(formValues.country);
-    await expect(person.attributes[0].display).toBe(formValues.phone);
+    expect(person.display).toBe(`${givenName} ${middleName} ${familyName}`);
+    expect(person.gender).toMatch(new RegExp(sex[0], 'i'));
+    expect(dayjs(person.birthdate).format('DD/MM/YYYY')).toBe(
+      `${formValues.birthdate.day}/${formValues.birthdate.month}/${formValues.birthdate.year}`,
+    );
+    expect(person.preferredAddress.address1).toBe(formValues.address1);
+    expect(person.preferredAddress.cityVillage).toBe(formValues.cityVillage);
+    expect(person.preferredAddress.stateProvince).toBe(formValues.stateProvince);
+    expect(person.preferredAddress.country).toBe(formValues.country);
+    expect(person.attributes[0].display).toBe(formValues.phone);
   });
 });
 

diff --git a/e2e/specs/register-new-patient.spec.ts b/e2e/specs/register-new-patient.spec.ts
@@ -6,55 +6,54 @@ import { deletePatient, getPatient } from '../commands';
 
 let patientUuid: string;
 
-// TODO: O3-3482 Broken due to the date picker and should be fixed
-test.describe.fixme('Broken due to the date picker and should be fixed', () => {
-  test('Register a new patient', async ({ page, api }) => {
-    test.setTimeout(5 * 60 * 1000);
-    const patientRegistrationPage = new RegistrationAndEditPage(page);
-
-    // TODO: Add email field after fixing O3-1883 (https://issues.openmrs.org/browse/O3-1883)
-    const formValues: PatientRegistrationFormValues = {
-      givenName: `Johnny`,
-      middleName: 'Donny',
-      familyName: `Ronny`,
-      sex: 'male',
-      birthdate: '01/02/2020',
-      postalCode: '',
-      address1: 'Bom Jesus Street',
-      address2: '',
-      country: 'Brazil',
-      stateProvince: 'Pernambuco',
-      cityVillage: 'Recife',
-      phone: '5555551234',
-    };
-
-    await test.step('When I visit the registration page', async () => {
-      await patientRegistrationPage.goto();
-      await patientRegistrationPage.waitUntilTheFormIsLoaded();
-    });
-
-    await test.step('And then I click on fill new values into the registration form and then click the `Submit` button', async () => {
-      await patientRegistrationPage.fillPatientRegistrationForm(formValues);
-    });
-
-    await test.step("Then I should be redirected to the new patient's chart page and a new patient record should be created from the information captured in the form", async () => {
-      await expect(page).toHaveURL(new RegExp('^[\\w\\d:\\/.-]+\\/patient\\/[\\w\\d-]+\\/chart\\/.*$'));
-      const patientUuid = /patient\/(.+)\/chart/.exec(page.url())?.[1] ?? null;
-      await expect(patientUuid).not.toBeNull();
-
-      const patient = await getPatient(api, patientUuid);
-      const { person } = patient;
-      const { givenName, middleName, familyName, sex } = formValues;
-
-      await expect(person.display).toBe(`${givenName} ${middleName} ${familyName}`);
-      await expect(person.gender).toMatch(new RegExp(sex[0], 'i'));
-      await expect(dayjs(person.birthdate).format('DD/MM/YYYY')).toBe(formValues.birthdate);
-      await expect(person.preferredAddress.address1).toBe(formValues.address1);
-      await expect(person.preferredAddress.cityVillage).toBe(formValues.cityVillage);
-      await expect(person.preferredAddress.stateProvince).toBe(formValues.stateProvince);
-      await expect(person.preferredAddress.country).toBe(formValues.country);
-      await expect(person.attributes[0].display).toBe(formValues.phone);
-    });
+test('Register a new patient', async ({ page, api }) => {
+  test.setTimeout(5 * 60 * 1000);
+  const patientRegistrationPage = new RegistrationAndEditPage(page);
+
+  // TODO: Add email field after fixing O3-1883 (https://issues.openmrs.org/browse/O3-1883)
+  const formValues: PatientRegistrationFormValues = {
+    givenName: `Johnny`,
+    middleName: 'Donny',
+    familyName: `Ronny`,
+    sex: 'male',
+    birthdate: { day: '01', month: '02', year: '2020' },
+    postalCode: '',
+    address1: 'Bom Jesus Street',
+    address2: '',
+    country: 'Brazil',
+    stateProvince: 'Pernambuco',
+    cityVillage: 'Recife',
+    phone: '5555551234',
+  };
+
+  await test.step('When I visit the registration page', async () => {
+    await patientRegistrationPage.goto();
+    await patientRegistrationPage.waitUntilTheFormIsLoaded();
+  });
+
+  await test.step('And then I click on fill new values into the registration form and then click the `Submit` button', async () => {
+    await patientRegistrationPage.fillPatientRegistrationForm(formValues);
+  });
+
+  await test.step("Then I should be redirected to the new patient's chart page and a new patient record should be created from the information captured in the form", async () => {
+    await expect(page).toHaveURL(new RegExp('^[\\w\\d:\\/.-]+\\/patient\\/[\\w\\d-]+\\/chart\\/.*$'));
+    const patientUuid = /patient\/(.+)\/chart/.exec(page.url())?.[1] ?? null;
+    expect(patientUuid).not.toBeNull();
+
+    const patient = await getPatient(api, patientUuid);
+    const { person } = patient;
+    const { givenName, middleName, familyName, sex } = formValues;
+
+    expect(person.display).toBe(`${givenName} ${middleName} ${familyName}`);
+    expect(person.gender).toMatch(new RegExp(sex[0], 'i'));
+    expect(dayjs(person.birthdate).format('DD/MM/YYYY')).toBe(
+      `${formValues.birthdate.day}/${formValues.birthdate.month}/${formValues.birthdate.year}`,
+    );
+    expect(person.preferredAddress.address1).toBe(formValues.address1);
+    expect(person.preferredAddress.cityVillage).toBe(formValues.cityVillage);
+    expect(person.preferredAddress.stateProvince).toBe(formValues.stateProvince);
+    expect(person.preferredAddress.country).toBe(formValues.country);
+    expect(person.attributes[0].display).toBe(formValues.phone);
   });
 });
 
@@ -99,7 +98,7 @@ test('Register an unknown patient', async ({ api, page }) => {
 
   await test.step('And I should see the newly recorded unknown patient dispalyed on the dashboard', async () => {
     const patient = await getPatient(api, /patient\/(.+)\/chart/.exec(page.url())?.[1]);
-    await expect(patient?.person?.display).toBe('UNKNOWN UNKNOWN');
+    expect(patient?.person?.display).toBe('UNKNOWN UNKNOWN');
   });
 });