import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import RequiredStepsCard from "./required-steps-card";

vi.mock("@/translations/provider", () => ({
  useI18n: () => ({
    dictionary: new Proxy({}, { get: (_target, key) => String(key) }),
  }),
}));

describe("RequiredStepsCard", () => {
  it("renders a real empty 0/9 state without a shimmer", () => {
    const { container } = render(<RequiredStepsCard completed={0} total={9} />);

    expect(screen.getByText("0/9")).toBeDefined();
    expect(container.querySelector(".shimmer-white-bg")).toBeNull();
    const circles = container.querySelectorAll("svg")[1].querySelectorAll("circle");
    expect(circles[1].getAttribute("stroke-dashoffset")).toBe(
      String(2 * Math.PI * 25),
    );
  });

  it("renders required section completion independently from optional assessments", () => {
    const { container } = render(<RequiredStepsCard completed={4} total={9} />);

    expect(screen.getByText("4/9")).toBeDefined();
    const circles = container.querySelectorAll("svg")[1].querySelectorAll("circle");
    const offset = Number(circles[1].getAttribute("stroke-dashoffset"));
    expect(offset).toBeCloseTo(2 * Math.PI * 25 * (5 / 9));
  });
});