Merge branch 'main' into refactor-css

.gitignore

@@ -156,3 +156,6 @@ lefthook-local.yml
 /blob-report/
 /playwright/.cache/
 /test-results/
+
+# Playwright snapshot testing
+*-snapshots/

packages/dito/package.json

@@ -16,6 +16,8 @@
     "test": "vitest",
     "test:e2e": "playwright test tests/e2e --config=tests/playwright.config.ts",
     "test:a11y": "playwright test tests/a11y --config=tests/playwright.config.ts",
+    "test:snapshots": "playwright test tests/snapshots --config=tests/playwright-snapshots.config.ts",
+    "test:update-snapshots": "playwright test tests/snapshots --config=tests/playwright-snapshots.config.ts --update-snapshots",
     "tests": "vitest run && npm run test:e2e && npm run test:a11y",
     "test:generate-coverage": "jest --coverage",
     "typecheck": "tsc"

packages/dito/tests/e2e/general.spec.ts

@@ -4,33 +4,25 @@ import { preCheck } from "resources/content";
 import * as staticRoutes from "resources/staticRoutes";
 
 test.describe("test general availability", () => {
-  test.afterEach(async ({ context }) => {
-    for (const page of context.pages()) {
-      await page.close();
-    }
-    await context.close();
-  });
-
   test("landing page to not have breadcrumbs", async ({ page }) => {
     await page.goto(allRoutes[0].url);
     await expect(page.getByTestId("breadcrumbs-menu")).not.toBeVisible();
   });
 
-  test("all routes are reachable and have a breadcrumb menu + title if they aren't landing page or a PDF", async ({
-    page,
-  }) => {
-    test.setTimeout(90000);
-    // Remove first page from allRoutes array
-    for (const route of allRoutes.slice(1)) {
-      if (route.url.endsWith(".pdf")) {
-        continue;
-      }
+  // Remove landing page
+  allRoutes.slice(1).forEach((route) => {
+    if (route.url.endsWith(".pdf")) {
+      return;
+    }
+    test(`${route.url} is reachable and has a breadcrumb menu + title`, async ({
+      page,
+    }) => {
       await page.goto(route.url, { waitUntil: "networkidle" });
       await expect(page.getByTestId("breadcrumbs-menu")).toBeVisible();
       await expect(page).toHaveTitle(
         /Digitalcheck: Digitaltaugliche Regelungen erarbeiten$/,
       );
-    }
+    });
   });
 });
 

packages/dito/tests/playwright-snapshots.config.ts

@@ -0,0 +1,54 @@
+import { devices, PlaywrightTestConfig } from "@playwright/test";
+import dotenv from "dotenv";
+import path from "path";
+import { fileURLToPath } from "url";
+import baseConfig from "../../../playwright.config-base";
+
+// Get the directory name of the current module
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+dotenv.config({ path: path.resolve(__dirname, "../", ".env.test") });
+
+const desktopViewport = { width: 1200, height: 4800 };
+
+const config: PlaywrightTestConfig = {
+  ...baseConfig,
+  projects: [
+    {
+      name: "Desktop Chrome",
+      use: {
+        ...devices["Desktop Chrome"],
+        channel: "chrome",
+        viewport: desktopViewport,
+      },
+    },
+    {
+      name: "Desktop Firefox",
+      use: { ...devices["Desktop Firefox"], viewport: desktopViewport },
+    },
+    {
+      name: "Desktop Safari",
+      use: { ...devices["Desktop Safari"], viewport: desktopViewport },
+    },
+    {
+      name: "Mobile Chrome",
+      use: {
+        ...devices["Pixel 7"],
+        viewport: { ...devices["Pixel 7"].viewport, height: 3200 },
+      },
+    },
+    {
+      name: "Mobile Safari",
+      use: {
+        ...devices["iPhone 14 Pro"],
+        viewport: { ...devices["iPhone 14 Pro"].viewport, height: 3200 },
+      },
+    },
+  ],
+  webServer: {
+    command: "npm run dev -- --port 5172",
+    port: 5172,
+    timeout: parseInt(process.env.WAIT_ON_TIMEOUT ?? `${5 * 1000}`),
+  },
+};
+
+export default config;

packages/dito/tests/snapshots/general.spec.ts

@@ -0,0 +1,34 @@
+import { expect, test } from "@playwright/test";
+
+import allRoutes from "resources/allRoutes";
+
+async function wait(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+test.describe("compare snapshots", () => {
+  allRoutes
+    .filter((allRoute) => !allRoute.url.endsWith(".pdf"))
+    .forEach((route) => {
+      test(route.title, async ({ page }) => {
+        // Listen for redirects and update URL if needed
+        const response = await page.goto(route.url);
+
+        if (
+          (response !== null && response.status() === 302) ||
+          (response !== null && response.status() === 301)
+        ) {
+          const redirectedUrl = response.headers()["location"];
+          await page.goto(redirectedUrl);
+        }
+
+        // wait to finish rendering
+        await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
+
+        // wait to make sure the page is fully rendered
+        await wait(100);
+
+        await expect(page).toHaveScreenshot();
+      });
+    });
+});