shoc-frontend-new/e2e/work-orders/week-day-navigation.spec.ts

import { expect, test, type Page, type Route } from "@playwright/test";

const FROZEN_NOW = "2026-08-19T15:00:00.000Z";

const TEST_USER = {
  token: "wo-week-day-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 | null) {
  return {
    id,
    woNumber,
    workOrderType: 2,
    siteCode: woNumber,
    lifecycleStatusLabel: "Scheduled",
    scheduledDate,
    dispatcherId: "1",
    dispatcherName: "Pat Dispatcher",
    pm: "HVAC",
  };
}

async function mockWorkOrderBoard(page: Page) {
  await page.route("**/api/**", (route) => {
    const pathname = new URL(route.request().url()).pathname;
    if (!pathname.startsWith("/api/")) {
      return route.fallback();
    }
    if (pathname.includes("/workorders/board")) {
      return route.fallback();
    }
    return fulfillJson(route, { data: [] });
  });
  await page.route("**/api/workorders/board*", (route) => {
    if (route.request().url().includes("board/search")) {
      return route.fallback();
    }
    const url = new URL(route.request().url());
    const weekStart = url.searchParams.get("weekStart") ?? "2026-08-17";
    const scheduled =
      weekStart === "2026-08-17"
        ? [boardRow(1, "MON-WO", "2026-08-17"), boardRow(2, "WED-WO", "2026-08-19")]
        : [boardRow(4, "PREV-MON-WO", "2026-08-10")];
    return fulfillJson(route, {
      weekStart,
      weekEnd: weekStart === "2026-08-17" ? "2026-08-21" : "2026-08-14",
      counts: { returned: scheduled.length + 1, total: scheduled.length + 1 },
      unscheduled: [boardRow(3, "UNSCHED-WO", null)],
      scheduled,
    });
  });
  await page.route("**/api/workorders/board/search*", (route) =>
    fulfillJson(route, { items: [], totalCount: 0, page: 0, pageSize: 50 }),
  );
}

test.describe("Work Orders week/day navigation (SH-240)", () => {
  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)),
      TEST_USER,
    );
    await mockWorkOrderBoard(page);
  });

  test("scopes the table to one day and excludes Unscheduled", async ({ page }) => {
    await page.goto("/workorders");
    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
      timeout: 15_000,
    });
    const dispatcher = page.getByRole("button", { name: "All dispatchers" });
    await expect(dispatcher).toBeVisible();
    await expect(
      page.getByLabel("Week and day").getByRole("button", { name: "All dispatchers" }),
    ).toHaveCount(0);
    const titleBox = await page.getByRole("heading", { name: "Work Orders" }).boundingBox();
    const dispatcherBox = await dispatcher.boundingBox();
    const weekBox = await page.getByRole("button", { name: "Week 8/17–8/21" }).boundingBox();
    expect(titleBox).toBeTruthy();
    expect(dispatcherBox).toBeTruthy();
    expect(weekBox).toBeTruthy();
    expect(dispatcherBox!.y).toBeGreaterThan(titleBox!.y);
    expect(weekBox!.y).toBeGreaterThan(dispatcherBox!.y);
    await expect(page.getByRole("button", { name: "Week 8/17–8/21" })).toBeVisible();
    await expect(page.getByRole("button", { name: "Week 8/17–8/21" })).toContainText("Live");

    await expect(page.getByRole("tab", { name: "Mon · 08/17" })).toBeVisible();
    await expect(page.getByRole("tab", { name: "Wed · 08/19" })).toHaveAttribute(
      "aria-selected",
      "true",
    );

    await expect(page.getByText("WED-WO").first()).toBeVisible();
    await expect(page.getByText("MON-WO")).toHaveCount(0);
    await expect(page.getByText("UNSCHED-WO")).toHaveCount(0);
    await expect(page.getByRole("button", { name: /Unscheduled/ })).toHaveCount(0);

    await page.getByRole("tab", { name: "Mon · 08/17" }).click();
    await expect(page.getByRole("tab", { name: "Mon · 08/17" })).toHaveAttribute(
      "aria-selected",
      "true",
    );
    await expect(page.getByText("MON-WO").first()).toBeVisible();
    await expect(page.getByText("WED-WO")).toHaveCount(0);
    await expect(page.getByText("UNSCHED-WO")).toHaveCount(0);
  });

  test("updates day tabs and selects Monday when the week changes", async ({ page }) => {
    await page.goto("/workorders");
    await expect(page.getByRole("tab", { name: "Wed · 08/19" })).toBeVisible({ timeout: 15_000 });

    await page.getByRole("button", { name: "Week 8/17–8/21" }).click();
    await page.getByRole("button", { name: /Aug 10/ }).click();

    await expect(page.getByRole("button", { name: "Week 8/10–8/14" })).toBeVisible();
    await expect(page.getByRole("tab", { name: "Mon · 08/10" })).toHaveAttribute(
      "aria-selected",
      "true",
    );
    await expect(page.getByRole("tab", { name: "Fri · 08/14" })).toBeVisible();
    await expect(page.getByRole("tab", { name: "Mon · 08/17" })).toHaveCount(0);
    await expect(page.getByText("PREV-MON-WO").first()).toBeVisible();
    await expect(page.getByText("UNSCHED-WO")).toHaveCount(0);
  });
});