brackt/app/components/__tests__/ParticipantSelectionDialog.test.tsx

import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { ParticipantSelectionDialog } from "~/components/draft/ParticipantSelectionDialog";

const defaultProps = {
  open: true,
  onOpenChange: vi.fn(),
  title: "Force pick",
  description: "Choose a participant",
  participants: [
    { id: "1", name: "Player A", sport: { id: "s1", name: "NFL" } },
    { id: "2", name: "Player B", sport: { id: "s2", name: "NBA" } },
  ],
  draftedParticipantIds: new Set<string>(),
  eligibility: null,
  uniqueSports: ["NFL", "NBA"],
  onSelect: vi.fn(),
};

describe("ParticipantSelectionDialog", () => {
  it("renders inline out-of-flex-spots reason and disables drafting", () => {
    render(
      <ParticipantSelectionDialog
        {...defaultProps}
        eligibility={{
          eligibleSportIds: new Set(["s2"]),
          ineligibleReasons: {
            s1: {
              code: "no_flex_spots",
              message: "Out of flex spots (2/2)",
            },
          },
        }}
      />
    );

    expect(screen.getByText("Out of flex spots (2/2)")).toBeInTheDocument();
    expect(screen.getAllByRole("button", { name: "Draft" })[0]).toBeDisabled();
  });

  it("renders inline no-extras reason for blocked flex picks", () => {
    render(
      <ParticipantSelectionDialog
        {...defaultProps}
        eligibility={{
          eligibleSportIds: new Set(["s2"]),
          ineligibleReasons: {
            s1: {
              code: "no_extra_participants",
              message: "Not enough NFL participants for remaining teams",
            },
          },
        }}
      />
    );

    expect(screen.getByText("Not enough NFL participants for remaining teams")).toBeInTheDocument();
  });
});