Publish curated Knowledge Hub source from 2ed833f290b439a7bc91e5fd19b042c269e3bee9

tests/e2e/specs/platform-productization.spec.ts

@@ -0,0 +1,119 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+import { authenticatedStatePath } from "../global-setup";
+import { expectAuthenticatedShell } from "./support/v2";
+
+test.describe("platform workflows at supported widths", () => {
+  test.use({ storageState: authenticatedStatePath });
+
+  for (const width of [320, 360, 390, 768, 1280]) {
+    test(`search and administration reflow without page overflow at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 850 });
+      for (const [path, heading] of [
+        ["/search?q=knowledge", "Zoeken"],
+        ["/admin/jobs", "Achtergrondtaken"],
+        ["/admin/audit", "Beheeraudit"],
+        ["/admin/platform", "Platforminstellingen"]
+      ] as const) {
+        await page.goto(path);
+        await expect(page.getByRole("heading", { name: heading, level: 1 })).toBeVisible();
+        await expectAuthenticatedShell(page);
+        const overflow = await page.evaluate(
+          () => document.documentElement.scrollWidth - document.documentElement.clientWidth
+        );
+        expect(overflow, `${path} overflowed at ${width}px`).toBeLessThanOrEqual(1);
+      }
+    });
+  }
+
+  test("keyboard search and admin navigation remain accessible", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await page.goto("/search?q=knowledge");
+    await expect(page.getByRole("heading", { name: "Zoeken", level: 1 })).toBeVisible();
+    expect((await new AxeBuilder({ page }).analyze()).violations).toEqual([]);
+
+    await page.getByRole("button", { name: "Opdrachten en zoeken openen" }).click();
+    await expect(page.getByRole("dialog")).toBeVisible();
+    await page.keyboard.press("Tab");
+    expect(await page.evaluate(() => {
+      const dialog = document.querySelector("[role=dialog]");
+      return dialog?.contains(document.activeElement) ?? false;
+    })).toBeTruthy();
+    const reducedDuration = await page.getByRole("dialog").evaluate(
+      (dialog) => parseFloat(getComputedStyle(dialog).transitionDuration)
+    );
+    expect(reducedDuration).toBeLessThanOrEqual(0.01);
+    await page.keyboard.press("Escape");
+    await expect(page.getByRole("dialog")).toBeHidden();
+
+    await page.goto("/admin/jobs");
+    await expect(page.getByRole("heading", { name: "Achtergrondtaken", level: 1 })).toBeVisible();
+    expect((await new AxeBuilder({ page }).analyze()).violations).toEqual([]);
+  });
+
+  test("narrow mobile controls stay touchable with a short virtual-keyboard viewport", async ({ page }) => {
+    await page.setViewportSize({ width: 320, height: 430 });
+    await page.goto("/admin/jobs");
+    await expect(page.getByRole("heading", { name: "Achtergrondtaken", level: 1 })).toBeVisible();
+    for (const name of ["Navigatie openen", "Opdrachten en zoeken openen", "Accountmenu"]) {
+      const box = await page.getByRole("button", { name }).boundingBox();
+      // Browser layout rounds CSS's 44px touch target to fractional device pixels.
+      expect(box?.width ?? 0, `${name} width`).toBeGreaterThanOrEqual(43.9);
+      expect(box?.height ?? 0, `${name} height`).toBeGreaterThanOrEqual(43.9);
+    }
+    await page.getByRole("button", { name: "Navigatie openen" }).click();
+    await expect(page.getByRole("navigation", { name: "Hoofdnavigatie" })).toBeVisible();
+    expect((await new AxeBuilder({ page }).analyze()).violations).toEqual([]);
+  });
+
+  test("server preferences survive a reload and can be restored", async ({ page }) => {
+    await page.goto("/settings");
+    await expect(page.getByRole("heading", { name: "Instellingen", level: 1 })).toBeVisible();
+    await expect(page.locator(".preference-sync-status")).toContainText("Voorkeuren gesynchroniseerd.");
+    await page.getByRole("button", { name: "Donker" }).click();
+    await expect.poll(async () => {
+      const response = await page.request.get("/api/v1/me/preferences");
+      return (await response.json() as { theme: string }).theme;
+    }).toBe("dark");
+    await page.reload();
+    await expect(page.getByRole("button", { name: "Donker" })).toHaveClass(/selected/);
+    await page.getByRole("button", { name: "Systeem" }).click();
+    await expect.poll(async () => {
+      const response = await page.request.get("/api/v1/me/preferences");
+      return (await response.json() as { theme: string }).theme;
+    }).toBe("system");
+  });
+
+  test("administrator can register an external source and record an observation", async ({ page }) => {
+    const sourceKey = `e2e-source-${crypto.randomUUID()}`;
+    const displayName = `E2E bron ${sourceKey.slice(-8)}`;
+    await page.goto("/admin/integrations");
+    await expect(page.getByRole("heading", { name: "Externe gegevensbronnen", level: 1 })).toBeVisible();
+    await page.getByRole("button", { name: "Bron toevoegen" }).click();
+    await page.getByRole("textbox", { name: "Unieke broncode" }).fill(sourceKey);
+    await page.getByRole("textbox", { name: "Weergavenaam" }).fill(displayName);
+    await page.getByRole("button", { name: "Bron registreren" }).click();
+    await expect(page.locator(".form-success")).toContainText("Externe gegevensbron geregistreerd.");
+    const row = page.locator(".data-source-row", { hasText: sourceKey });
+    await expect(row).toBeVisible();
+    await row.getByText("Operatorwaarneming registreren").click();
+    await row.getByRole("spinbutton", { name: "Waargenomen recordaantal" }).fill("42");
+    await row.getByRole("button", { name: "Waarneming opslaan" }).click();
+    await expect(page.locator(".form-success")).toContainText(`Operatorwaarneming voor ${displayName} geregistreerd.`);
+    await page.reload();
+    await expect(page.locator(".data-source-row", { hasText: sourceKey })).toContainText("42 records");
+  });
+
+  test("administrator sees durable backup job progress after queuing", async ({ page }) => {
+    await page.goto("/admin/jobs");
+    await expect(page.getByRole("heading", { name: "Achtergrondtaken", level: 1 })).toBeVisible();
+    await page.getByRole("button", { name: "Back-uptaak inplannen" }).click();
+    await expect(page.locator(".form-success")).toContainText("Back-uptaak is ingepland.");
+    await expect(page).toHaveURL(/jobId=/);
+    await expect(page.getByRole("heading", { name: /Back-up · / })).toBeVisible();
+    await expect(page.locator(".admin-job-detail").getByRole("progressbar", { name: /Back-up/ })).toBeVisible();
+    await page.reload();
+    await expect(page.getByRole("heading", { name: "Back-up · Geslaagd" })).toBeVisible({ timeout: 20_000 });
+  });
+});