@ampath/esm-laboratory-app 1.3.0-next.2

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,
+    },
+  });
+
+  await use(ctx);
+};

package/e2e/fixtures/fhirApi.ts

@@ -0,0 +1,28 @@
+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 fhirApi: WorkerFixture<APIRequestContext, PlaywrightWorkerArgs> = async ({ playwright }, use) => {
+  const fhirctx = await playwright.request.newContext({
+    baseURL: `${process.env.E2E_BASE_URL}/ws/fhir2/R4/`,
+    httpCredentials: {
+      username: process.env.E2E_USER_ADMIN_USERNAME,
+      password: process.env.E2E_USER_ADMIN_PASSWORD,
+    },
+  });
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  await use(fhirctx);
+};

package/e2e/fixtures/index.ts

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

package/e2e/pages/index.ts

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

package/e2e/pages/laboratory-page.ts

@@ -0,0 +1,28 @@
+import { type Page } from '@playwright/test';
+
+export class LaboratoryPage {
+  constructor(readonly page: Page) {}
+
+  async goTo() {
+    await this.page.goto('/openmrs/spa/home/laboratory');
+  }
+
+  async navigateToTab(tabName: string) {
+    await this.page.getByRole('tab', { name: tabName }).click();
+  }
+
+  async expandPatientRow(patientName: string) {
+    await this.page
+      .getByRole('row', { name: new RegExp(`Expand current row ${patientName}`) })
+      .getByLabel('Expand current row')
+      .click();
+  }
+
+  async searchFor(text: string) {
+    await this.page.getByPlaceholder('Search this list').fill(text);
+  }
+
+  getPatientRow(patientName: string) {
+    return this.page.getByRole('row', { name: new RegExp(patientName) });
+  }
+}

package/e2e/specs/add-lab-results.spec.ts

@@ -0,0 +1,111 @@
+import { expect } from '@playwright/test';
+import { type Order, type Visit } from '@openmrs/esm-framework';
+import {
+  generateRandomTestOrder,
+  deleteTestOrder,
+  createEncounter,
+  deleteEncounter,
+  getProvider,
+  startVisit,
+  endVisit,
+} from '../commands';
+import { test } from '../core';
+import { type Encounter, type Provider } from '../commands/types';
+import { LaboratoryPage } from '../pages';
+
+let testOrder: Order;
+let encounter: Encounter;
+let orderer: Provider;
+let fullName: string;
+let visit: Visit;
+
+test.beforeEach(async ({ api, patient }) => {
+  orderer = await getProvider(api);
+  visit = await startVisit(api, patient.uuid);
+  encounter = await createEncounter(api, patient.uuid, orderer.uuid, visit);
+  testOrder = await generateRandomTestOrder(api, patient.uuid, encounter, orderer.uuid);
+  fullName = patient.person?.display;
+});
+
+test.describe('Laboratory order workflow', () => {
+  test('Add lab results via the lab app', async ({ page }) => {
+    const laboratoryPage = new LaboratoryPage(page);
+
+    await test.step('Given I navigate to the laboratory page', async () => {
+      await laboratoryPage.goTo();
+      await expect(page).toHaveURL(process.env.E2E_BASE_URL + `/spa/home/laboratory`);
+    });
+
+    await test.step('When I expand the patient row on the Tests ordered tab', async () => {
+      await expect(page.getByRole('tab', { name: 'Tests ordered' })).toBeVisible();
+      await laboratoryPage.expandPatientRow(fullName);
+    });
+
+    await test.step('Then I should see the order with status "not picked"', async () => {
+      await expect(page.getByText(/Status:Order not picked/i)).toBeVisible();
+      await expect(page.getByRole('cell', { name: 'serum glucose' })).toBeVisible();
+    });
+
+    await test.step('When I click Pick Lab Request and confirm', async () => {
+      await page.getByRole('button', { name: 'Pick Lab Request' }).first().click();
+      await page.getByRole('button', { name: 'Pick up lab request' }).click();
+    });
+
+    await test.step('Then I should see a success notification', async () => {
+      await expect(page.getByText(/You have successfully picked an order/i)).toBeVisible();
+    });
+
+    await test.step('When I navigate to the In progress tab', async () => {
+      await laboratoryPage.navigateToTab('In progress');
+    });
+
+    await test.step('And I expand the patient row', async () => {
+      await laboratoryPage.expandPatientRow(fullName);
+    });
+
+    await test.step('Then I should see the order with In progress status', async () => {
+      await expect(page.getByLabel('Structured list section').getByText('In progress')).toBeVisible();
+      await expect(page.getByRole('cell', { name: 'serum glucose' })).toBeVisible();
+    });
+
+    await test.step('When I click Add lab results and enter a value', async () => {
+      await page.getByRole('button', { name: 'Add lab results' }).click();
+      await page.getByRole('spinbutton', { name: 'serum glucose (>= 0' }).fill('35');
+    });
+
+    await test.step('And I save the results', async () => {
+      await page.getByRole('button', { name: 'Save and close' }).click();
+    });
+
+    await test.step('Then I should see a success notification', async () => {
+      await expect(page.getByText(/Lab results for .* have been successfully updated/i)).toBeVisible();
+    });
+
+    await test.step('When I navigate to the Completed tab', async () => {
+      await laboratoryPage.navigateToTab('Completed');
+    });
+
+    await test.step('And I expand the patient row', async () => {
+      await laboratoryPage.expandPatientRow(fullName);
+    });
+
+    await test.step('Then I should see the order with Completed status', async () => {
+      await expect(page.getByLabel('Structured list section').getByText('Completed')).toBeVisible();
+      await expect(
+        page.getByLabel('Structured list section').getByRole('cell', { name: 'serum glucose' }),
+      ).toBeVisible();
+    });
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  if (visit) {
+    await endVisit(api, visit);
+  }
+  if (encounter?.uuid) {
+    await deleteEncounter(api, encounter.uuid);
+  }
+  if (testOrder?.uuid) {
+    await deleteTestOrder(api, testOrder.uuid);
+  }
+});

package/e2e/specs/reject-lab-request.spec.ts

@@ -0,0 +1,88 @@
+import { expect } from '@playwright/test';
+import { type Order, type Visit } from '@openmrs/esm-framework';
+import {
+  generateRandomTestOrder,
+  deleteTestOrder,
+  createEncounter,
+  deleteEncounter,
+  getProvider,
+  startVisit,
+  endVisit,
+} from '../commands';
+import { test } from '../core';
+import { type Encounter, type Provider } from '../commands/types';
+import { LaboratoryPage } from '../pages';
+
+let testOrder: Order;
+let encounter: Encounter;
+let orderer: Provider;
+let fullName: string;
+let visit: Visit;
+
+test.beforeEach(async ({ api, patient }) => {
+  orderer = await getProvider(api);
+  visit = await startVisit(api, patient.uuid);
+  encounter = await createEncounter(api, patient.uuid, orderer.uuid, visit);
+  testOrder = await generateRandomTestOrder(api, patient.uuid, encounter, orderer.uuid);
+  fullName = patient.person?.display;
+});
+
+test('Reject a lab request', async ({ page }) => {
+  const laboratoryPage = new LaboratoryPage(page);
+
+  await test.step('Given I navigate to the laboratory page', async () => {
+    await laboratoryPage.goTo();
+    await expect(page.getByRole('tab', { name: 'Tests ordered' })).toBeVisible();
+  });
+
+  await test.step('When I expand the patient row', async () => {
+    await laboratoryPage.expandPatientRow(fullName);
+  });
+
+  await test.step('Then I should see the test order', async () => {
+    await expect(page.getByRole('cell', { name: 'serum glucose' })).toBeVisible();
+  });
+
+  await test.step('When I click the Reject Lab Request button', async () => {
+    await page.getByRole('button', { name: 'Reject Lab Request' }).first().click();
+  });
+
+  await test.step('Then I should see the rejection modal with the test type', async () => {
+    await expect(page.getByRole('heading', { name: /Reject lab request/ })).toBeVisible();
+    await expect(page.getByText(/Test type:/i)).toBeVisible();
+  });
+
+  await test.step('When I enter a rejection comment and confirm', async () => {
+    await page.getByRole('textbox', { name: 'Fulfiller comment' }).fill('Sample was contaminated');
+    await page.getByRole('button', { name: 'danger Reject', exact: true }).click();
+  });
+
+  await test.step('Then I should see a success notification', async () => {
+    await expect(page.getByText(/Lab request rejected/i)).toBeVisible();
+  });
+
+  await test.step('When I navigate to the Declined tests tab', async () => {
+    await laboratoryPage.navigateToTab('Declined tests');
+  });
+
+  await test.step('And I expand the patient row', async () => {
+    await laboratoryPage.expandPatientRow(fullName);
+  });
+
+  await test.step('Then I should see the order with Declined status', async () => {
+    await expect(page.getByRole('cell', { name: 'serum glucose' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Declined' })).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  if (visit) {
+    await endVisit(api, visit);
+  }
+  if (encounter?.uuid) {
+    await deleteEncounter(api, encounter.uuid);
+  }
+  if (testOrder?.uuid) {
+    await deleteTestOrder(api, testOrder.uuid);
+  }
+});

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

@@ -0,0 +1,69 @@
+import { expect } from '@playwright/test';
+import { type Order, type Visit } from '@openmrs/esm-framework';
+import {
+  generateRandomTestOrder,
+  deleteTestOrder,
+  createEncounter,
+  deleteEncounter,
+  getProvider,
+  startVisit,
+  endVisit,
+} from '../commands';
+import { test } from '../core';
+import { type Encounter, type Provider } from '../commands/types';
+import { LaboratoryPage } from '../pages';
+
+const url = process.env.E2E_BASE_URL;
+
+let testOrder: Order;
+let encounter: Encounter;
+let orderer: Provider;
+let fullName: string;
+let visit: Visit;
+
+test.beforeEach(async ({ api, patient }) => {
+  orderer = await getProvider(api);
+  visit = await startVisit(api, patient.uuid);
+  encounter = await createEncounter(api, patient.uuid, orderer.uuid, visit);
+  testOrder = await generateRandomTestOrder(api, patient.uuid, encounter, orderer.uuid);
+  fullName = patient.person?.display;
+});
+
+test('View test orders', async ({ page }) => {
+  const laboratoryPage = new LaboratoryPage(page);
+
+  await test.step('Given I navigate to the laboratory page', async () => {
+    await laboratoryPage.goTo();
+    await expect(page).toHaveURL(url + `/spa/home/laboratory`);
+  });
+
+  await test.step('Then I should see the Tests ordered tab', async () => {
+    await expect(page.getByRole('tab', { name: 'Tests ordered' })).toBeVisible();
+  });
+
+  await test.step('And I should see the patient in the orders list', async () => {
+    await expect(laboratoryPage.getPatientRow(fullName)).toBeVisible();
+  });
+
+  await test.step('When I expand the patient row', async () => {
+    await laboratoryPage.expandPatientRow(fullName);
+  });
+
+  await test.step('Then I should see the order status, test name, and urgency', async () => {
+    await expect(page.getByText(/Status:Order not picked/i)).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'serum glucose' })).toBeVisible();
+    await expect(page.getByText(/Routine/i)).toBeVisible();
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  if (visit) {
+    await endVisit(api, visit);
+  }
+  if (encounter?.uuid) {
+    await deleteEncounter(api, encounter.uuid);
+  }
+  if (testOrder?.uuid) {
+    await deleteTestOrder(api, testOrder.uuid);
+  }
+});

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. 
+# 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,58 @@
+#!/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 a list of all the apps in this workspace
+apps=$(yarn workspaces list --json | jq -r 'select(.name | test("-app")) | .name')
+# this array will hold all of the packed app names
+app_names=()
+
+echo "Creating packed archives of apps..."
+# for each app
+for app in $apps
+do
+  # @openmrs/esm-whatever -> _openmrs_esm_whatever
+  app_name=$(echo "$app" | tr '[:punct:]' '_');
+  # add to our array
+  app_names+=("$app_name.tgz");
+  # run yarn pack for our app and add it to the working directory
+  # yarn workspace "$app" pack -o "$working_dir/$app_name.tgz" >/dev/null;
+  yarn pack -o "$working_dir/$app_name.tgz" >/dev/null
+done;
+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 apps "$apps" \
+  --arg app_names "$(echo ${app_names[@]})" \
+  '{
+    "@openmrs/esm-primary-navigation-app": "next",
+    "@openmrs/esm-home-app": "next",
+    "@openmrs/esm-patient-chart-app": "next",
+    "@openmrs/esm-patient-banner-app": "next",
+    "@openmrs/esm-patient-orders-app": "next",
+    "@openmrs/esm-patient-tests-app": "next"
+  } + (
+    ($apps | split("\n")) as $apps | ($app_names | split(" ") | map("/app/" + .)) as $app_files
+    | [$apps, $app_files]
+    | transpose
+    | map({"key": .[0], "value": .[1]})
+    | from_entries
+  )' | 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,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,35 @@
+/** @type {import('jest').Config} */
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const path = require('path');
+
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleNameMapper: {
+    '^dexie$': require.resolve('dexie'),
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    '^lodash-es$': 'lodash',
+    '^@tools$': path.resolve(__dirname, 'tools'),
+    '^@tools/(.*)$': path.resolve(__dirname, 'tools', '$1'),
+    '^@mocks/(.*)$': path.resolve(__dirname, '__mocks__', '$1'),
+    '^uuid$': path.resolve(__dirname, 'node_modules', 'uuid', 'dist', 'index.js'),
+  },
+  collectCoverageFrom: [
+    '!**/node_modules/**',
+    '!**/e2e/**',
+  ],
+  testPathIgnorePatterns: [
+    "/node_modules/",
+      "/e2e/"  // Ignore the e2e directory containing Playwright tests
+    ],
+  setupFilesAfterEnv: ['<rootDir>/tools/setup-tests.ts'],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+};

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@ampath/esm-laboratory-app",
+  "version": "1.3.0-next.2",
+  "license": "MPL-2.0",
+  "description": "An O3 frontend module for managing laboratory requests and queues",
+  "browser": "dist/openmrs-esm-laboratory-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "prettier": "prettier --write \"src/**/*.{css,scss,ts,tsx}\" --list-different",
+    "typescript": "tsc",
+    "test": "jest --config jest.config.js --passWithNoTests --color",
+    "verify": "turbo lint typescript test --color",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ./tools/i18next-parser.config.js",
+    "coverage": "yarn test -- --coverage",
+    "postinstall": "husky install",
+    "test-e2e": "playwright test"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "microfrontends",
+    "laboratory"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-laboratory.git"
+  },
+  "homepage": "https://github.com/openmrs/openmrs-esm-laboratory#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-laboratory/issues"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
+    "*.{css,scss,ts,tsx}": "prettier --write --list-different"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.83.0",
+    "lodash-es": "^4.17.21",
+    "react-hook-form": "^7.52.1"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "9.x",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@playwright/test": "^1.52.0",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.62",
+    "@swc/jest": "^0.2.26",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/dotenv": "^8.2.3",
+    "@types/jest": "^28.1.8",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.0",
+    "@types/webpack-env": "^1.18.1",
+    "@typescript-eslint/eslint-plugin": "^8.45.0",
+    "@typescript-eslint/parser": "^8.45.0",
+    "css-loader": "^6.8.1",
+    "dayjs": "^1.11.11",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "file-saver": "^2.0.5",
+    "husky": "^8.0.0",
+    "i18next-parser": "^9.3.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.3",
+    "jest-cli": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "lint-staged": "^14.0.1",
+    "openmrs": "next",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "raw-loader": "^4.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^16.0.0",
+    "react-router-dom": "^6.11.2",
+    "swc-loader": "^0.2.3",
+    "turbo": "^2.5.2",
+    "typescript": "^5.0.0",
+    "webpack": "5.99.9",
+    "webpack-cli": "^6.0.1"
+  },
+  "packageManager": "yarn@4.10.3",
+  "stableVersion": "1.3.0"
+}

package/playwright.config.ts

@@ -0,0 +1,42 @@
+/* eslint-disable no-console */
+import { devices, type PlaywrightTestConfig } from '@playwright/test';
+import { config as dotenvConfig } from 'dotenv';
+import { resolve } from 'node:path';
+
+// Suppress dotenv promotional messages
+const originalLog = console.log;
+console.log = () => {};
+dotenvConfig({ path: resolve(process.cwd(), '.env') });
+dotenvConfig();
+console.log = originalLog;
+
+// 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',
+    trace: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chromium',
+      },
+    },
+  ],
+};
+
+export default config;