(test) O3-2107: Add patient chart allergies E2E test (#1205)

* Add patient allergies e2e test

* Adjust requested changes

* Made sepereate spec files

* Change the node version

* Restructure the e2e tests

* Add changes to patientAllergiesPage

* Add a locator to table row

* Add data test id to table

* Add data test ids

* Adjust new requirements

* Adjust some changes

* Do the requested changes

* Adjust required changes

---------

Co-authored-by: Anjula Shanaka <anjulashanaka@gmail.com>

e2e/pages/allergies-page.ts

@@ -1,8 +1,10 @@
 import { Page } from '@playwright/test';
 
-export class AllergiesPage {
+export class PatientAllergiesPage {
   constructor(readonly page: Page) {}
 
+  readonly allergyTable = () => this.page.getByTestId('allergy-table');
+
   async goto(uuid: string) {
     await this.page.goto('/openmrs/spa/patient/' + uuid + '/chart/Allergies');
   }

e2e/specs/record-drug-allergies.spec.ts

@@ -0,0 +1,53 @@
+import { test } from '../core';
+import { PatientAllergiesPage } from '../pages';
+import { expect } from '@playwright/test';
+import { generateRandomPatient, deletePatient, Patient } from '../commands';
+
+let patient: Patient;
+
+test.beforeEach(async ({ api }) => {
+  patient = await generateRandomPatient(api);
+});
+
+test('Add drug allergy to patient', async ({ page, api }) => {
+  const allergiesPage = new PatientAllergiesPage(page);
+
+  await test.step('When I visit the patient allergies page', async () => {
+    await allergiesPage.goto(patient.uuid);
+  });
+
+  await test.step('And I click the Record allergy intolerance button', async () => {
+    await allergiesPage.page.getByText('Record allergy').click();
+  });
+
+  await test.step('And I filled the form', async () => {
+    await allergiesPage.page.getByText('ACE inhibitors').click();
+    await allergiesPage.page.getByText('Mental status change').click();
+    await allergiesPage.page.getByText('Mild').click();
+    await allergiesPage.page.locator('#comments').fill('Test comment');
+  });
+
+  await test.step('And I submit the form', async () => {
+    await allergiesPage.page.getByText('Save').click();
+  });
+
+  await test.step('Then I should see the Allergy Saved notification', async () => {
+    await expect(allergiesPage.page.getByText('saved')).toBeVisible();
+  });
+
+  await test.step('And I see the recorded allergy data', async () => {
+    const rows = allergiesPage.allergyTable().locator('tr');
+    const allergenCell = rows.locator('td:first-child');
+    const severityCell = rows.locator('td:nth-child(2)');
+    const reactionCell = rows.locator('td:nth-child(3)');
+    const commentCell = rows.locator('td:nth-child(4)');
+    await expect(allergenCell.getByText('ACE inhibitors')).toBeVisible();
+    await expect(reactionCell.getByText('Mental status change')).toBeVisible();
+    await expect(severityCell.getByText('LOW')).toBeVisible();
+    await expect(commentCell.getByText('Test comment')).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await deletePatient(api, patient.uuid);
+});

e2e/specs/record-environmental-allergy.spec.ts

@@ -0,0 +1,54 @@
+import { test } from '../core';
+import { PatientAllergiesPage } from '../pages';
+import { expect } from '@playwright/test';
+import { generateRandomPatient, deletePatient, Patient } from '../commands';
+
+let patient: Patient;
+
+test.beforeEach(async ({ api }) => {
+  patient = await generateRandomPatient(api);
+});
+
+test('Add environmental allergy to patient', async ({ page, api }) => {
+  const allergiesPage = new PatientAllergiesPage(page);
+
+  await test.step('When I visit the patient allergies page', async () => {
+    await allergiesPage.goto(patient.uuid);
+  });
+
+  await test.step('And I click the Record allergy intolerance button', async () => {
+    await allergiesPage.page.getByText('Record allergy').click();
+  });
+
+  await test.step('And I filled the form', async () => {
+    await allergiesPage.page.getByText('Environmental').click();
+    await allergiesPage.page.getByText('Dust').click();
+    await allergiesPage.page.getByText('Mental status change').click();
+    await allergiesPage.page.getByText('Mild').click()
+    await allergiesPage.page.locator('#comments').fill('Test comment');
+  });
+
+  await test.step('And I click the save button', async () => {
+    await allergiesPage.page.getByText('Save').click();
+  });
+
+  await test.step('Then I should see the Allergy Saved notification', async () => {
+    await expect(allergiesPage.page.getByText('saved')).toBeVisible();
+  });
+
+  await test.step('And I see the recorded allergy data', async () => {
+    const rows = allergiesPage.allergyTable().locator('tr');
+    const allergenCell = rows.locator('td:first-child');
+    const severityCell = rows.locator('td:nth-child(2)');
+    const reactionCell = rows.locator('td:nth-child(3)');
+    const commentCell = rows.locator('td:nth-child(4)');
+    await expect(allergenCell.getByText('Dust')).toBeVisible();
+    await expect(reactionCell.getByText('Mental status change')).toBeVisible();
+    await expect(severityCell.getByText('LOW')).toBeVisible();
+    await expect(commentCell.getByText('Test comment')).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await deletePatient(api, patient.uuid);
+});

e2e/specs/record-food-allergy.spec.ts

@@ -0,0 +1,54 @@
+import { test } from '../core';
+import { PatientAllergiesPage } from '../pages';
+import { expect } from '@playwright/test';
+import { generateRandomPatient, deletePatient, Patient } from '../commands';
+
+let patient: Patient;
+
+test.beforeEach(async ({ api }) => {
+  patient = await generateRandomPatient(api);
+});
+
+test('Add Food allergy to patient', async ({ page, api }) => {
+  const allergiesPage = new PatientAllergiesPage(page);
+
+  await test.step('When I visit the patient allergies page', async () => {
+    await allergiesPage.goto(patient.uuid);
+  });
+
+  await test.step('And I click the Record allergy intolerance button', async () => {
+    await allergiesPage.page.getByText('Record allergy').click();
+  });
+
+  await test.step('Ab=nd I filled the form', async () => {
+    await allergiesPage.page.getByText('Food').click();
+    await allergiesPage.page.getByText('Eggs').click();
+    await allergiesPage.page.getByText('Mental status change').click();
+    await allergiesPage.page.getByText('Mild').click();
+    await allergiesPage.page.locator('#comments').fill('Test comment');
+  });
+
+  await test.step('And I click the save button', async () => {
+    await allergiesPage.page.getByText('Save').click();
+  });
+
+  await test.step('Then I should see the Allergy Saved notification', async () => {
+    await expect(allergiesPage.page.getByText('saved')).toBeVisible();
+  });
+
+  await test.step('And I see the recorded allergy data', async () => {
+    const rows = await allergiesPage.allergyTable().locator('tr');
+    const allergenCell = rows.locator('td:first-child');
+    const severityCell = rows.locator('td:nth-child(2)');
+    const reactionCell = rows.locator('td:nth-child(3)');
+    const commentCell = rows.locator('td:nth-child(4)');
+    await expect(allergenCell.getByText('Eggs')).toBeVisible();
+    await expect(reactionCell.getByText('Mental status change')).toBeVisible();
+    await expect(severityCell.getByText('LOW')).toBeVisible();
+    await expect(commentCell.getByText('Test comment')).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await deletePatient(api, patient.uuid);
+});

packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx

@@ -106,7 +106,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
                     ))}
                   </TableRow>
                 </TableHead>
-                <TableBody>
+                <TableBody data-testid="allergy-table">
                   {rows.map((row) => (
                     <TableRow key={row.id}>
                       {row.cells.map((cell) => (