92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { BoardViewport } from "../../src/components/BoardViewport";
|
|
import { BOARD_SCALE_STORAGE_KEY } from "../../src/state/uiPreferences";
|
|
|
|
describe("BoardViewport", () => {
|
|
beforeEach(() => localStorage.clear());
|
|
|
|
it("zooms, fits and restores the persisted scale", async () => {
|
|
const user = userEvent.setup();
|
|
const { container, unmount } = render(
|
|
<BoardViewport>
|
|
<div>Board</div>
|
|
</BoardViewport>,
|
|
);
|
|
|
|
expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("100%");
|
|
expect(container.querySelector(".board-viewport")).not.toHaveClass(
|
|
"is-zoomed-in",
|
|
);
|
|
await user.click(screen.getByRole("button", { name: "Zoom board out" }));
|
|
expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("75%");
|
|
expect(container.querySelector(".board-viewport__canvas")).toHaveStyle({
|
|
width: "75%",
|
|
maxWidth: "36rem",
|
|
});
|
|
expect(container.querySelector(".board-viewport")).not.toHaveClass(
|
|
"is-zoomed-in",
|
|
);
|
|
await user.click(screen.getByRole("button", { name: "Zoom board in" }));
|
|
await user.click(screen.getByRole("button", { name: "Zoom board in" }));
|
|
expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("125%");
|
|
expect(container.querySelector(".board-viewport")).toHaveClass(
|
|
"is-zoomed-in",
|
|
);
|
|
expect(localStorage.getItem(BOARD_SCALE_STORAGE_KEY)).toBe("1.25");
|
|
unmount();
|
|
|
|
const restored = render(
|
|
<BoardViewport>
|
|
<div>Board</div>
|
|
</BoardViewport>,
|
|
);
|
|
expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("125%");
|
|
await user.click(screen.getByRole("button", { name: "Fit board" }));
|
|
expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("100%");
|
|
expect(restored.container.querySelector(".board-viewport")).not.toHaveClass(
|
|
"is-zoomed-in",
|
|
);
|
|
});
|
|
|
|
it("offers explicit pan mode and board-scoped zoom shortcuts", async () => {
|
|
const user = userEvent.setup();
|
|
const onCellKeyDown = vi.fn();
|
|
render(
|
|
<BoardViewport>
|
|
<button type="button" onKeyDown={onCellKeyDown}>
|
|
Cell
|
|
</button>
|
|
</BoardViewport>,
|
|
);
|
|
|
|
const pan = screen.getByRole("button", { name: "Pan board" });
|
|
expect(pan).toHaveAttribute("aria-pressed", "false");
|
|
await user.click(pan);
|
|
expect(
|
|
screen.getByRole("button", { name: "Stop panning" }),
|
|
).toHaveAttribute("aria-pressed", "true");
|
|
expect(
|
|
screen.getByRole("status", {
|
|
name: "",
|
|
}),
|
|
).toHaveTextContent(
|
|
"Pan mode: drag the board to move it. Cell taps are paused.",
|
|
);
|
|
expect(screen.getByLabelText(/pan mode is on/iu)).toBeInTheDocument();
|
|
|
|
fireEvent.keyDown(screen.getByRole("button", { name: "Cell" }), {
|
|
key: "+",
|
|
ctrlKey: true,
|
|
});
|
|
expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("125%");
|
|
fireEvent.keyDown(screen.getByRole("button", { name: "Cell" }), {
|
|
key: "0",
|
|
ctrlKey: true,
|
|
});
|
|
expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("100%");
|
|
expect(onCellKeyDown).not.toHaveBeenCalled();
|
|
});
|
|
});
|