@openmrs/esm-fast-data-entry-app 1.1.1-pre.208 → 1.1.1-pre.216

package/README.md

@@ -56,3 +56,11 @@ yarn start --importmap "https://spa-modules.nyc3.digitaloceanspaces.com/import-m
 ```
 
 To see more options run `npx openmrs --help`
+
+## To run end-to-end tests, run:
+
+```bash
+yarn test-e2e
+```
+
+Read the [e2e testing guide](https://openmrs.atlassian.net/wiki/spaces/docs/pages/150962731/Testing+Frontend+Modules+O3) to learn more about End-to-End tests in this project.

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"root","routeRegex":"forms","online":true,"offline":true}],"extensions":[{"name":"forms-app-link","slot":"app-menu-slot","component":"formsAppMenuLink","online":true,"offline":true}],"version":"1.1.1-pre.208"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"root","routeRegex":"forms","online":true,"offline":true}],"extensions":[{"name":"forms-app-link","slot":"app-menu-slot","component":"formsAppMenuLink","online":true,"offline":true}],"version":"1.1.1-pre.216"}

package/e2e/core/global-setup.ts

@@ -0,0 +1,32 @@
+import { request } from '@playwright/test';
+import * as dotenv from 'dotenv';
+
+dotenv.config();
+
+/**
+ * This configuration is to reuse the signed-in state in the tests
+ * by log in only once using the API and then skip the log in step for all the tests.
+ *
+ * https://playwright.dev/docs/auth#reuse-signed-in-state
+ */
+
+async function globalSetup() {
+  const requestContext = await request.newContext();
+  const token = Buffer.from(`${process.env.E2E_USER_ADMIN_USERNAME}:${process.env.E2E_USER_ADMIN_PASSWORD}`).toString(
+    'base64',
+  );
+  await requestContext.post(`${process.env.E2E_BASE_URL}/ws/rest/v1/session`, {
+    data: {
+      sessionLocation: process.env.E2E_LOGIN_DEFAULT_LOCATION_UUID,
+      locale: 'en',
+    },
+    headers: {
+      Accept: 'application/json',
+      Authorization: `Basic ${token}`,
+    },
+  });
+  await requestContext.storageState({ path: 'e2e/storageState.json' });
+  await requestContext.dispose();
+}
+
+export default globalSetup;

package/e2e/core/index.ts

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

package/e2e/core/test.ts

@@ -0,0 +1,20 @@
+import { APIRequestContext, Page, test as base } from '@playwright/test';
+import { api } from '../fixtures';
+
+// This file sets up our custom test harness using the custom fixtures.
+// See https://playwright.dev/docs/test-fixtures#creating-a-fixture for details.
+// If a spec intends to use one of the custom fixtures, the special `test` function
+// exported from this file must be used instead of the default `test` function
+// provided by playwright.
+
+export interface CustomTestFixtures {
+  loginAsAdmin: Page;
+}
+
+export interface CustomWorkerFixtures {
+  api: APIRequestContext;
+}
+
+export const test = base.extend<CustomTestFixtures, CustomWorkerFixtures>({
+  api: [api, { scope: 'worker' }],
+});

package/e2e/fixtures/api.ts

@@ -0,0 +1,26 @@
+import { APIRequestContext, PlaywrightWorkerArgs, 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,
+    },
+  });
+
+  await use(ctx);
+};

package/e2e/fixtures/index.ts

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

package/e2e/pages/index.ts

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

package/e2e/pages/sample-test.ts

@@ -0,0 +1,9 @@
+import { Page } from '@playwright/test';
+
+export class FastDataEntryPage {
+  constructor(readonly page: Page) {}
+
+  async goto() {
+    await this.page.goto('forms');
+  }
+}

package/e2e/specs/sample-test.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+import { FastDataEntryPage } from '../pages';
+
+// This test is a sample E2E test. You can delete it.
+
+test('sample-test', async ({ page }) => {
+  const fastDataEntryPage = new FastDataEntryPage(page);
+  await fastDataEntryPage.goto();
+  await expect(page.getByText('Fast Data Entry')).toBeVisible();
+});

package/e2e/support/github/Dockerfile

@@ -0,0 +1,34 @@
+# syntax=docker/dockerfile:1.3
+FROM --platform=$BUILDPLATFORM node:18-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.
+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
+
+  # MariaDB
+  db:
+    image: openmrs/openmrs-reference-application-3-db:nightly-with-data

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

@@ -0,0 +1,37 @@
+#!/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")
+# get the app name
+app_name=$(jq -r '.name' "$script_dir/../../../package.json")
+
+echo "Creating packed archive of the app..."
+# @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 "Created packed app archives" 
+
+echo "Creating dynamic spa-assemble-config.json..."
+# dynamically assemble our list of frontend modules, prepending the login app and
+# primary navigation 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"} + {
+    ($app_name): $app_file
+  }' | jq '{"frontendModules": .}' > "$working_dir/spa-assemble-config.json"
+echo "Created dynamic spa-assemble-config.json"
+
+echo "Copying Docker configuration..."
+cp "$script_dir/Dockerfile" "$working_dir/Dockerfile"
+cp "$script_dir/docker-compose.yml" "$working_dir/docker-compose.yml"
+
+cd $working_dir
+echo "Starting Docker containers..."
+# 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/example.env

@@ -0,0 +1,6 @@
+# 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.json

@@ -1,22 +1,31 @@
 
 {
+  "clearMocks": true,
+  "collectCoverageFrom": [
+    "**/src/**/*.component.tsx",
+    "!**/node_modules/**",
+    "!**/src/declarations.d.ts",
+    "!**/e2e/**"
+  ],
   "transform": {
-    "^.+\\.tsx?$": "@swc/jest"
+    "^.+\\.tsx?$": ["@swc/jest"]
   },
   "transformIgnorePatterns": ["/node_modules/(?!@openmrs)"],
   "moduleNameMapper": {
-    "\\.(s?css)$": "identity-obj-proxy",
     "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
+    "\\.(s?css)$": "identity-obj-proxy",
     "^lodash-es/(.*)$": "lodash/$1",
-    "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
+    "^lodash-es$": "lodash",
     "^dexie$": "<rootDir>/node_modules/dexie",
-    "lodash-es": "lodash"
+    "^react-i18next$": "<rootDir>/__mocks__/react-i18next.js"
   },
-  "setupFilesAfterEnv": [
-    "<rootDir>/src/setup-tests.ts"
-  ],
+  "setupFilesAfterEnv": ["<rootDir>/src/setup-tests.ts"],
   "testEnvironment": "jsdom",
   "testEnvironmentOptions": {
     "url": "http://localhost/"
-  }
+  },
+  "testPathIgnorePatterns": [
+    "/node_modules/",
+    "/e2e/"
+  ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-fast-data-entry-app",
-  "version": "1.1.1-pre.208",
+  "version": "1.1.1-pre.216",
   "license": "MPL-2.0",
   "description": "O3 frontend module for fast data entry using the OpenMRS Angular Form Engine",
   "browser": "dist/openmrs-esm-fast-data-entry-app.js",
@@ -18,7 +18,8 @@
     "verify": "turbo lint typescript test",
     "coverage": "yarn test -- --coverage ",
     "postinstall": "husky install",
-    "extract-translations": "i18next 'src/**/*.tsx' --config ./tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.tsx' --config ./tools/i18next-parser.config.js",
+    "test-e2e": "playwright test"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -51,6 +52,7 @@
   "devDependencies": {
     "@carbon/react": "1.71.0",
     "@openmrs/esm-framework": "next",
+    "@playwright/test": "^1.49.1",
     "@swc-node/loader": "^1.3.7",
     "@swc/core": "^1.3.84",
     "@swc/jest": "^0.2.29",
@@ -93,8 +95,10 @@
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
+    "dotenv": "^16.4.7",
     "i18next": "^21.10.0",
     "i18next-parser": "^6.6.0",
+    "playwright": "^1.49.1",
     "react-hook-form": "^7.34.2",
     "turbo": "^2.3.3",
     "uuid": "^9.0.1"

package/playwright.config.ts

@@ -0,0 +1,32 @@
+import { devices, PlaywrightTestConfig } from '@playwright/test';
+import * as dotenv from 'dotenv';
+dotenv.config();
+
+// See https://playwright.dev/docs/test-configuration.
+const config: PlaywrightTestConfig = {
+  testDir: './e2e/specs',
+  timeout: 3 * 60 * 1000,
+  expect: {
+    timeout: 40 * 1000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  reporter: process.env.CI ? [['junit', { outputFile: 'results.xml' }], ['html']] : [['html']],
+  globalSetup: require.resolve('./e2e/core/global-setup'),
+  use: {
+    baseURL: `${process.env.E2E_BASE_URL}/spa/`,
+    storageState: 'e2e/storageState.json',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+};
+
+export default config;