Boban/2602 e2e tests

.github/workflows/container-ecr-viewer.yaml

@@ -50,52 +50,43 @@ jobs:
       - name: Run tests
         working-directory: ./containers/${{env.CONTAINER}} # Navigate to your Node.js app directory
         run: npm test
-  cypress-e2e-tests:
-    if: false
+  e2e-test:
     runs-on: ubuntu-latest
-    timeout-minutes: 20
+    timeout-minutes: 45
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: ${{env.NODE_VERSION}}
+
       - name: Install dependencies
         working-directory: ./containers/${{env.CONTAINER}} # Navigate to your Node.js app directory
-        run: npm install
+        run: npm ci
 
-      - name: Start ${{env.CONTAINER}}
-        working-directory: ./containers/${{env.CONTAINER}}/cypress
-        run: docker compose --env-file ../.env.test up -d
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
 
-      - name: Run cypress tests
+      - name: Set up env vars
+        run: npm run setup-local-env
         working-directory: ./containers/${{env.CONTAINER}}
-        run: npm run cypress:run
 
-      - name: Archive cypress failures
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: cypress-results
-          path: |
-            containers/ecr-viewer/cypress/screenshots/*
-            containers/ecr-viewer/cypress/videos/*
-
-      - name: Get docker logs
-        if: always()
-        working-directory: ./containers/${{env.CONTAINER}}/cypress
-        shell: bash
-        run: |
-          echo "Saving $container logs"
-          docker compose logs --timestamps >& cypress-run.log
+      - name: Run seed data conversion
+        run: npm run convert-seed-data:build
+        working-directory: ./containers/${{env.CONTAINER}}
+
+      - name: Run Playwright tests
+        working-directory: ./containers/${{env.CONTAINER}}
+        run: npx @dotenvx/dotenvx run -f .env.local -- sh -c 'docker compose -f ./e2e/docker-compose.yml --profile ${SOURCE} --profile ${METADATA_DATABASE_TYPE} --profile ecr-viewer up'
 
-      - name: Archive docker logs
-        if: always()
-        uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
         with:
-          name: logs
-          path: ./containers/${{env.CONTAINER}}/cypress/cypress-run.log
+          name: playwright-report
+          path: containers/${{env.CONTAINER}}/playwright-report/
+          retention-days: 30
 
   lighthouse:
     runs-on: ubuntu-latest

containers/ecr-viewer/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+Dockerfile
+.dockerignore
+e2e
+.next

containers/ecr-viewer/.gitignore

@@ -9,4 +9,8 @@ seed-scripts/baseECR/KY
 seed-scripts/baseECR/ME
 
 cypress/screenshots
-cypress/videos
+cypress/videos
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

containers/ecr-viewer/e2e/docker-compose.yml

@@ -0,0 +1,17 @@
+name: ecr-viewer
+
+include:
+  - ../docker-compose.yml
+
+services:
+  playwright:
+    image: mcr.microsoft.com/playwright:v1.49.0-noble
+    working_dir: /work/
+    command:
+      - /bin/sh
+      - -c
+      - |
+        npm i
+        npm run test:e2e
+    volumes:
+      - ../:/work/

containers/ecr-viewer/e2e/ecrLibrary.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from "@playwright/test";
+
+// http://host.docker.internal:3000/
+// const E2E_URL = "http://localhost:3000/ecr-viewer";
+const E2E_URL = "http://ecr-viewer:3000/ecr-viewer";
+
+test("eCRs per page should persist on reload ", async ({ page }) => {
+  await page.goto(E2E_URL);
+  await page.getByTestId("Select").selectOption("75");
+  await page.reload();
+  await expect(page.getByTestId("Select")).toContainText("75");
+});
+
+test("eCR search filters results", async ({ page }) => {
+  await page.goto(E2E_URL);
+  await page.getByTestId("textInput").click();
+  await page.getByTestId("textInput").fill("test");
+  await page.getByTestId("form").getByTestId("button").click();
+  await expect(
+    page.getByRole("cell", { name: "Adam Test DOB: 01/01/" }).first(),
+  ).toBeVisible();
+});

containers/ecr-viewer/e2e/ecrViewer.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from "@playwright/test";
+
+// host.docker.internal
+// const E2E_URL = "http://localhost:3000/ecr-viewer";
+const E2E_URL = "http://ecr-viewer:3000/ecr-viewer";
+
+test("eCR Viewer matches snapshot", async ({ page }) => {
+  await page.goto(
+    `${E2E_URL}/view-data?id=1.2.840.114350.1.13.297.3.7.8.688883.573942`,
+  );
+  await page.getByText("Patient Name").first().waitFor();
+  await expect(page).toHaveScreenshot({ fullPage: true });
+});
+
+test("eCR Viewer matches snapshot fully expanded", async ({ page }) => {
+  await page.goto(
+    `${E2E_URL}/view-data?id=1.2.840.114350.1.13.297.3.7.8.688883.573942`,
+  );
+  await page.getByTestId("accordionButton_Giardiasis").click();
+  await page.getByTestId("accordionButton_Cryptosporidiosis").click();
+  await page.getByTestId("accordionButton_Amebiasis").click();
+  await page.getByRole("button", { name: "Expand all labs" }).click();
+  await expect(page).toHaveScreenshot({ fullPage: true });
+});

containers/ecr-viewer/jest.config.js

@@ -8,6 +8,7 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  testPathIgnorePatterns: ["/e2e/"],
   testEnvironment: "jest-environment-jsdom",
 };
 

containers/ecr-viewer/package.json

@@ -13,6 +13,9 @@
     "lint": "next lint",
     "test": "TZ=America/New_York jest",
     "test:watch": "TZ=America/New_York jest --watch",
+    "test:e2e": "playwright test",
+    "test:e2e:record": "playwright codegen localhost:3000/ecr-viewer",
+    "test:e2e:update-snapshots": "playwright test --update-snapshots",
     "clear-local": "docker compose -f ./docker-compose.yml --profile \"*\" down -v",
     "convert-seed-data": "npx @dotenvx/dotenvx run -f .env.local -- sh -c 'docker compose -f ./seed-scripts/docker-compose-seed.yml --profile ${SOURCE} --profile ${METADATA_DATABASE_TYPE} --profile ecr-viewer up --abort-on-container-exit'",
     "convert-seed-data:build": "npx @dotenvx/dotenvx run -f .env.local -- sh -c 'docker compose -f ./seed-scripts/docker-compose-seed.yml --profile ${SOURCE} --profile ${METADATA_DATABASE_TYPE} --profile ecr-viewer up --abort-on-container-exit --build'",
@@ -67,6 +70,7 @@
   "devDependencies": {
     "@dotenvx/dotenvx": "^1.22.0",
     "@next/eslint-plugin-next": "^14.2.5",
+    "@playwright/test": "^1.49.0",
     "@smithy/util-stream": "^2.1.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^15.0.7",

containers/ecr-viewer/playwright.config.ts

@@ -0,0 +1,84 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+// http://host.docker.internal:3000/
+// const E2E_URL = "http://localhost:3000/ecr-viewer";
+const E2E_URL = "http://ecr-viewer:3000/ecr-viewer";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run build && npm run start",
+    url: E2E_URL,
+    reuseExistingServer: true,
+    timeout: 120000,
+  },
+});

containers/ecr-viewer/src/app/Header.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 
 /**
@@ -13,9 +14,7 @@ const Header: React.FC = () => (
       <div className="usa-navbar">
         <div className="usa-logo">
           <h1>
-            <a href="/" title="<Project title>">
-              DIBBs eCR Viewer
-            </a>
+            <Link href="/">DIBBs eCR Viewer</Link>
           </h1>
         </div>
       </div>