PacketStation/frontend/src/screens/clerical/ClericalHome.test.tsx

import { fireEvent, screen, waitFor, within } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { DEPARTMENTS, makeMe, renderApp } from "../../test/auth";
import { callsTo, mockFetch } from "../../test/fetchMock";
import { makeCard, makeProject, makeUnit } from "../../test/packets";

const CARDS = [
  makeCard({ id: 1, flag: "Made by hand - check it and send it on" }),
  makeCard({ id: 2, unit: { id: 12, number: "L999002" }, op: "FIT-UP" }),
  makeCard({ id: 3, status: "warehouse", holder: "Warehouse" }),
  makeCard({ id: 4, status: "in_progress" }),
  makeCard({ id: 5, status: "complete", routed_to: "databook", unit: { id: 13, number: "L999003" } }),
  makeCard({ id: 6, status: "complete", routed_to: "databook", vclosed: { at: "2026-10-15T10:00:00Z", by: null }, unit: { id: 14, number: "L999004" } }),
  makeCard({ id: 7, status: "filed", unit: { id: 15, number: "L999005" } }),
];

function base() {
  return {
    "/api/auth/me": { body: makeMe() },
    "/api/departments": { body: DEPARTMENTS },
    "/api/packets": { body: { packets: CARDS } },
    "/api/projects": { body: [makeProject()] },
  };
}

function column(title: string): HTMLElement {
  return screen.getByRole("heading", { name: new RegExp(`^${title}`) }).closest("section") as HTMLElement;
}

describe("ClericalHome", () => {
  it("renders the boards and the numbers from the list answer", async () => {
    mockFetch(base());
    renderApp("/clerical");
    expect(await screen.findByRole("heading", { name: "Clerical" })).toBeInTheDocument();
    await screen.findByRole("heading", { name: /^Flagged/ });

    expect(screen.getByLabelText("Flagged: 1")).toHaveClass("kpi", "hot");
    expect(screen.getByLabelText("With warehouse: 1")).toBeInTheDocument();
    expect(screen.getByLabelText("In the shop: 1")).toBeInTheDocument();
    expect(screen.getByLabelText("Ready to close: 1")).toHaveClass("hot");
    expect(screen.getByLabelText("Changes to approve: 0")).toHaveClass("zero");

    expect(within(column("Changes to approve")).getByText("Arrives in phase 3 with the VISUAL feed.")).toBeInTheDocument();
    const flagged = column("Flagged");
    expect(within(flagged).getByText("L999001 · WELD-PART")).toBeInTheDocument();
    expect(within(flagged).getByText(/Made by hand/)).toBeInTheDocument();
    expect(within(column("Going to the warehouse")).getByText("L999002 · FIT-UP")).toBeInTheDocument();
    expect(within(column("Ready to close")).getByText("L999003 · WELD-PART")).toBeInTheDocument();
    expect(within(column("Ready for data book")).getByText("L999004 · WELD-PART")).toBeInTheDocument();
    const filed = column("Filed");
    expect(within(filed).getByText("L999005 · WELD-PART")).toBeInTheDocument();
    expect(within(filed).getByText("Filed in data book")).toHaveClass("pill", "st-filed");

    // The list view holds the same packets.
    fireEvent.click(screen.getByRole("button", { name: "List" }));
    const table = await screen.findByRole("table");
    expect(within(table).getAllByRole("row")).toHaveLength(1 + 5);
  });

  it("the picker loads the units after a project is chosen", async () => {
    const fetch = mockFetch({
      ...base(),
      "/api/units": { body: [makeUnit(), makeUnit({ id: 12, number: "L999002", lot: "002" })] },
    });
    renderApp("/clerical");
    const bar = await screen.findByRole("region", { name: "Find jobs" });
    expect(callsTo(fetch, "GET", "/api/units")).toHaveLength(0);
    fireEvent.click(await within(bar).findByRole("button", { name: /L999/ }));

    const unit = await within(bar).findByLabelText("Unit");
    await within(unit).findByRole("option", { name: "L999002" });
    const urls = fetch.mock.calls.map(([u]) => String(u));
    expect(urls).toContain("/api/units?project_id=7");
    // Choosing the project narrows the boards.
    await waitFor(() => expect(urls.concat(fetch.mock.calls.map(([u]) => String(u)))).toContain("/api/packets?limit=500&project_id=7"));

    fireEvent.change(unit, { target: { value: "12" } });
    await waitFor(() => expect(fetch.mock.calls.map(([u]) => String(u))).toContain("/api/packets?limit=500&unit_id=12"));
  });

  it("the new project sheet posts and then opens Add units", async () => {
    const fetch = mockFetch({
      ...base(),
      "POST /api/projects": { status: 201, body: makeProject({ id: 9, number: "L998", name: "New one", units: 0 }) },
      "POST /api/projects/9/units": { status: 201, body: [makeUnit({ id: 21, project_id: 9, number: "L998001" })] },
      "/api/projects/9": { body: makeProject({ id: 9, number: "L998", name: "New one", units: [makeUnit({ id: 21, project_id: 9, number: "L998001" })] }) },
    });
    renderApp("/clerical");
    fireEvent.click(await screen.findByRole("button", { name: "New project" }));
    const sheet = await screen.findByRole("dialog", { name: "New project" });
    fireEvent.change(within(sheet).getByLabelText("Project number"), { target: { value: "l998" } });
    fireEvent.change(within(sheet).getByLabelText("Project name"), { target: { value: "New one" } });
    fireEvent.click(within(sheet).getByRole("button", { name: "Create project" }));

    const add = await screen.findByRole("dialog", { name: "Add units" });
    expect(callsTo(fetch, "POST", "/api/projects")).toEqual([{ number: "L998", name: "New one", customer: "", po: "", due: null, notes: "" }]);
    expect(within(add).getByLabelText("Lot")).toHaveValue("001");

    // Several units: a preview of the numbers.
    fireEvent.click(within(add).getByRole("button", { name: "Several units" }));
    fireEvent.change(within(add).getByLabelText("How many"), { target: { value: "3" } });
    expect(within(add).getByText("Numbers: L998001, L998002, L998003")).toBeInTheDocument();
    fireEvent.click(within(add).getByRole("button", { name: "Add" }));

    expect(await screen.findByRole("heading", { name: "L998 · New one" })).toBeInTheDocument();
    expect(callsTo(fetch, "POST", "/api/projects/9/units")).toEqual([{ lots: ["001", "002", "003"], name: "", due: null, notes: "" }]);
  });
});