fix: stabilize Sudoku workspace layout

2026-08-31 16:14:46 +02:00
parent 0a1bdc1a8c
commit ca7a6270d0
17 changed files with 194 additions and 32 deletions
@@ -3,7 +3,42 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { NumberPad } from "../../src/components/NumberPad";

-describe("NumberPad colour accessibility", () => {
+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();