cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(jobs): redesign table and mobile cards with preserved workflows

Browse Source
This commit is contained in:
cesnimda
2026-09-28 23:30:43 +02:00
parent 0f54007015
commit 7127005e48
20 changed files with 192 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/e2e/table-density.spec.ts
+16 -5
View File
@@ -89,6 +89,7 @@ for (const mode of ["light", "dark"] as const) for (const language of ["en", "nb
await expect(page.locator("html")).toHaveAttribute("data-color-scheme", mode);
await expect(density).toHaveText(t.densityComfortable);
await expect(main.getByRole("columnheader", { name: t.jobTableRole, exact: true })).toHaveAttribute("aria-sort", "ascending");
await capture(page, info, `jobs-top-desktop-${suffix}`);
const rowText = await first.innerText();
const headers = await main.getByRole("columnheader").allTextContents();
const select = first.getByRole("checkbox");
@@ -131,6 +132,13 @@ for (const mode of ["light", "dark"] as const) for (const language of ["en", "nb
await expect(first.getByText("Avventer faglig vurdering", { exact: true })).toBeVisible();
if (width >= 768) { await expect(main.getByRole("table")).toBeVisible(); continue; }
await expect(main.getByRole("table")).toHaveCount(0);
if (width === 390 && value === "comfortable") {
await page.evaluate(() => window.scrollTo(0, 0));
await capture(page, info, `jobs-top-phone-${suffix}`);
await main.getByRole("button", { name: t.jobTableStatus, exact: true }).click();
await expect(page.getByRole("menuitem", { name: t.statusOffer, exact: true })).toBeVisible();
await page.keyboard.press("Escape");
}
// Geometric containment alone misses a title squeezed into one-letter lines.
expect((await first.getByText(/^Density 00/).boundingBox())!.width).toBeGreaterThanOrEqual(150);
const metrics = await first.evaluate(card => Array.from(card.querySelectorAll("button,a,.MuiCheckbox-root")).map(node => {
@@ -157,7 +165,7 @@ for (const mode of ["light", "dark"] as const) for (const language of ["en", "nb
await capture(page, info, `row-action-focus-${suffix}`);
await statusAction.press("Enter");
const changed = page.waitForResponse(r => r.url() === `${apiUrl}/jobapplications/${owner.ids[0]}/status` && r.request().method() === "PATCH");
await page.getByRole("menuitem", { name: t.jobTableSetStatus.replace("{status}", "Interview"), exact: true }).click();
await page.getByRole("menuitem", { name: t.jobTableSetStatus.replace("{status}", t.statusInterview), exact: true }).click();
expect((await changed).status()).toBe(204);
await expect(first.getByText(t.statusInterview, { exact: true })).toBeVisible();
expect(new URL(page.url()).pathname).toBe("/jobs");
@@ -170,17 +178,20 @@ for (const mode of ["light", "dark"] as const) for (const language of ["en", "nb
await expect(page).toHaveURL(new RegExp(`/jobs/${owner.ids[0]}$`));
await expect(page.getByRole("heading", { name: /^Density 00/ })).toBeVisible();
await page.goBack();
// The dedicated route unmounts the table. Browser Back preserves the query;
// density is deliberately local and returns to its default.
// Browser Back restores the originating row and query after the workspace unmounts.
expect(new URL(page.url()).search).toBe(query);
await expect(density).toHaveText(t.densityComfortable);
// P5-00-D02: browser Back does not restore row focus in the existing app.
// The explicit workspace Back action carries focusJobId; protect that path.
await expect(first).toBeFocused();
// The explicit workspace Back action retains the same focus contract.
await first.focus(); await first.press("Enter");
await expect(page.getByRole("heading", { name: /^Density 00/ })).toBeVisible();
await page.getByRole("button", { name: t.workspaceBack, exact: true }).click();
await expect(page).toHaveURL(url => url.pathname === "/jobs" && url.search === query);
await expect(first).toBeFocused();
await ordinary.focus(); await ordinary.press("Enter");
await expect(page).toHaveURL(new RegExp(`/jobs/${owner.ids[1]}$`));
await page.goBack();
await expect(ordinary).toBeFocused();
await main.getByRole("button", { name: t.tableNextPage }).click();
await expect(main.locator("[data-job-row-id]")).toHaveCount(3);