Initial curated itworx-knowledge-hub source from 3b1751d0d9dee551aa6994eee0093704dc334817

tests/e2e/specs/ingestion-review.spec.ts

@@ -0,0 +1,67 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test, type Page } from "@playwright/test";
+import { authenticatedStatePath } from "../global-setup";
+
+test.use({ storageState: authenticatedStatePath });
+
+async function createProposal(page: Page): Promise<string> {
+  return page.evaluate(async () => {
+    const csrfResponse = await fetch("/api/v1/auth/csrf");
+    const csrf = await csrfResponse.json() as { token: string; headerName: string };
+    const response = await fetch("/api/v1/ingestion-proposals", {
+      method: "POST",
+      headers: { "content-type": "application/json", [csrf.headerName]: csrf.token, "Idempotency-Key": crypto.randomUUID() },
+      body: JSON.stringify({ manifest: "# E2E mobiele beoordeling", correlationId: `e2e-review-${crypto.randomUUID()}` }),
+    });
+    if (!response.ok) throw new Error(`Voorstel maken mislukte (${response.status}): ${await response.text()}`);
+    return (await response.json() as { id: string }).id;
+  });
+}
+
+test.describe("intakebeoordeling: responsieve, toegankelijke werkruimte", () => {
+  test("houdt reviewpanelen en voortgang toegankelijk op desktop, tablet en mobiel", async ({ page, browserName }, testInfo) => {
+    test.skip(browserName !== "chromium", "Deze bounded responsive matrix gebruikt Chromium.");
+    const isMobileProject = testInfo.project.name === "chromium-mobile";
+    await page.setViewportSize(isMobileProject ? { width: 390, height: 844 } : { width: 1440, height: 1000 });
+    await page.goto("/");
+    const proposalId = await createProposal(page);
+    await page.goto(`/knowledge/intake/${proposalId}`);
+    await expect(page.getByRole("heading", { name: "Voorstel beoordelen" })).toBeVisible();
+    await expect(page.locator('[data-testid="ingestion-progress"]')).toBeVisible();
+    await expect(page.locator(".proposal-sources-panel")).toBeVisible();
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+
+    if (!isMobileProject) {
+      await expect(page.getByRole("region", { name: "Analyse en onderbouwing" })).toBeVisible();
+      await expect(page.locator('[data-mobile-step="decision"]')).toBeVisible();
+
+      await page.setViewportSize({ width: 1024, height: 900 });
+      await expect(page.locator(".mobile-review-navigator")).toBeVisible();
+      await expect(page.locator(".proposal-sources-panel")).toBeVisible();
+      await expect(page.getByRole("region", { name: "Analyse en onderbouwing" })).toBeVisible();
+      await expect(page.locator('[data-mobile-step="decision"]')).toBeVisible();
+      expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+
+      await page.setViewportSize({ width: 390, height: 844 });
+    }
+
+    await expect(page.locator(".mobile-review-navigator")).toBeVisible();
+    await expect(page.locator('[data-mobile-step="evidence"]')).toBeHidden();
+    await expect(page.locator('[data-mobile-step="decision"]')).toBeHidden();
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+    await page.getByRole("button", { name: "Volgende stap" }).focus();
+    await page.keyboard.press("Enter");
+    await expect(page.locator('[data-testid="ingestion-progress"]')).toHaveText("Stap 2 van 3: Onderbouwing");
+    await expect(page.locator('[data-mobile-step="sources"]')).toBeHidden();
+    await expect(page.getByRole("region", { name: "Analyse en onderbouwing" })).toBeVisible();
+    await expect(page.getByText("Waarschuwingen en conflicten")).toBeVisible();
+    await page.getByRole("button", { name: "Volgende stap" }).click();
+    await expect(page.locator('[data-mobile-step="decision"]')).toBeVisible();
+    await expect(page.getByRole("button", { name: "Goedkeuren" })).toBeVisible();
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+
+    const axe = new AxeBuilder({ page });
+    await expect(page.locator('[data-testid="ingestion-progress"]')).toBeVisible();
+    expect((await axe.analyze()).violations).toEqual([]);
+  });
+});