@bearmenu/ui 0.8.34 → 0.8.36

package/src/components/pan-zoom-viewport.test.tsx

@@ -0,0 +1,381 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  PanZoomViewport,
+  type PanZoomViewportHandle,
+  type PanZoomViewportProps,
+} from "./pan-zoom-viewport";
+
+/**
+ * jsdom lays nothing out, so each test states the viewport's size: the
+ * surface reports it as its client box. Its bounding rect stays at 0,0, so
+ * client coordinates in the pointer events are viewport coordinates.
+ */
+let viewportSize = { width: 800, height: 600 };
+
+function isSurface(element: HTMLElement) {
+  return element.getAttribute("data-slot") === "pan-zoom-viewport-surface";
+}
+
+beforeEach(() => {
+  viewportSize = { width: 800, height: 600 };
+  vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockImplementation(function (
+    this: HTMLElement
+  ) {
+    return isSurface(this) ? viewportSize.width : 0;
+  });
+  vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockImplementation(function (
+    this: HTMLElement
+  ) {
+    return isSurface(this) ? viewportSize.height : 0;
+  });
+});
+
+afterEach(() => vi.restoreAllMocks());
+
+const labels = {
+  viewport: "Floor plan, Inside",
+  instructions: "Arrow keys move the plan.",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit",
+  controls: "Zoom",
+  zoomLevel: (percent: number) => `${percent}%`,
+};
+
+function renderViewport(props: Partial<PanZoomViewportProps> = {}) {
+  return render(
+    <PanZoomViewport contentWidth={400} contentHeight={300} labels={labels} {...props}>
+      <button type="button">T1</button>
+    </PanZoomViewport>
+  );
+}
+
+const surface = () => screen.getByRole("group", { name: "Floor plan, Inside" });
+const content = () =>
+  document.querySelector<HTMLElement>('[data-slot="pan-zoom-viewport-content"]');
+
+/** The transform as numbers, rounded so float noise does not fail a test. */
+function transformOf() {
+  const match = /translate\((-?[\d.]+)px, (-?[\d.]+)px\) scale\(([\d.]+)\)/.exec(
+    content()?.style.transform ?? ""
+  );
+  if (!match) throw new Error(`no transform on the content: ${content()?.style.transform}`);
+  const [, x, y, scale] = match.map(Number);
+  const round = (value: number | undefined) => Math.round((value ?? NaN) * 1000) / 1000;
+  return { x: round(x), y: round(y), scale: round(scale) };
+}
+
+function edgeVisible(edge: "left" | "right" | "top" | "bottom") {
+  return (
+    document
+      .querySelector(`[data-slot="pan-zoom-viewport-edge"][data-edge="${edge}"]`)
+      ?.getAttribute("data-visible") === "true"
+  );
+}
+
+/** A phone-sized viewport onto a plan that would fit far below the floor. */
+function renderOnAPhone(props: Partial<PanZoomViewportProps> = {}) {
+  viewportSize = { width: 390, height: 500 };
+  return renderViewport({ contentWidth: 1200, contentHeight: 800, minScale: 0.5, ...props });
+}
+
+describe("PanZoomViewport", () => {
+  describe("fit", () => {
+    it("fits the content inside its padding and centres it", () => {
+      renderViewport();
+      // min((800 - 48) / 400, (600 - 48) / 300) = 1.84 → 736 × 552.
+      expect(transformOf()).toEqual({ x: 32, y: 24, scale: 1.84 });
+      expect(content()).not.toHaveClass("invisible");
+    });
+
+    it("stops at the floor, anchors top-left and shades the edge that runs on", () => {
+      renderOnAPhone();
+      // The fit would be 0.285; the floor holds it at 0.5 → 600 × 400.
+      // Too wide: anchored at the padding. Short enough: centred.
+      expect(transformOf()).toEqual({ x: 24, y: 50, scale: 0.5 });
+      expect(edgeVisible("right")).toBe(true);
+      expect(edgeVisible("left")).toBe(false);
+      expect(edgeVisible("top")).toBe(false);
+      expect(edgeVisible("bottom")).toBe(false);
+    });
+
+    it("never fits above the ceiling", () => {
+      renderViewport({ contentWidth: 100, contentHeight: 100, maxScale: 2 });
+      expect(transformOf().scale).toBe(2);
+    });
+  });
+
+  describe("controls", () => {
+    it("zooms in and out by one step about the centre", async () => {
+      renderViewport();
+      await userEvent.click(screen.getByRole("button", { name: "Zoom out" }));
+      // 1.84 / 1.25 = 1.472 → 588.8 × 441.6, centred.
+      expect(transformOf()).toEqual({ x: 105.6, y: 79.2, scale: 1.472 });
+      await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+      expect(transformOf().scale).toBe(1.84);
+    });
+
+    it("disables zoom out at the floor and zoom in at the ceiling", async () => {
+      renderOnAPhone({ maxScale: 0.625 });
+      expect(screen.getByRole("button", { name: "Zoom out" })).toBeDisabled();
+      await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+      expect(transformOf().scale).toBe(0.625);
+      expect(screen.getByRole("button", { name: "Zoom in" })).toBeDisabled();
+    });
+
+    it("returns to the fitted view", async () => {
+      renderViewport();
+      const fitted = transformOf();
+      await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+      expect(transformOf()).not.toEqual(fitted);
+      await userEvent.click(screen.getByRole("button", { name: "Fit" }));
+      expect(transformOf()).toEqual(fitted);
+    });
+
+    it("names the controls from the injected labels and can be left out", () => {
+      const view = renderViewport();
+      expect(screen.getByRole("group", { name: "Zoom" })).toBeInTheDocument();
+      view.unmount();
+      renderViewport({ controls: false });
+      expect(screen.queryByRole("button", { name: "Zoom in" })).toBeNull();
+    });
+
+    it("eases a zoom from the controls, and never under reduced motion", async () => {
+      renderViewport();
+      expect(content()?.className).not.toContain("transition-transform");
+      await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+      expect(content()).toHaveClass("transition-transform", "motion-reduce:transition-none");
+    });
+  });
+
+  describe("keyboard", () => {
+    it("pans with the arrows when the viewport has focus, four steps with Shift", async () => {
+      renderOnAPhone();
+      surface().focus();
+      await userEvent.keyboard("{ArrowRight}");
+      expect(transformOf().x).toBe(24 - 48);
+      await userEvent.keyboard("{Shift>}{ArrowRight}{/Shift}");
+      expect(transformOf().x).toBe(24 - 48 - 192);
+      // The far edge stops `fitPadding` inside the viewport: 390 − 600 − 24.
+      await userEvent.keyboard("{Shift>}{ArrowRight}{/Shift}");
+      expect(transformOf().x).toBe(-234);
+      await userEvent.keyboard("{ArrowLeft}");
+      expect(transformOf().x).toBe(-186);
+    });
+
+    it("does not pan content that already fits", async () => {
+      renderViewport();
+      surface().focus();
+      const before = transformOf();
+      await userEvent.keyboard("{ArrowRight}{ArrowDown}");
+      expect(transformOf()).toEqual(before);
+    });
+
+    it("zooms with + and -, and fits with 0", async () => {
+      renderViewport();
+      surface().focus();
+      await userEvent.keyboard("+");
+      expect(transformOf().scale).toBe(2.3);
+      await userEvent.keyboard("-");
+      expect(transformOf().scale).toBe(1.84);
+      await userEvent.keyboard("-");
+      await userEvent.keyboard("0");
+      expect(transformOf()).toEqual({ x: 32, y: 24, scale: 1.84 });
+    });
+
+    it("leaves the arrows to a focused child", async () => {
+      renderOnAPhone();
+      screen.getByRole("button", { name: "T1" }).focus();
+      const before = transformOf();
+      await userEvent.keyboard("{ArrowRight}");
+      expect(transformOf()).toEqual(before);
+    });
+
+    it("announces the zoom level through the injected formatter", async () => {
+      renderViewport();
+      surface().focus();
+      await userEvent.keyboard("+");
+      expect(screen.getByText("230%")).toBeInTheDocument();
+    });
+
+    it("is named and described by its labels", () => {
+      renderViewport();
+      expect(surface()).toHaveAccessibleName("Floor plan, Inside");
+      expect(surface()).toHaveAccessibleDescription("Arrow keys move the plan.");
+      expect(surface()).toHaveAttribute("tabindex", "0");
+    });
+  });
+
+  describe("pointer", () => {
+    function drag(target: Element, from: [number, number], to: [number, number], id = 1) {
+      fireEvent.pointerDown(target, {
+        pointerId: id,
+        pointerType: "mouse",
+        button: 0,
+        clientX: from[0],
+        clientY: from[1],
+      });
+      fireEvent.pointerMove(surface(), {
+        pointerId: id,
+        pointerType: "mouse",
+        clientX: to[0],
+        clientY: to[1],
+      });
+      fireEvent.pointerUp(surface(), {
+        pointerId: id,
+        pointerType: "mouse",
+        clientX: to[0],
+        clientY: to[1],
+      });
+    }
+
+    it("pans with a drag and swallows the click the drag would become", () => {
+      const onClick = vi.fn();
+      viewportSize = { width: 390, height: 500 };
+      render(
+        <PanZoomViewport contentWidth={1200} contentHeight={800} labels={labels}>
+          <button type="button" onClick={onClick}>
+            T1
+          </button>
+        </PanZoomViewport>
+      );
+      const table = screen.getByRole("button", { name: "T1" });
+      drag(table, [200, 200], [140, 200]);
+      fireEvent.click(table);
+      expect(transformOf().x).toBe(24 - 60);
+      expect(onClick).not.toHaveBeenCalled();
+      expect(edgeVisible("left")).toBe(true);
+    });
+
+    it("lets a tap through as a click", () => {
+      const onClick = vi.fn();
+      viewportSize = { width: 390, height: 500 };
+      render(
+        <PanZoomViewport contentWidth={1200} contentHeight={800} labels={labels}>
+          <button type="button" onClick={onClick}>
+            T1
+          </button>
+        </PanZoomViewport>
+      );
+      const table = screen.getByRole("button", { name: "T1" });
+      const before = transformOf();
+      drag(table, [200, 200], [202, 201]);
+      fireEvent.click(table);
+      expect(transformOf()).toEqual(before);
+      expect(onClick).toHaveBeenCalledOnce();
+    });
+
+    it("never starts a pan on an element marked data-pan-zoom-ignore", () => {
+      viewportSize = { width: 390, height: 500 };
+      render(
+        <PanZoomViewport contentWidth={1200} contentHeight={800} labels={labels}>
+          <div data-pan-zoom-ignore>handle</div>
+        </PanZoomViewport>
+      );
+      const before = transformOf();
+      drag(screen.getByText("handle"), [200, 200], [100, 200]);
+      expect(transformOf()).toEqual(before);
+    });
+
+    it("zooms with a two-finger pinch about the fingers", () => {
+      renderViewport();
+      const touch = (id: number, x: number, y: number) => ({
+        pointerId: id,
+        pointerType: "touch",
+        clientX: x,
+        clientY: y,
+      });
+      fireEvent.pointerDown(surface(), touch(1, 300, 300));
+      fireEvent.pointerDown(surface(), touch(2, 500, 300));
+      // The fingers spread from 200px apart to 250px apart: × 1.25.
+      fireEvent.pointerMove(surface(), touch(2, 550, 300));
+      fireEvent.pointerMove(surface(), touch(1, 300, 300));
+      expect(transformOf().scale).toBe(2.3);
+      fireEvent.pointerUp(surface(), touch(1, 300, 300));
+      fireEvent.pointerUp(surface(), touch(2, 550, 300));
+    });
+  });
+
+  describe("wheel", () => {
+    function wheel(init: WheelEventInit) {
+      const event = new WheelEvent("wheel", { bubbles: true, cancelable: true, ...init });
+      act(() => {
+        surface().dispatchEvent(event);
+      });
+      return event;
+    }
+
+    it("zooms on a trackpad pinch (a ctrl-wheel) and keeps the page from zooming", () => {
+      renderViewport();
+      const event = wheel({ deltaY: -10, ctrlKey: true, clientX: 400, clientY: 300 });
+      expect(event.defaultPrevented).toBe(true);
+      expect(transformOf().scale).toBeGreaterThan(1.84);
+    });
+
+    it("caps one ctrl-wheel notch so a mouse wheel does not jump", () => {
+      renderViewport({ maxScale: 10 });
+      wheel({ deltaY: -100, ctrlKey: true, clientX: 400, clientY: 300 });
+      expect(transformOf().scale).toBeCloseTo(1.84 * Math.exp(0.25), 2);
+    });
+
+    it("pans on a plain scroll while there is content that way", () => {
+      renderOnAPhone();
+      const event = wheel({ deltaX: 50 });
+      expect(event.defaultPrevented).toBe(true);
+      expect(transformOf().x).toBe(24 - 50);
+    });
+
+    it("hands the scroll back to the page when nothing can move", () => {
+      renderViewport();
+      const event = wheel({ deltaY: 80 });
+      expect(event.defaultPrevented).toBe(false);
+    });
+  });
+
+  describe("api", () => {
+    it("drives the view from outside and reports every transform", () => {
+      const api = React.createRef<PanZoomViewportHandle>();
+      const onTransformChange = vi.fn();
+      renderOnAPhone({ apiRef: api, onTransformChange });
+      expect(onTransformChange).toHaveBeenLastCalledWith({ scale: 0.5, x: 24, y: 50 });
+
+      act(() => api.current?.centerOn(1000, 400));
+      // The point (1000, 400) at 0.5 is 500 px in; centred it would put the
+      // content at 195 − 500 = −305, which the clamp holds at −234.
+      expect(api.current?.getTransform()).toEqual({ scale: 0.5, x: -234, y: 50 });
+      expect(onTransformChange).toHaveBeenLastCalledWith({ scale: 0.5, x: -234, y: 50 });
+
+      act(() => api.current?.zoomTo(1));
+      expect(api.current?.getTransform().scale).toBe(1);
+      act(() => api.current?.fit());
+      expect(api.current?.getTransform()).toEqual({ scale: 0.5, x: 24, y: 50 });
+    });
+
+    it("refits when the plan changes size", () => {
+      const view = renderViewport();
+      view.rerender(
+        <PanZoomViewport contentWidth={800} contentHeight={600} labels={labels}>
+          <button type="button">T1</button>
+        </PanZoomViewport>
+      );
+      // min(752 / 800, 552 / 600) = 0.92.
+      expect(transformOf().scale).toBe(0.92);
+    });
+
+    it("keeps a panned view, pulled inside the bounds, when the plan changes", async () => {
+      const view = renderOnAPhone();
+      surface().focus();
+      await userEvent.keyboard("{Shift>}{ArrowRight}{/Shift}");
+      view.rerender(
+        <PanZoomViewport contentWidth={700} contentHeight={800} minScale={0.5} labels={labels}>
+          <button type="button">T1</button>
+        </PanZoomViewport>
+      );
+      // 350 wide at 0.5 now: x may go no further than 390 − 350 − 24 = 16.
+      expect(transformOf()).toEqual({ scale: 0.5, x: 16, y: 50 });
+    });
+  });
+});