@ampath/esm-dispensing-app 1.10.0-next.1

package/e2e/fixtures/api.ts

@@ -0,0 +1,27 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { type APIRequestContext, type PlaywrightWorkerArgs, type WorkerFixture } from '@playwright/test';
+
+/**
+ * A fixture which initializes an [`APIRequestContext`](https://playwright.dev/docs/api/class-apirequestcontext)
+ * that is bound to the configured OpenMRS API server. The context is automatically authenticated
+ * using the configured admin account.
+ *
+ * Use the request context like this:
+ * ```ts
+ * test('your test', async ({ api }) => {
+ *   const res = await api.get('patient/1234');
+ *   await expect(res.ok()).toBeTruthy();
+ * });
+ * ```
+ */
+export const api: WorkerFixture<APIRequestContext, PlaywrightWorkerArgs> = async ({ playwright }, use) => {
+  const ctx = await playwright.request.newContext({
+    baseURL: `${process.env.E2E_BASE_URL}/ws/rest/v1/`,
+    httpCredentials: {
+      username: process.env.E2E_USER_ADMIN_USERNAME,
+      password: process.env.E2E_USER_ADMIN_PASSWORD,
+    },
+  });
+
+  use(ctx);
+};

package/e2e/fixtures/index.ts

@@ -0,0 +1 @@
+export * from './api';

package/e2e/pages/dispensing-page.ts

@@ -0,0 +1,9 @@
+import { type Page } from '@playwright/test';
+
+export class DispensingPage {
+  constructor(readonly page: Page) {}
+
+  async goTo() {
+    await this.page.goto('/openmrs/spa/dispensing');
+  }
+}

package/e2e/pages/index.ts

@@ -0,0 +1 @@
+export * from './dispensing-page';

package/e2e/specs/active-prescriptions.spec.ts

@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import { type Order, type Visit } from '@openmrs/esm-framework';
+import {
+  generateRandomDrugOrder,
+  deleteDrugOrder,
+  createEncounter,
+  deleteEncounter,
+  getProvider,
+  startVisit,
+  endVisit,
+} from '../commands';
+import { type Encounter, type Provider } from '../commands/types';
+import { test } from '../core';
+import { DispensingPage } from '../pages';
+
+let visit: Visit;
+let drugOrder: Order;
+let encounter: Encounter;
+let orderer: Provider;
+
+test.beforeEach(async ({ api, patient }) => {
+  visit = await startVisit(api, patient.uuid);
+  orderer = await getProvider(api);
+  encounter = await createEncounter(api, patient.uuid, orderer.uuid, visit);
+  drugOrder = await generateRandomDrugOrder(api, patient.uuid, encounter, orderer.uuid);
+});
+
+test('View active prescriptions', async ({ page, patient }) => {
+  const dispensingPage = new DispensingPage(page);
+
+  await test.step('When I navigate to the dispensing page', async () => {
+    await dispensingPage.goTo();
+    await expect(page).toHaveURL(`${process.env.E2E_BASE_URL}/spa/dispensing`);
+  });
+
+  await test.step('And I click on the Active prescriptions tab', async () => {
+    await page.getByRole('tab', { name: 'Active prescriptions' }).click();
+    await expect(page.getByRole('tab', { name: 'Active prescriptions' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  await test.step('Then the prescriptions table should display with correct column headers', async () => {
+    await expect(page.getByRole('columnheader', { name: 'Created' })).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Patient name' })).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Prescriber' })).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Drugs' })).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Last dispenser' })).toBeVisible();
+    await expect(page.getByRole('columnheader', { name: 'Status' })).toBeVisible();
+  });
+
+  await test.step('And the table should contain the test prescription', async () => {
+    const patientName = `${patient.person.display}`;
+    const patientRow = page.getByRole('row', { name: new RegExp(patientName) });
+    await expect(patientRow.getByRole('cell', { name: patientName })).toBeVisible();
+    await expect(patientRow.getByRole('cell', { name: 'Aspirin 81mg' })).toBeVisible();
+    await expect(patientRow.getByRole('cell', { name: 'Active' })).toBeVisible();
+  });
+
+  await test.step('And I should be able to expand the prescription row to see details', async () => {
+    await page
+      .getByRole('row', { name: /Expand current row/ })
+      .getByLabel('Expand current row')
+      .nth(0)
+      .click();
+    await expect(page.getByLabel('Prescription details', { exact: true })).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await deleteEncounter(api, encounter.uuid);
+  await deleteDrugOrder(api, drugOrder.uuid);
+  await endVisit(api, visit);
+});

package/e2e/specs/close-prescription.spec.ts

@@ -0,0 +1,71 @@
+import { expect } from '@playwright/test';
+import { type Order, type Visit } from '@openmrs/esm-framework';
+import {
+  generateRandomDrugOrder,
+  deleteDrugOrder,
+  createEncounter,
+  deleteEncounter,
+  getProvider,
+  startVisit,
+  endVisit,
+} from '../commands';
+import { type Encounter, type Provider } from '../commands/types';
+import { test } from '../core';
+import { DispensingPage } from '../pages';
+
+let visit: Visit;
+let drugOrder: Order;
+let encounter: Encounter;
+let orderer: Provider;
+
+test.beforeEach(async ({ api, patient }) => {
+  visit = await startVisit(api, patient.uuid);
+  orderer = await getProvider(api);
+  encounter = await createEncounter(api, patient.uuid, orderer.uuid, visit);
+  drugOrder = await generateRandomDrugOrder(api, patient.uuid, encounter, orderer.uuid);
+});
+
+test('Close prescription', async ({ page, patient }) => {
+  const dispensingPage = new DispensingPage(page);
+  await test.step('When I navigate to the dispensing app', async () => {
+    await dispensingPage.goTo();
+  });
+
+  await test.step('And I click on the Active prescriptions tab', async () => {
+    await page.getByRole('tab', { name: 'Active prescriptions' }).click();
+    await expect(page.getByRole('tab', { name: 'Active prescriptions' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  await test.step('And I expand a table row in the prescriptions table corresponding to an active prescription', async () => {
+    const rowText = new RegExp(`Expand current row`);
+    await page.getByRole('row', { name: rowText }).getByLabel('Expand current row').nth(0).click();
+    await expect(page.getByLabel('Prescription details', { exact: true }).getByText('Aspirin 81mg')).toBeVisible();
+  });
+
+  await test.step('Then I click the Close button on the prescription tile', async () => {
+    await page.getByRole('button', { name: 'danger Close' }).click();
+    await expect(page.getByText('Close prescription')).toBeVisible();
+    await expect(page.getByText('Reason for close')).toBeVisible();
+  });
+
+  await test.step('And when I select Allergy as the reason for closing and submit the form', async () => {
+    await page.waitForLoadState('networkidle');
+    const openDropdownButton = page.getByRole('button', { name: 'Open', exact: true });
+    await openDropdownButton.scrollIntoViewIfNeeded();
+    await openDropdownButton.click();
+    await page.getByText('Allergy', { exact: true }).click();
+    const closeButton = page.locator('form').getByRole('button', { name: 'Close' });
+    await closeButton.scrollIntoViewIfNeeded();
+    await closeButton.click();
+  });
+
+  await test.step('Then I should see a success notification', async () => {
+    await expect(page.getByText(/medication dispense closed/i)).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await deleteEncounter(api, encounter.uuid);
+  await deleteDrugOrder(api, drugOrder.uuid);
+  await endVisit(api, visit);
+});

package/e2e/specs/dispense-medication.spec.ts

@@ -0,0 +1,71 @@
+import { expect } from '@playwright/test';
+import { type Order, type Visit } from '@openmrs/esm-framework';
+import {
+  generateRandomDrugOrder,
+  deleteDrugOrder,
+  createEncounter,
+  deleteEncounter,
+  getProvider,
+  startVisit,
+  endVisit,
+} from '../commands';
+import { type Encounter, type Provider } from '../commands/types';
+import { test } from '../core';
+import { DispensingPage } from '../pages';
+
+let visit: Visit;
+let drugOrder: Order;
+let encounter: Encounter;
+let orderer: Provider;
+
+test.beforeEach(async ({ api, patient }) => {
+  visit = await startVisit(api, patient.uuid);
+  orderer = await getProvider(api);
+  encounter = await createEncounter(api, patient.uuid, orderer.uuid, visit);
+  drugOrder = await generateRandomDrugOrder(api, patient.uuid, encounter, orderer.uuid);
+});
+
+test('Dispense prescription', async ({ page, patient }) => {
+  const dispensingPage = new DispensingPage(page);
+  await test.step('When I navigate to the dispensing app', async () => {
+    await dispensingPage.goTo();
+    await expect(page).toHaveURL(process.env.E2E_BASE_URL + `/spa/dispensing`);
+  });
+
+  await test.step('And I click on the Active prescriptions tab', async () => {
+    await page.getByRole('tab', { name: 'Active prescriptions' }).click();
+  });
+
+  await test.step('And I expand a table row in the Prescriptions table corresponding to an active prescription', async () => {
+    const rowText = new RegExp(`Expand current row`);
+    await page.getByRole('row', { name: rowText }).getByLabel('Expand current row').nth(0).click();
+    await expect(page.getByLabel('Prescription details', { exact: true }).getByText('Aspirin 81mg')).toBeVisible();
+  });
+
+  await test.step('Then I click the Dispense button to launch the Dispense prescription form', async () => {
+    await page.getByRole('button', { name: 'Dispense', exact: true }).click();
+    await expect(page.getByLabel('Workspace header').getByText('Dispense prescription')).toBeVisible();
+  });
+
+  await test.step('Then I submit the form by clicking the Dispense prescription button', async () => {
+    await page.waitForLoadState('networkidle');
+    const dispenseButton = page.getByRole('button', { name: 'Dispense prescription' });
+    await dispenseButton.scrollIntoViewIfNeeded();
+    await dispenseButton.click();
+  });
+
+  await test.step('Then I should see a success notification', async () => {
+    await expect(page.getByText(/medication successfully dispensed/i)).toBeVisible();
+  });
+
+  await test.step('And when I click the `History and comments` tab I should see the updated `Dispensed` status reflected', async () => {
+    await page.getByRole('tab', { name: 'History and comments' }).click();
+    await expect(page.getByText('Dispensed', { exact: true })).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await deleteEncounter(api, encounter.uuid);
+  await deleteDrugOrder(api, drugOrder.uuid);
+  await endVisit(api, visit);
+});

package/e2e/specs/pause-prescription.spec.ts

@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import { type Order, type Visit } from '@openmrs/esm-framework';
+import {
+  generateRandomDrugOrder,
+  deleteDrugOrder,
+  createEncounter,
+  deleteEncounter,
+  getProvider,
+  startVisit,
+  endVisit,
+} from '../commands';
+import { type Encounter, type Provider } from '../commands/types';
+import { test } from '../core';
+import { DispensingPage } from '../pages';
+
+let visit: Visit;
+let drugOrder: Order;
+let encounter: Encounter;
+let orderer: Provider;
+
+test.beforeEach(async ({ api, patient }) => {
+  visit = await startVisit(api, patient.uuid);
+  orderer = await getProvider(api);
+  encounter = await createEncounter(api, patient.uuid, orderer.uuid, visit);
+  drugOrder = await generateRandomDrugOrder(api, patient.uuid, encounter, orderer.uuid);
+});
+
+test('Pause prescription', async ({ page, patient }) => {
+  const dispensingPage = new DispensingPage(page);
+
+  await test.step('When I navigate to the dispensing app', async () => {
+    await dispensingPage.goTo();
+  });
+
+  await test.step('And I click on the Active prescriptions tab', async () => {
+    await page.getByRole('tab', { name: 'Active prescriptions' }).click();
+    await expect(page.getByRole('tab', { name: 'Active prescriptions' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  await test.step('And I expand a table row in the prescriptions table corresponding to an active prescription', async () => {
+    const rowText = new RegExp(`Expand current row`);
+    await page.getByRole('row', { name: rowText }).getByLabel('Expand current row').nth(0).click();
+    await expect(page.getByLabel('Prescription details', { exact: true }).getByText('Aspirin 81mg')).toBeVisible();
+  });
+
+  await test.step('Then I click the Pause button on the prescription tile', async () => {
+    await page.getByRole('button', { name: 'Pause' }).click();
+    await expect(page.getByText(/pause prescription/i)).toBeVisible();
+    await expect(page.getByText(/reason for pause/i)).toBeVisible();
+  });
+
+  await test.step('And I select "Allergy" as the reason for pausing the prescription and then submit the form', async () => {
+    await page.waitForLoadState('networkidle');
+    const openDropdownButton = page.getByRole('button', { name: 'Open', exact: true });
+    await openDropdownButton.scrollIntoViewIfNeeded();
+    await openDropdownButton.click();
+    await page.getByText('Allergy', { exact: true }).click();
+    const pauseButton = page.locator('form').getByRole('button', { name: 'Pause' });
+    await pauseButton.scrollIntoViewIfNeeded();
+    await pauseButton.click();
+  });
+
+  await test.step('Then I should see a success notification', async () => {
+    await expect(page.getByText(/medication dispense paused./i)).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  await deleteEncounter(api, encounter.uuid);
+  await deleteDrugOrder(api, drugOrder.uuid);
+  await endVisit(api, visit);
+});

package/e2e/support/github/Dockerfile

@@ -0,0 +1,34 @@
+# syntax=docker/dockerfile:1.3
+FROM --platform=$BUILDPLATFORM node:22-alpine as dev
+
+ARG APP_SHELL_VERSION=next
+
+RUN mkdir -p /app
+WORKDIR /app
+
+COPY . .
+
+RUN npm_config_legacy_peer_deps=true npm install -g openmrs@${APP_SHELL_VERSION:-next}
+ARG CACHE_BUST
+RUN npm_config_legacy_peer_deps=true openmrs assemble --manifest --mode config --config spa-assemble-config.json --target ./spa
+
+FROM --platform=$BUILDPLATFORM openmrs/openmrs-reference-application-3-frontend:nightly as frontend
+FROM nginx:1.23-alpine
+
+RUN apk update && \
+  apk upgrade && \
+  # add more utils for sponge to support our startup script
+  apk add --no-cache moreutils
+
+# clear any default files installed by nginx
+RUN rm -rf /usr/share/nginx/html/*
+
+COPY --from=frontend /etc/nginx/nginx.conf /etc/nginx/nginx.conf
+# this assumes that NOTHING in the framework is in a subdirectory
+COPY --from=frontend /usr/share/nginx/html/* /usr/share/nginx/html/
+COPY --from=frontend /usr/local/bin/startup.sh /usr/local/bin/startup.sh
+RUN chmod +x /usr/local/bin/startup.sh
+
+COPY --from=dev /app/spa/ /usr/share/nginx/html/
+
+CMD ["/usr/local/bin/startup.sh"]

package/e2e/support/github/docker-compose.yml

@@ -0,0 +1,24 @@
+# This docker compose file is used to create a backend environment for the e2e.yml workflow. 
+# The images are pre-filled with data so that the backend environment can be started within a short time.
+version: "3.7"
+
+services:
+  gateway:
+    image: openmrs/openmrs-reference-application-3-gateway:${TAG:-nightly}
+    ports:
+      - "8080:80"
+
+  frontend:
+    build:
+      context: .
+    environment:
+      SPA_PATH: /openmrs/spa
+      API_URL: /openmrs
+
+  backend:
+    image: openmrs/openmrs-reference-application-3-backend:nightly-with-data
+    depends_on:
+      - db
+
+  db:
+    image: openmrs/openmrs-reference-application-3-db:nightly-with-data

package/e2e/support/github/run-e2e-docker-env.sh

@@ -0,0 +1,42 @@
+#!/usr/bin/env bash -eu
+
+# get the dir containing the script
+script_dir=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+# create a temporary working directory
+working_dir=$(mktemp -d "${TMPDIR:-/tmp/}openmrs-e2e-frontends.XXXXXXXXXX")
+# cleanup temp directory on exit
+trap 'rm -rf "$working_dir"' EXIT
+# get the app name
+app_name=$(jq -r '.name' "$script_dir/../../../package.json")
+
+echo "Creating packed archive of the app for Docker build..."
+# @openmrs/esm-whatever -> _openmrs_esm_whatever
+packed_app_name=$(echo "$app_name" | tr '[:punct:]' '_');
+# run yarn pack for our app and add it to the working directory
+yarn pack -o "$working_dir/$packed_app_name.tgz" >/dev/null;
+echo "Successfully created packed app archive: $packed_app_name.tgz"
+
+echo "Creating dynamic spa-assemble-config.json with frontend modules..."
+# dynamically assemble our list of frontend modules, prepending the primary navigation
+# and patient banner apps; apps will all be in the /app directory of the Docker
+# container
+jq -n \
+  --arg app_name "$app_name" \
+  --arg app_file "/app/$packed_app_name.tgz" \
+  '{
+    "@openmrs/esm-primary-navigation-app": "next",
+    "@openmrs/esm-patient-banner-app": "next"
+  } + {
+    ($app_name): $app_file
+  }' | jq '{"frontendModules": .}' > "$working_dir/spa-assemble-config.json"
+echo "Successfully created spa-assemble-config.json with frontend modules"
+
+echo "Copying Docker configuration files to working directory..."
+cp "$script_dir/Dockerfile" "$working_dir/Dockerfile"
+cp "$script_dir/docker-compose.yml" "$working_dir/docker-compose.yml"
+
+cd "$working_dir"
+echo "Building and starting Docker containers for e2e testing..."
+# CACHE_BUST to ensure the assemble step is always run
+docker compose build --build-arg CACHE_BUST=$(date +%s) frontend
+docker compose up -d

package/e2e/types/index.ts

@@ -0,0 +1,157 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
+export interface Encounter {
+  uuid: string;
+  encounterDateTime: string;
+  encounterProviders: Array<{
+    uuid: string;
+    display: string;
+    encounterRole: {
+      uuid: string;
+      display: string;
+    };
+    provider: {
+      uuid: string;
+      person: {
+        uuid: string;
+        display: string;
+      };
+    };
+  }>;
+  encounterType: {
+    uuid: string;
+    display: string;
+  };
+  obs: Array<Observation>;
+  orders: Array<Order>;
+}
+
+export interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    display: string;
+    conceptClass: {
+      uuid: string;
+      display: string;
+    };
+  };
+  display: string;
+  groupMembers: null | Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: {
+      uuid: string;
+      display: string;
+    };
+  }>;
+  value: any;
+  obsDatetime: string;
+}
+
+export interface Order {
+  uuid: string;
+  dateActivated: string;
+  dateStopped?: Date | null;
+  dose: number;
+  dosingInstructions: string | null;
+  dosingType?: 'org.openmrs.FreeTextDosingInstructions' | 'org.openmrs.SimpleDosingInstructions';
+  doseUnits: {
+    uuid: string;
+    display: string;
+  };
+  drug: {
+    uuid: string;
+    name: string;
+    strength: string;
+    display: string;
+  };
+  duration: number;
+  durationUnits: {
+    uuid: string;
+    display: string;
+  };
+  frequency: {
+    uuid: string;
+    display: string;
+  };
+  numRefills: number;
+  orderNumber: string;
+  orderReason: string | null;
+  orderReasonNonCoded: string | null;
+  orderer: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+  quantity: number;
+  quantityUnits: OpenmrsResource;
+}
+
+export interface Provider {
+  uuid: string;
+  display: string;
+  comments?: string;
+  response?: string;
+  person: OpenmrsResource;
+  name?: string;
+}
+
+export interface Patient {
+  uuid: string;
+  identifiers: Identifier[];
+  display: string;
+  person: {
+    uuid: string;
+    display: string;
+    gender: string;
+    age: number;
+    birthdate: string;
+    birthdateEstimated: boolean;
+    dead: boolean;
+    deathDate?: any;
+    causeOfDeath?: any;
+    preferredAddress: {
+      address1: string;
+      cityVillage: string;
+      country: string;
+      postalCode: string;
+      stateProvince: string;
+      countyDistrict: string;
+    };
+    attributes: any[];
+    voided: boolean;
+    birthtime?: any;
+    deathdateEstimated: boolean;
+    resourceVersion: string;
+  };
+  attributes: { value: string; attributeType: { uuid: string; display: string } }[];
+  voided: boolean;
+}
+
+export interface Address {
+  preferred: boolean;
+  address1: string;
+  cityVillage: string;
+  country: string;
+  postalCode: string;
+  stateProvince: string;
+}
+
+export interface Identifier {
+  uuid: string;
+  display: string;
+}

package/example.env

@@ -0,0 +1,7 @@
+# This is an example environment file for configuring dynamic values.
+E2E_BASE_URL=http://localhost:8080/openmrs
+E2E_USER_ADMIN_USERNAME=admin
+E2E_USER_ADMIN_PASSWORD=Admin123
+E2E_LOGIN_DEFAULT_LOCATION_UUID=44c3efb0-2583-4c80-a79e-1f756a03c0a1
+# The above location UUID is for the "Outpatient Clinic" location in the reference application
+

package/jest.config.js

@@ -0,0 +1,24 @@
+/** @type {import('jest').Config} */
+
+module.exports = {
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleNameMapper: {
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    '^lodash-es$': 'lodash',
+    '^uuid$': '<rootDir>/node_modules/uuid/dist/index.js',
+    dexie: require.resolve('dexie'),
+  },
+  collectCoverageFrom: ['!**/node_modules/**', '!**/e2e/**'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/e2e/', // Ignore the e2e directory containing Playwright tests
+  ],
+  setupFilesAfterEnv: ['<rootDir>/tools/setup-tests.ts'],
+  testEnvironment: 'jsdom',
+  clearMocks: true,
+};