shoc-frontend-new/src/test/app/(protected)/workorders/carried-over-counter-pill.test.tsx

import { screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import {
  CarriedOverCounterPill,
  RescheduleCounterPill,
} from "@/app/(protected)/workorders/_components/list/table/cells/wo-counter-pills";
import { renderWithProviders } from "@/test/test-utils";

describe("CarriedOverCounterPill", () => {
  it("hides the pill when the count is below 2", () => {
    const { container } = renderWithProviders(<CarriedOverCounterPill count={1} />);
    expect(container).toBeEmptyDOMElement();
  });

  it("names the count so it is not a bare number", () => {
    renderWithProviders(<CarriedOverCounterPill count={3} />);
    const pill = screen.getByLabelText(/Carried over 3 times/i);
    expect(pill).toHaveTextContent("3");
  });

  it("includes the source week in the accessible name", () => {
    renderWithProviders(
      <CarriedOverCounterPill count={3} originalWeek="2026-05-04" status="Scheduled" />,
    );
    expect(screen.getByLabelText(/Source week: 5\/4–5\/8/i)).toBeInTheDocument();
  });

  it("hides after resolution even when the counter remains", () => {
    const { container } = renderWithProviders(
      <CarriedOverCounterPill count={3} originalWeek="2026-05-04" status="Completed" />,
    );
    expect(container).toBeEmptyDOMElement();
  });

  it("is distinguishable from the reschedule pill beside it", () => {
    renderWithProviders(
      <>
        <RescheduleCounterPill count={2} />
        <CarriedOverCounterPill count={2} />
      </>,
    );

    // Both render the same visible digit, so the accessible names are the only
    // thing telling a non-sighted user which counter is which.
    expect(screen.getByLabelText(/Rescheduled 2 times/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Carried over 2 times/i)).toBeInTheDocument();
  });
});