import "@testing-library/jest-dom/vitest";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { ProgressRing } from "@/components/ui/progress-ring";

describe("ProgressRing", () => {
  it("exposes accessible label with value fraction", () => {
    render(<ProgressRing value={78} max={100} label="Eligibility" />);
    expect(screen.getByRole("img", { name: "Eligibility: 78 of 100" })).toBeInTheDocument();
  });

  it("includes sublabel in screen reader text", () => {
    render(
      <ProgressRing
        value={18}
        max={48}
        label="SLA"
        sublabel="Hours remaining"
      />,
    );
    expect(screen.getByText(/SLA: 18 of 48/)).toHaveClass("sr-only");
    expect(screen.getByText("Hours remaining")).toBeInTheDocument();
  });

  it("renders visible value and max", () => {
    render(<ProgressRing value={78} max={100} label="Eligibility" />);
    const chart = screen.getByRole("img", { name: "Eligibility: 78 of 100" });
    expect(chart.parentElement?.parentElement).toHaveTextContent("78");
    expect(chart.parentElement?.parentElement).toHaveTextContent("/100");
  });

  it("clamps value to max", () => {
    render(<ProgressRing value={150} max={100} label="Score" />);
    expect(screen.getByRole("img", { name: "Score: 100 of 100" })).toBeInTheDocument();
  });

  it("supports circle variant aria label", () => {
    render(
      <ProgressRing
        value={50}
        max={100}
        label="Progress"
        variant="circle"
        size="sm"
      />,
    );
    expect(screen.getByRole("img", { name: "Progress: 50 of 100" })).toBeInTheDocument();
  });
});