sudoku-tools/tests/components/aidMemoireWorkbench.test.tsx

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

class WorkerStub {
  addEventListener() {}
  postMessage() {}
  terminate() {}
}

beforeAll(() => {
  vi.stubGlobal("Worker", WorkerStub);
});

function mainDigit(name: string) {
  return within(screen.getByRole("group", { name: "Digits" })).getByRole(
    "button",
    { name },
  );
}

describe("aid-mémoire Workbench integration", () => {
  it("routes the shared keypad, undo and redo to a selected scratch cell", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    const toggle = screen.getByLabelText("Show aid-mémoire scratch cells");
    await user.click(toggle);

    const grid = screen.getByRole("grid", {
      name: "9 aid-mémoire scratch cells",
    });
    await user.click(
      within(grid).getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label 1, empty",
      }),
    );
    await user.click(mainDigit("5"));
    expect(
      within(grid).getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label 1, value 5",
      }),
    ).toBeInTheDocument();

    await user.click(screen.getByRole("button", { name: "Undo" }));
    expect(
      within(grid).getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label 1, empty",
      }),
    ).toBeInTheDocument();
    await user.click(screen.getByRole("button", { name: "Redo" }));
    expect(
      within(grid).getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label 1, value 5",
      }),
    ).toBeInTheDocument();

    await user.click(toggle);
    expect(
      screen.queryByRole("grid", { name: "9 aid-mémoire scratch cells" }),
    ).not.toBeInTheDocument();
    await user.click(toggle);
    expect(
      screen.getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label 1, value 5",
      }),
    ).toBeInTheDocument();
  });

  it("restores scratch labels and entries from the local Library", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    await user.click(screen.getByLabelText("Show aid-mémoire scratch cells"));
    await user.clear(screen.getByLabelText("Selected cell label"));
    await user.type(screen.getByLabelText("Selected cell label"), "Pseudo A");
    await user.click(mainDigit("6"));

    await user.click(screen.getByRole("button", { name: "Library" }));
    await user.click(screen.getByRole("button", { name: "Save current" }));
    expect(
      await screen.findByText("Current puzzle and progress saved locally."),
    ).toBeInTheDocument();
    await user.click(screen.getByRole("button", { name: "Close" }));

    await user.click(mainDigit("7"));
    expect(
      screen.getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label Pseudo A, value 7",
      }),
    ).toBeInTheDocument();
    await user.click(screen.getByRole("button", { name: "Library" }));
    await user.click(
      await screen.findByRole("button", { name: /A first classic/u }),
    );

    expect(
      screen.getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label Pseudo A, value 6",
      }),
    ).toBeInTheDocument();
  });

  it("restores scratch state with a savepoint and reverses that restore", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    await user.click(screen.getByLabelText("Show aid-mémoire scratch cells"));
    await user.click(mainDigit("5"));

    await user.click(
      screen.getByRole("button", { name: "History & branches" }),
    );
    await user.type(screen.getByLabelText("Savepoint name"), "Scratch five");
    await user.click(screen.getByRole("button", { name: "Save current grid" }));
    await user.click(screen.getByRole("button", { name: "Close" }));

    await user.click(mainDigit("6"));
    expect(
      screen.getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label 1, value 6",
      }),
    ).toBeInTheDocument();
    await user.click(
      screen.getByRole("button", { name: "History & branches" }),
    );
    await user.click(screen.getByRole("button", { name: "Restore" }));
    expect(
      screen.getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label 1, value 5",
      }),
    ).toBeInTheDocument();

    await user.click(screen.getByRole("button", { name: "Undo" }));
    expect(
      screen.getByRole("gridcell", {
        name: "Aid-mémoire cell 1, label 1, value 6",
      }),
    ).toBeInTheDocument();
  });
});