From 0b56d9d58b79fd1c59aebdbfec8a03a5a4dc345a Mon Sep 17 00:00:00 2001 From: Nethmi Rodrigo <34070216+NethmiRodrigo@users.noreply.github.com> Date: Mon, 5 Aug 2024 18:37:23 +0530 Subject: [PATCH] (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 <33048395+jayasanka-sack@users.noreply.github.com> * (chore): Disable eslint rules for e2e --------- Co-authored-by: Jayasanka Weerasinghe <33048395+jayasanka-sack@users.noreply.github.com> --- .eslintrc | 39 +++++++++- e2e/pages/registration-and-edit-page.ts | 17 ++++- e2e/specs/active-visits.spec.ts | 4 +- e2e/specs/edit-patient.spec.ts | 21 +++--- e2e/specs/register-new-patient.spec.ts | 99 ++++++++++++------------- 5 files changed, 112 insertions(+), 68 deletions(-) diff --git a/.eslintrc b/.eslintrc index a5d273232..65f05cac3 100644 --- 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 index 565998944..3041689a2 100644 --- 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 index f1f13089f..fb70f607b 100644 --- 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 index 595f58a52..c76d228aa 100644 --- 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 index 29315772a..4a180ad21 100644 --- 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'); }); });