31 lines
928 B
TypeScript
31 lines
928 B
TypeScript
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);
|
|
});
|
|
});
|