fix(kanban): honor theme and keyboard moves

2026-08-10 11:12:49 +02:00
parent 3a99531e46
commit fb6f17e1f3
7 changed files with 247 additions and 27 deletions
@@ -1,6 +1,8 @@
 import { expect, test, type Page } from "@playwright/test";
 import path from "node:path";

+const updateAuditEvidence = process.env.UPDATE_AUDIT_EVIDENCE === "1";
+
 async function login(page: Page) {
  await page.goto("/login");
  await page.getByLabel("Email").fill("e2e@example.test");
@@ -62,7 +64,7 @@ test("discovery remains usable across widths and opens the reviewed import", asy
  await expect(page.getByText("Work arrangement not provided by this source").first()).toBeVisible();
  await expect(page.getByText(/Application deadline:/)).toBeVisible();
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
-  await page.screenshot({ path: path.resolve("..", "docs", "audits", "evidence", "jobs-001-discovery-375-light.png"), fullPage: true });
+  if (updateAuditEvidence) await page.screenshot({ path: path.resolve("..", "docs", "audits", "evidence", "jobs-001-discovery-375-light.png"), fullPage: true });

  await page.getByLabel("Sort results").click();
  await page.getByRole("option", { name: "Title A–Z" }).click();
@@ -82,7 +84,7 @@ test("discovery remains usable across widths and opens the reviewed import", asy
  await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "dark");
  await page.getByRole("button", { name: "Search NAV" }).click();
  await expect(page.getByText("2 vacancies found")).toBeVisible();
-  await page.screenshot({ path: path.resolve("..", "docs", "audits", "evidence", "jobs-001-discovery-1440-dark.png"), fullPage: true });
+  if (updateAuditEvidence) await page.screenshot({ path: path.resolve("..", "docs", "audits", "evidence", "jobs-001-discovery-1440-dark.png"), fullPage: true });

  await page.getByRole("button", { name: "Save to tracker" }).first().click();
  await expect(page.getByRole("dialog")).toBeVisible();
@@ -0,0 +1,88 @@
+import { expect, test, type Page } from "@playwright/test";
+import path from "node:path";
+
+const updateAuditEvidence = process.env.UPDATE_AUDIT_EVIDENCE === "1";
+
+async function login(page: Page) {
+  await page.goto("/login");
+  await page.getByLabel("Email").fill("e2e@example.test");
+  await page.getByLabel("Current password").fill("E2ePassword123!");
+  await page.getByRole("button", { name: "Sign in", exact: true }).click();
+  await expect(page).toHaveURL(/\/dashboard$/);
+}
+
+test("kanban columns use dark theme surfaces", async ({ page }) => {
+  let moveRequests = 0;
+  await page.addInitScript(() => {
+    window.localStorage.setItem("uiLanguage", "en");
+    window.localStorage.setItem("themeMode:anon", "dark");
+  });
+  await page.route("**/api/jobapplications/board", async (route) => {
+    await route.fulfill({ json: [{
+      id: 71,
+      jobTitle: "Synthetic platform engineer",
+      companyId: 1,
+      company: { id: 1, name: "Synthetic AS" },
+      status: "Saved",
+      dateApplied: null,
+      savedAt: "2026-08-10T10:00:00Z",
+      daysSince: null,
+      tags: "[\"C#\",\"Azure\"]",
+    }, {
+      id: 72,
+      jobTitle: "Custom status role",
+      companyId: 1,
+      company: { id: 1, name: "Synthetic AS" },
+      status: "Take-home assignment",
+      dateApplied: "2026-08-09T10:00:00Z",
+      savedAt: "2026-08-09T10:00:00Z",
+      daysSince: 1,
+    }] });
+  });
+  await page.route("**/api/jobapplications/71/status", async (route) => { moveRequests += 1; await route.fulfill({ json: {} }); });
+
+  await login(page);
+  await page.goto("/kanban");
+  await expect(page.getByText("Synthetic platform engineer")).toBeVisible();
+  const column = page.getByText("Not Applied", { exact: true }).locator("xpath=ancestor::*[contains(@class,'MuiPaper-root')][1]");
+  expect(await column.evaluate((element) => getComputedStyle(element).backgroundColor)).not.toBe("rgb(245, 242, 250)");
+  if (updateAuditEvidence) await page.screenshot({ path: path.resolve("..", "docs", "audits", "evidence", "ux-003-kanban-dark-after.png"), fullPage: true });
+
+  const card = page.getByText("Synthetic platform engineer", { exact: true }).locator("xpath=ancestor::*[contains(@class,'MuiCard-root')][1]");
+  await card.focus();
+  await page.keyboard.press("Space");
+  await expect(card).toHaveAttribute("aria-pressed", "true");
+  const active = page.getByRole("group", { name: "Active column" });
+  await expect(active).toHaveAttribute("data-drop-state", "valid");
+  await expect(page.getByRole("group", { name: "Other column, not a drop target" })).toHaveAttribute("aria-disabled", "true");
+  await active.focus();
+  await page.keyboard.press("Enter");
+  await expect.poll(() => moveRequests).toBe(1);
+  await expect(page.getByText("Job moved to Applied.")).toBeAttached();
+
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur());
+  const overflow = await page.evaluate(() => ({
+    documentWidth: document.documentElement.scrollWidth,
+    viewportWidth: window.innerWidth,
+    offenders: Array.from(document.querySelectorAll("*")).map((element) => {
+      const rect = element.getBoundingClientRect();
+      return { tag: element.tagName, className: element.className?.toString().slice(0, 80), left: rect.left, right: rect.right, width: rect.width };
+    }).filter((element) => (element.right > window.innerWidth + 1 && element.right < window.innerWidth + 40) || element.left < -1).slice(0, 12),
+  }));
+  const pageScroll = await page.evaluate(() => {
+    document.documentElement.scrollLeft = 999;
+    const scrollLeft = document.documentElement.scrollLeft;
+    document.documentElement.scrollLeft = 0;
+    return scrollLeft;
+  });
+  expect(pageScroll, JSON.stringify(overflow)).toBe(0);
+  await page.evaluate(() => {
+    const userKey = window.localStorage.getItem("authUserKey") || "anon";
+    window.localStorage.setItem(`themeMode:${userKey}`, "light");
+  });
+  await page.reload();
+  await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "light");
+  const lightColumn = page.getByText("Not Applied", { exact: true }).locator("xpath=ancestor::*[contains(@class,'MuiPaper-root')][1]");
+  expect(await lightColumn.evaluate((element) => getComputedStyle(element).backgroundColor)).toBe("rgb(245, 242, 250)");
+});