import { expect, test, type Page, type Route } from "@playwright/test"; const FROZEN_NOW = "2026-08-19T15:00:00.000Z"; const TEST_USER = { token: "wo-day-pagination-e2e-token", expiration: "2030-01-01T00:00:00.000Z", email: "admin@seahavenind.com", userRoles: "Admin", phoneNumber: "5551234567", fullname: "Work Order E2E Admin", id: "1", }; async function fulfillJson(route: Route, body: unknown, status = 200) { await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) }); } function boardRow(id: number, woNumber: string, scheduledDate: string) { return { id, woNumber, workOrderType: 2, siteCode: woNumber, lifecycleStatusLabel: "Scheduled", scheduledDate, dispatcherId: "1", dispatcherName: "Pat Dispatcher", pm: "HVAC", }; } async function hideQueryDevtools(page: Page) { await page.addStyleTag({ content: ".tsqd-parent-container { display: none !important; pointer-events: none !important; }", }); await page.locator(".tsqd-parent-container").evaluateAll((nodes) => { for (const node of nodes) { node.remove(); } }); } async function mockWorkOrderBoard(page: Page) { const wednesday = Array.from({ length: 60 }, (_, index) => boardRow(1000 + index, `WO-${1000 + index}`, "2026-08-19"), ); const monday = Array.from({ length: 5 }, (_, index) => boardRow(2000 + index, `MON-${2000 + index}`, "2026-08-17"), ); await page.route( (url) => url.pathname.startsWith("/api/"), async (route) => { const url = route.request().url(); if (url.includes("workorders/board/search")) { const page = Number(new URL(url).searchParams.get("page") ?? "0"); const pageSize = Number(new URL(url).searchParams.get("pageSize") ?? "50"); const items = wednesday.slice(page * pageSize, page * pageSize + pageSize); await fulfillJson(route, { items, totalCount: 1778, page, pageSize, }); return; } if (url.includes("workorders/board") && route.request().method() === "GET") { const weekStart = new URL(url).searchParams.get("weekStart") ?? "2026-08-17"; const scheduled = weekStart === "2026-08-17" ? [...wednesday, ...monday] : monday.slice(0, 1); await fulfillJson(route, { weekStart, weekEnd: weekStart === "2026-08-17" ? "2026-08-21" : "2026-08-14", counts: { returned: scheduled.length, total: scheduled.length }, unscheduled: [], scheduled, }); return; } await fulfillJson(route, { data: [], items: [] }); }, ); } test.describe("work order per-day pagination (SH-241)", () => { test.setTimeout(60_000); test.beforeEach(async ({ page }) => { await page.clock.install({ time: new Date(FROZEN_NOW) }); await page.clock.resume(); await page.addInitScript((user) => { localStorage.setItem("auth", JSON.stringify(user)); const style = document.createElement("style"); style.textContent = ".tsqd-parent-container { display: none !important; }"; document.documentElement.appendChild(style); }, TEST_USER); await mockWorkOrderBoard(page); }); test("changes rows-per-page, keeps search pager on advanced filters, and resets on day or week change", async ({ page, }) => { const pager = page.getByTestId("wo-day-pagination"); await page.goto("/workorders"); await hideQueryDevtools(page); await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({ timeout: 20_000, }); await expect(pager).toBeVisible(); await expect(pager.getByText("Page 1 of 2")).toBeVisible(); await expect(page.getByTestId("wo-day-pagination-next")).toBeEnabled(); await expect(page.getByText("WO-1000").first()).toBeVisible(); await expect(page.getByText("WO-1050")).toHaveCount(0); await pager.getByLabel("Rows per page").selectOption("25"); await expect(pager.getByText("Page 1 of 3")).toBeVisible(); await expect(page.getByTestId("wo-day-pagination-next")).toBeEnabled(); await expect(page.getByText("WO-1025")).toHaveCount(0); await hideQueryDevtools(page); await page.getByTestId("wo-day-pagination-next").click(); await expect(pager.getByText("Page 2 of 3")).toBeVisible(); await expect(page.getByText("WO-1025").first()).toBeVisible(); await expect(page.getByText("WO-1000")).toHaveCount(0); await page.getByRole("tab", { name: "Mon · 08/17" }).click({ force: true }); await expect(pager.getByText("Page 1 of 1")).toBeVisible(); await expect(page.getByText("MON-2000").first()).toBeVisible(); await page.getByRole("button", { name: "Week 8/17–8/21" }).click({ force: true }); await page.getByRole("button", { name: /Aug 10/ }).click({ force: true }); await expect(page.getByTestId("wo-day-pagination")).toBeVisible(); await expect(page.getByTestId("wo-day-pagination").getByText("Page 1 of")).toBeVisible(); await page.getByRole("button", { name: "Advanced Filters" }).click(); await page.getByRole("button", { name: /Indicators/i }).click(); await page.getByRole("button", { name: "Rescheduled ≥ 2" }).click(); await page.getByRole("button", { name: "Apply filters" }).click(); await expect(pager).toBeVisible(); await expect(pager.getByText("RESULTS · 1778 items")).toBeVisible(); await expect(pager.getByText("Page 1 of 36")).toBeVisible(); await page.getByRole("button", { name: "Clear all" }).click(); await expect(page.getByTestId("wo-day-pagination")).toBeVisible(); }); });