shoc-frontend-new/src/test/app/(protected)/workorders/wo-table-column-order.test.tsx

import { screen, within } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { WO_TABLE_COLS } from "@/app/(protected)/workorders/_components/list/table/wo-table-cols";
import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head";
import { WoTableRowServiceCells } from "@/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells";
import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
import { renderWithProviders } from "@/test/test-utils";

vi.mock("@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell", () => ({
  PMTypeCell: () => <span>cell:service</span>,
}));
vi.mock("@/app/(protected)/workorders/_components/list/table/cells/vendor-cell", () => ({
  VendorCell: () => <span>cell:vendor</span>,
}));
vi.mock("@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell", () => ({
  ApptTimeCell: () => <span>cell:appt</span>,
}));
vi.mock("@/app/(protected)/workorders/_components/list/table/cells/status-cell", () => ({
  StatusCell: () => <span>cell:status</span>,
}));
vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
  DateCell: () => <span>cell:completed</span>,
}));
vi.mock("@/app/(protected)/workorders/_components/list/table/cells/comp-doc-cell", () => ({
  CompDocCell: () => <span>cell:doc</span>,
}));
vi.mock("@/app/(protected)/workorders/_components/list/table/cells/uplift-cell", () => ({
  UpliftCell: () => <span>cell:uplift</span>,
}));

/** SH-359: documented left-to-right data column order for the Work Orders board. */
const DOCUMENTED_ORDER = [
  "SITE",
  "WO",
  "TYPE OF WO",
  "ASSIGNED TO",
  "SCHEDULE ON",
  "DUE DATE",
  "SERVICE",
  "VENDOR",
  "APPT TIME",
  "STATUS",
  "COMPLETED DATE",
  "COMP DOC",
  "UPLIFT",
];

describe("Work Orders board column order (SH-359)", () => {
  it("renders the documented header order with grip/flag before Site and actions after Uplift", () => {
    renderWithProviders(
      <table>
        <WoTableHead />
      </table>,
      { withAuth: false },
    );

    const headers = screen.getAllByRole("columnheader").map((th) => th.textContent?.trim() ?? "");
    expect(headers.filter(Boolean)).toEqual(expect.arrayContaining(DOCUMENTED_ORDER));
    expect(WO_TABLE_COLS.map((col) => col.key)).toEqual([
      "grip",
      "flag",
      "site",
      "wo",
      "type",
      "assigned",
      "sched",
      "due",
      "pm",
      "vendor",
      "appt",
      "status",
      "completed",
      "doc",
      "uplift",
      "actions",
    ]);
    expect(WO_TABLE_COLS.map((col) => col.label).filter(Boolean)).toEqual(DOCUMENTED_ORDER);
  });

  it("renders row cells under the matching headers: Status, Completed Date, Comp Doc, Uplift", () => {
    const row = {
      id: 7,
      upliftSummary: { hasUplift: false, pendingCount: 0 },
    } as WorkOrderTableRow;
    renderWithProviders(
      <table>
        <tbody>
          <tr data-testid="row">
            <WoTableRowServiceCells
              row={row}
              vendors={[]}
              pmTypes={[]}
              handlers={{} as unknown as WoTableRowHandlers}
              onPatchRow={vi.fn()}
            />
          </tr>
        </tbody>
      </table>,
      { withAuth: false },
    );

    const cells = within(screen.getByTestId("row"))
      .getAllByRole("cell")
      .map((td) => td.textContent);
    expect(cells).toEqual([
      "cell:service",
      "cell:vendor",
      "cell:appt",
      "cell:status",
      "cell:completed",
      "cell:doc",
      "cell:uplift",
    ]);
  });
});