(test) O3-2943: E2E test for adding an immunization (openmrs#1728)

* (test) O3-2943: E2E test for adding an immunization

* Update Gherkin wording

e2e/pages/immunizations-page.ts

@@ -0,0 +1,10 @@
+import { type Page } from '@playwright/test';
+
+export class ImmunizationsPage {
+  constructor(readonly page: Page) {}
+  readonly immunizationsTable = () => this.page.getByRole('table', { name: /immunizations summary/i });
+
+  async goTo(patientUuid: string) {
+    await this.page.goto(`/openmrs/spa/patient/${patientUuid}/chart/Immunizations`);
+  }
+}

e2e/pages/index.ts

@@ -5,3 +5,4 @@ export * from './medications-page';
 export * from './program-page';
 export * from './vitals-and-biometrics-page';
 export * from './visits-page';
+export * from './immunizations-page';

e2e/specs/immunizations.spec.ts

@@ -0,0 +1,62 @@
+import { expect } from '@playwright/test';
+import { type Visit } from '@openmrs/esm-framework';
+import { generateRandomPatient, type Patient, startVisit, deletePatient } from '../commands';
+import { test } from '../core';
+import { ImmunizationsPage } from '../pages';
+
+let patient: Patient;
+let visit: Visit;
+
+test.beforeEach(async ({ api }) => {
+  patient = await generateRandomPatient(api);
+  visit = await startVisit(api, patient.uuid);
+});
+
+test('Add an immunization', async ({ page }) => {
+  const immunizationsPage = new ImmunizationsPage(page);
+  const headerRow = immunizationsPage.immunizationsTable().locator('thead > tr');
+  const immunizationType = immunizationsPage.immunizationsTable().locator('tbody td:nth-child(2)');
+  const vaccinationDate = immunizationsPage.immunizationsTable().locator('tbody td:nth-child(3)');
+
+  await test.step('When I go to the Immunizations page', async () => {
+    await immunizationsPage.goTo(patient.uuid);
+  });
+
+  await test.step('And I click on the `Record immunizations` link', async () => {
+    await page.getByRole('button', { name: /record immunizations/i }).click();
+  });
+
+  await test.step('Then I should see the Immunization form launch in the workspace', async () => {
+    await expect(page.getByText(/immunization form/i)).toBeVisible();
+  });
+
+  await test.step('When I set `08/03/2024` as the vaccination date', async () => {
+    await page.getByLabel(/vaccination date/i).clear();
+    await page.getByLabel(/vaccination date/i).fill('08/03/2024');
+    await page.getByLabel(/vaccination date/i).press('Tab');
+  });
+
+  await test.step('And I set `Hepatitis B vaccination` as the immunization', async () => {
+    await page.getByRole('combobox', { name: /immunization/i }).click();
+    await page.getByText(/hepatitis b vaccination/i).click();
+  });
+
+  await test.step('And I click on the `Save` button', async () => {
+    await page.getByRole('button', { name: /save/i }).click();
+  });
+
+  await test.step('Then I should see a success toast notification', async () => {
+    await expect(page.getByText(/vaccination saved successfully/i)).toBeVisible();
+  });
+
+  await test.step('And I should see the newly recorded immunization in the list', async () => {
+    await expect(headerRow).toContainText(/vaccine/i);
+    await expect(headerRow).toContainText(/recent vaccination/i);
+    await expect(immunizationType).toContainText(/hepatitis b vaccination/i);
+    await expect(vaccinationDate).toContainText(/mar 8, 2024/i);
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await deletePatient(api, patient.uuid);
+});

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

@@ -144,7 +144,7 @@ const ImmunizationsDetailedSummary: React.FC<ImmunizationsDetailedSummaryProps>
         <DataTable rows={paginatedImmunizations} headers={tableHeader} size={isTablet ? 'lg' : 'sm'} useZebraStyles>
           {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getExpandHeaderProps }) => (
             <TableContainer>
-              <Table {...getTableProps()}>
+              <Table aria-label="immunizations summary" {...getTableProps()}>
                 <TableHead>
                   <TableRow>
                     <TableExpandHeader enableToggle {...getExpandHeaderProps()} />