import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { NumberPad } from "../../src/components/NumberPad";

describe("NumberPad colour accessibility", () => {
  it("names each colour by both hue and pattern", async () => {
    const user = userEvent.setup();
    const onValue = vi.fn();
    const { container } = render(
      <NumberPad
        size={9}
        mode="color"
        onMode={vi.fn()}
        onValue={onValue}
        onErase={vi.fn()}
      />,
    );

    const stripes = screen.getByRole("button", {
      name: "Colour 1: red, diagonal stripes",
    });
    expect(stripes).toHaveClass("color-1");
    expect(container.querySelector(".color-8")).toHaveAccessibleName(
      "Colour 8: pink, rings",
    );
    await user.click(stripes);
    expect(onValue).toHaveBeenCalledWith(1);
  });
});