import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { DigitCompletionBar } from "../../src/components/DigitCompletionBar";
import { digitCompletions } from "../../src/state/gameplayHelpers";

describe("digit completion bar", () => {
  it("renders complete digits muted and excess digits as overdone", () => {
    const values = new Array<number>(81).fill(0);
    values.fill(1, 0, 9);
    values.fill(2, 9, 19);

    render(
      <DigitCompletionBar
        size={9}
        completions={digitCompletions(9, values)}
        highlightedDigit={null}
        highlightingEnabled
        onHighlight={vi.fn()}
      />,
    );

    expect(
      screen.getByRole("button", { name: /Digit 1: complete/u }),
    ).toHaveClass("is-done");
    expect(
      screen.getByRole("button", { name: /Digit 2: overdone by 1/u }),
    ).toHaveClass("is-overdone");
    expect(
      screen.getByRole("button", { name: /Digit 3: 9 remaining/u }),
    ).toHaveClass("is-undone");
  });
});