66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
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", () => {
|
|
it("marks standard and large digit layouts and exposes a full-row erase key", () => {
|
|
const { container, rerender } = render(
|
|
<NumberPad
|
|
size={9}
|
|
mode="value"
|
|
onMode={vi.fn()}
|
|
onValue={vi.fn()}
|
|
onErase={vi.fn()}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByRole("group", { name: "Digits" })).toHaveClass(
|
|
"digit-pad",
|
|
);
|
|
expect(container.querySelector(".digit-pad")).not.toHaveClass(
|
|
"digit-pad--wide",
|
|
);
|
|
expect(screen.getByRole("button", { name: "Erase" })).toHaveClass(
|
|
"erase-key",
|
|
);
|
|
|
|
rerender(
|
|
<NumberPad
|
|
size={16}
|
|
mode="value"
|
|
onMode={vi.fn()}
|
|
onValue={vi.fn()}
|
|
onErase={vi.fn()}
|
|
/>,
|
|
);
|
|
expect(container.querySelector(".digit-pad")).toHaveClass(
|
|
"digit-pad--wide",
|
|
);
|
|
});
|
|
|
|
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);
|
|
});
|
|
});
|