diff --git a/docs/audits/evidence/ux-003-kanban-dark-after.png b/docs/audits/evidence/ux-003-kanban-dark-after.png index e303640..06a6767 100644 Binary files a/docs/audits/evidence/ux-003-kanban-dark-after.png and b/docs/audits/evidence/ux-003-kanban-dark-after.png differ diff --git a/job-tracker-ui/e2e/kanban-theme.spec.ts b/job-tracker-ui/e2e/kanban-theme.spec.ts index 8341b8a..ba40fd3 100644 --- a/job-tracker-ui/e2e/kanban-theme.spec.ts +++ b/job-tracker-ui/e2e/kanban-theme.spec.ts @@ -42,6 +42,7 @@ test("kanban columns use dark theme surfaces", async ({ page }) => { await page.route("**/api/jobapplications/71/status", async (route) => { moveRequests += 1; await route.fulfill({ json: {} }); }); await login(page); + await page.setViewportSize({ width: 1440, height: 900 }); 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]"); @@ -60,7 +61,7 @@ test("kanban columns use dark theme surfaces", async ({ page }) => { await expect.poll(() => moveRequests).toBe(1); await expect(page.getByText("Job moved to Applied.")).toBeAttached(); - await page.setViewportSize({ width: 375, height: 812 }); + await page.setViewportSize({ width: 768, height: 900 }); await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur()); const overflow = await page.evaluate(() => ({ documentWidth: document.documentElement.scrollWidth, @@ -85,4 +86,19 @@ test("kanban columns use dark theme surfaces", async ({ page }) => { 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)"); + await page.setViewportSize({ width: 1440, height: 900 }); + const lightCard = page.getByText("Synthetic platform engineer", { exact: true }).locator("xpath=ancestor::*[contains(@class,'MuiCard-root')][1]"); + await lightCard.hover(); + expect(await lightCard.evaluate((element) => getComputedStyle(element).transform)).not.toBe("none"); + await lightCard.dragTo(page.getByRole("group", { name: "Active column" })); + await expect.poll(() => moveRequests).toBe(2); + + await page.setViewportSize({ width: 375, height: 812 }); + const mobileScroll = await page.evaluate(() => { + document.documentElement.scrollLeft = 999; + const scrollLeft = document.documentElement.scrollLeft; + document.documentElement.scrollLeft = 0; + return scrollLeft; + }); + expect(mobileScroll).toBe(0); });