shoc-frontend-new/src/test/app/(protected)/workorders/week-day-nav.test.tsx

import { act, render, renderHook, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
import { describe, expect, it, vi } from "vitest";
import { DayTabs } from "@/app/(protected)/workorders/_components/list/filter-bar/day-tabs";
import { WeekSelector } from "@/app/(protected)/workorders/_components/list/filter-bar/week-selector";
import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
import { firstWeekday } from "@/domain/work-orders/utils/week-day-nav-utils";

vi.mock("@/domain/work-orders/utils/wizard-date-utils", async (importOriginal) => {
  const actual =
    await importOriginal<typeof import("@/domain/work-orders/utils/wizard-date-utils")>();
  return {
    ...actual,
    todayIso: () => "2026-08-19",
  };
});

function WeekDayNavHarness() {
  const [weekMonday, setWeekMonday] = useState("2026-05-18");
  const [selectedDayIso, setSelectedDayIso] = useState("2026-05-20");

  const handleWeekChange = (mondayIso: string) => {
    setWeekMonday(mondayIso);
    setSelectedDayIso(firstWeekday(mondayIso));
  };

  return (
    <div>
      <WeekSelector weekMonday={weekMonday} onChange={handleWeekChange} />
      <DayTabs
        weekMonday={weekMonday}
        selectedDayIso={selectedDayIso}
        onChange={setSelectedDayIso}
      />
    </div>
  );
}

describe("WeekSelector and DayTabs (SH-240)", () => {
  it("renders Mon–Fri tabs for the active week", () => {
    render(
      <DayTabs weekMonday="2026-05-18" selectedDayIso="2026-05-18" onChange={() => undefined} />,
    );

    expect(screen.getByRole("tab", { name: "Mon · 05/18" })).toHaveAttribute(
      "aria-selected",
      "true",
    );
    expect(screen.getByRole("tab", { name: "Tue · 05/19" })).toBeInTheDocument();
    expect(screen.getByRole("tab", { name: "Wed · 05/20" })).toBeInTheDocument();
    expect(screen.getByRole("tab", { name: "Thu · 05/21" })).toBeInTheDocument();
    expect(screen.getByRole("tab", { name: "Fri · 05/22" })).toBeInTheDocument();
  });

  it("selects a day tab without expanding other days", async () => {
    const user = userEvent.setup();
    render(<WeekDayNavHarness />);

    await user.click(screen.getByRole("tab", { name: "Thu · 05/21" }));
    expect(screen.getByRole("tab", { name: "Thu · 05/21" })).toHaveAttribute(
      "aria-selected",
      "true",
    );
    expect(screen.getByRole("tab", { name: "Wed · 05/20" })).toHaveAttribute(
      "aria-selected",
      "false",
    );
  });

  it("resets to Monday when the week picker selects another week", async () => {
    const user = userEvent.setup();
    render(<WeekDayNavHarness />);

    await user.click(screen.getByRole("button", { name: "Week 5/18–5/22" }));
    await user.click(screen.getByRole("button", { name: /May 11/i }));

    expect(screen.getByRole("button", { name: "Week 5/11–5/15" })).toBeInTheDocument();
    expect(screen.getByRole("tab", { name: "Mon · 05/11" })).toHaveAttribute(
      "aria-selected",
      "true",
    );
    expect(screen.getByRole("tab", { name: "Fri · 05/15" })).toBeInTheDocument();
    expect(screen.queryByRole("tab", { name: "Mon · 05/18" })).not.toBeInTheDocument();
  });
});

describe("useWorkOrdersListFilters day state (SH-240)", () => {
  it("starts on today in the live week and resets to Monday on week change", () => {
    const { result } = renderHook(() => useWorkOrdersListFilters());

    expect(result.current.weekMonday).toBe("2026-08-17");
    expect(result.current.selectedDayIso).toBe("2026-08-19");

    act(() => {
      result.current.setWeekMonday("2026-08-10");
    });

    expect(result.current.weekMonday).toBe("2026-08-10");
    expect(result.current.selectedDayIso).toBe("2026-08-10");
  });
});