debug e2es (#6)

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

@@ -105,3 +105,8 @@ jobs:
       - name: Playwright Tests
         working-directory: ./containers/${{env.CONTAINER}}
         run: npx playwright test e2e --reporter=list --config playwright.config.ts
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: test-results
+          path: ./containers/${{env.CONTAINER}}/test-results/

containers/tefca-viewer/e2e/query_workflow.spec.ts

@@ -1,11 +1,12 @@
 // @ts-check
 
 import { test, expect } from "@playwright/test";
+import { TEST_URL } from "../playwright-setup";
 
 test.describe("querying with the TryTEFCA viewer", () => {
   test.beforeEach(async ({ page }) => {
     // Start every test on our main landing page
-    await page.goto("http://localhost:3000/tefca-viewer");
+    await page.goto(TEST_URL);
   });
 
   test("landing page loads", async ({ page }) => {
@@ -86,6 +87,7 @@ test.describe("querying with the TryTEFCA viewer", () => {
     await page.getByLabel("Medical Record Number").fill("18091");
     await page.getByLabel("Phone Number").fill("5555555555");
     await page.getByRole("button", { name: "Search for patient" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
 
     // Make sure we have a results page with a single patient
     // Non-interactive 'div' elements in the table should be located by text
@@ -136,6 +138,7 @@ test.describe("querying with the TryTEFCA viewer", () => {
 
     // Among verification, make sure phone number is right
     await page.getByRole("button", { name: "Search for patient" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
     await expect(
       page.getByRole("heading", { name: "Patient Record" }),
     ).toBeVisible();
@@ -167,8 +170,9 @@ test.describe("querying with the TryTEFCA viewer", () => {
     await page.getByRole("button", { name: "Go to the demo" }).click();
     await page.getByLabel("Query", { exact: true }).selectOption("chlamydia");
     await page.getByRole("button", { name: "Fill fields" }).click();
-    // await page.getByLabel("Phone Number").fill("");
     await page.getByRole("button", { name: "Search for patient" }).click();
+    await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
+
     await expect(
       page.getByRole("heading", { name: "Patient Record" }),
     ).toBeVisible();

containers/tefca-viewer/package.json

@@ -7,7 +7,7 @@
     "dev": "docker compose -f docker-compose-dev.yaml up -d && next dev",
     "dev-win": "start docker compose -f docker-compose-dev.yaml up && next dev",
     "dev:db": "docker compose -f docker-compose-dev.yaml up",
-    "dev:next": "dotenv -e ./tefca.env.local -e ./tefca.env -- next dev",
+    "dev:next": "dotenv -e ./.env -- next dev",
     "setup-local-env": "./setup-env.sh",
     "build": "next build && cp -r .next/static .next/standalone/.next && cp -r public .next/standalone/",
     "start": "NODE_TLS_REJECT_UNAUTHORIZED=0 node .next/standalone/server.js",
@@ -17,6 +17,7 @@
     "test:unit:watch": "jest --watch",
     "test:integration": "jest --testPathPattern=tests/integration",
     "test:playwright": "docker compose build --no-cache && docker compose up -d && npx playwright test --reporter=list",
+    "test:playwright:local": "dotenv -e ./.env -- npx playwright test --ui",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run"
   },

containers/tefca-viewer/playwright-setup.ts

@@ -1,35 +1,45 @@
+/**
+ *
+ */
+
+export const TEST_URL =
+  process.env.TEST_ENV ?? "http://localhost:3000/tefca-viewer";
+
 /**
  *
  */
 async function globalSetup() {
-  const url = "http://localhost:3000/tefca-viewer";
   const maxRetries = 300; // Maximum number of retries
   const delay = 1000; // Delay between retries in milliseconds
 
   for (let attempts = 0; attempts < maxRetries; attempts++) {
     try {
-      const response = await fetch(url); // Fetch the URL
+      const response = await fetch(TEST_URL); // Fetch the TEST_URL
       if (response.status === 200) {
-        console.log(`Connected to ${url} successfully.`);
+        console.log(`Connected to ${TEST_URL} successfully.`);
         return; // Exit the function if the webpage loads successfully
       } else {
         console.log(
-          `Failed to connect to ${url}, status: ${response.status}. Retrying...`,
+          `Failed to connect to ${TEST_URL}, status: ${response.status}. Retrying...`,
         );
         // Wait before the next attempt
         await new Promise((resolve) => setTimeout(resolve, delay));
       }
     } catch (error) {
       console.log(
-        `Fetch failed for ${url}: ${(error as Error).message}. Retrying...`,
+        `Fetch failed for ${TEST_URL}: ${
+          (error as Error).message
+        }. Retrying...`,
       );
       await new Promise((resolve) => setTimeout(resolve, delay));
     }
     // Wait before the next attempt
     await new Promise((resolve) => setTimeout(resolve, delay));
   }
 
-  throw new Error(`Unable to connect to ${url} after ${maxRetries} attempts.`);
+  throw new Error(
+    `Unable to connect to ${TEST_URL} after ${maxRetries} attempts.`,
+  );
 }
 
 export default globalSetup;

containers/tefca-viewer/playwright.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
+    video: "on-first-retry",
   },
 
   /* Configure projects for major browsers */