react-panel-layout 0.6.0 → 0.7.0

package/src/modules/dialog/useDialogTransform.spec.ts

@@ -0,0 +1,403 @@
+/**
+ * @file Tests for useDialogTransform hook
+ */
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useDialogTransform } from "./useDialogTransform.js";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+import { IDLE_CONTINUOUS_OPERATION_STATE } from "../../hooks/gesture/types.js";
+
+// Mock ResizeObserver
+const createMockResizeObserver = () => {
+  const callbacks: ResizeObserverCallback[] = [];
+  return {
+    callbacks,
+    MockClass: class {
+      constructor(callback: ResizeObserverCallback) {
+        callbacks.push(callback);
+      }
+      observe(): void {
+        // no-op
+      }
+      unobserve(): void {
+        // no-op
+      }
+      disconnect(): void {
+        // no-op
+      }
+    },
+  };
+};
+
+const { MockClass: MockResizeObserver } = createMockResizeObserver();
+globalThis.ResizeObserver = MockResizeObserver;
+
+describe("useDialogTransform", () => {
+  const createRAFTracker = () => {
+    const callbacks: FrameRequestCallback[] = [];
+    const tracker = { callbacks, nextId: 0 };
+    return tracker;
+  };
+
+  const rafTracker = createRAFTracker();
+  const originalRAF = globalThis.requestAnimationFrame;
+  const originalCAF = globalThis.cancelAnimationFrame;
+
+  beforeEach(() => {
+    rafTracker.callbacks.length = 0;
+    rafTracker.nextId = 0;
+
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback): number => {
+      rafTracker.callbacks.push(cb);
+      rafTracker.nextId += 1;
+      return rafTracker.nextId;
+    };
+    globalThis.cancelAnimationFrame = (): void => {
+      // Mock cancel
+    };
+  });
+
+  afterEach(() => {
+    globalThis.requestAnimationFrame = originalRAF;
+    globalThis.cancelAnimationFrame = originalCAF;
+  });
+
+  const runAnimationFrames = (count = 1, deltaMs = 16) => {
+    const now = performance.now();
+    for (let i = 0; i < count; i++) {
+      const callbacks = [...rafTracker.callbacks];
+      rafTracker.callbacks.length = 0;
+      callbacks.forEach(cb => cb(now + deltaMs * (i + 1)));
+    }
+  };
+
+  const createMockElement = (dimensions: { width: number; height: number }) => {
+    const setPropertyCalls: Array<{ prop: string; value: string }> = [];
+    // eslint-disable-next-line custom/no-as-outside-guard -- Required for DOM mock
+    return {
+      clientWidth: dimensions.width,
+      clientHeight: dimensions.height,
+      style: {
+        transform: "",
+        setProperty: (prop: string, value: string): void => {
+          setPropertyCalls.push({ prop, value });
+        },
+        viewTransitionName: "",
+      },
+      _setPropertyCalls: setPropertyCalls,
+    } as unknown as HTMLDivElement;
+  };
+
+  const createMockBackdrop = () => {
+    // eslint-disable-next-line custom/no-as-outside-guard -- Required for DOM mock
+    return {
+      style: {
+        opacity: "",
+      },
+    } as unknown as HTMLDivElement;
+  };
+
+  const idleSwipeState: ContinuousOperationState = IDLE_CONTINUOUS_OPERATION_STATE;
+  const zeroDisplacement2D = { x: 0, y: 0 };
+
+  describe("opening animation", () => {
+    it("should start animation when visible changes from false to true", async () => {
+      const element = createMockElement({ width: 400, height: 300 });
+      const backdrop = createMockBackdrop();
+      const elementRef = { current: element };
+      const backdropRef = { current: backdrop };
+
+      const { result, rerender } = renderHook(
+        ({ visible }) =>
+          useDialogTransform({
+            elementRef,
+            backdropRef,
+            visible,
+            openDirection: "bottom",
+            swipeState: idleSwipeState,
+            displacement: 0,
+            displacement2D: zeroDisplacement2D,
+          }),
+        { initialProps: { visible: false } },
+      );
+
+      expect(result.current.phase).toBe("closed");
+
+      // Trigger visible change
+      rerender({ visible: true });
+
+      // Should transition to opening
+      expect(result.current.phase).toBe("opening");
+      expect(result.current.isAnimating).toBe(true);
+    });
+
+    it("should apply transform during opening animation", async () => {
+      const element = createMockElement({ width: 400, height: 300 });
+      const backdrop = createMockBackdrop();
+      const elementRef = { current: element };
+      const backdropRef = { current: backdrop };
+
+      const { rerender } = renderHook(
+        ({ visible }) =>
+          useDialogTransform({
+            elementRef,
+            backdropRef,
+            visible,
+            openDirection: "bottom",
+            swipeState: idleSwipeState,
+            displacement: 0,
+            displacement2D: zeroDisplacement2D,
+          }),
+        { initialProps: { visible: false } },
+      );
+
+      // Trigger visible change
+      rerender({ visible: true });
+
+      // Run some animation frames
+      act(() => {
+        runAnimationFrames(5, 50);
+      });
+
+      // Transform should be applied
+      expect(element.style.transform).not.toBe("");
+    });
+
+    it("should call onOpenComplete when animation finishes", async () => {
+      const element = createMockElement({ width: 400, height: 300 });
+      const backdrop = createMockBackdrop();
+      const elementRef = { current: element };
+      const backdropRef = { current: backdrop };
+      const onOpenCompleteCalls: unknown[] = [];
+      const onOpenComplete = (): void => {
+        onOpenCompleteCalls.push(undefined);
+      };
+
+      const { result, rerender } = renderHook(
+        ({ visible }) =>
+          useDialogTransform({
+            elementRef,
+            backdropRef,
+            visible,
+            openDirection: "bottom",
+            swipeState: idleSwipeState,
+            displacement: 0,
+            displacement2D: zeroDisplacement2D,
+            animationDuration: 100,
+            onOpenComplete,
+          }),
+        { initialProps: { visible: false } },
+      );
+
+      // Trigger visible change
+      rerender({ visible: true });
+
+      // Run enough frames to complete animation
+      act(() => {
+        runAnimationFrames(10, 20);
+      });
+
+      await waitFor(() => {
+        expect(result.current.phase).toBe("open");
+      });
+
+      expect(onOpenCompleteCalls.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("closing animation", () => {
+    it("should animate close when triggerClose is called", async () => {
+      const element = createMockElement({ width: 400, height: 300 });
+      const backdrop = createMockBackdrop();
+      const elementRef = { current: element };
+      const backdropRef = { current: backdrop };
+
+      const { result, rerender } = renderHook(
+        ({ visible }) =>
+          useDialogTransform({
+            elementRef,
+            backdropRef,
+            visible,
+            openDirection: "bottom",
+            swipeState: idleSwipeState,
+            displacement: 0,
+            displacement2D: zeroDisplacement2D,
+          }),
+        { initialProps: { visible: false } },
+      );
+
+      // Open first
+      rerender({ visible: true });
+      act(() => {
+        runAnimationFrames(30, 20);
+      });
+
+      await waitFor(() => {
+        expect(result.current.phase).toBe("open");
+      });
+
+      // Now trigger close
+      act(() => {
+        result.current.triggerClose();
+      });
+
+      expect(result.current.phase).toBe("closing");
+    });
+
+    it("should call onCloseComplete when close animation finishes", async () => {
+      const element = createMockElement({ width: 400, height: 300 });
+      const backdrop = createMockBackdrop();
+      const elementRef = { current: element };
+      const backdropRef = { current: backdrop };
+      const onCloseCompleteCalls: unknown[] = [];
+      const onCloseComplete = (): void => {
+        onCloseCompleteCalls.push(undefined);
+      };
+
+      const { result, rerender } = renderHook(
+        ({ visible }) =>
+          useDialogTransform({
+            elementRef,
+            backdropRef,
+            visible,
+            openDirection: "bottom",
+            swipeState: idleSwipeState,
+            displacement: 0,
+            displacement2D: zeroDisplacement2D,
+            animationDuration: 100,
+            onCloseComplete,
+          }),
+        { initialProps: { visible: false } },
+      );
+
+      // Open first
+      rerender({ visible: true });
+      act(() => {
+        runAnimationFrames(30, 20);
+      });
+
+      await waitFor(() => {
+        expect(result.current.phase).toBe("open");
+      });
+
+      // Trigger close
+      act(() => {
+        result.current.triggerClose();
+      });
+
+      // Run animation
+      act(() => {
+        runAnimationFrames(30, 20);
+      });
+
+      await waitFor(() => {
+        expect(result.current.phase).toBe("closed");
+      });
+
+      expect(onCloseCompleteCalls.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("swipe interaction", () => {
+    it("should apply 2D transform during swipe", () => {
+      const element = createMockElement({ width: 400, height: 300 });
+      const backdrop = createMockBackdrop();
+      const elementRef = { current: element };
+      const backdropRef = { current: backdrop };
+
+      const operatingSwipeState: ContinuousOperationState = {
+        phase: "operating",
+        displacement: { x: 30, y: 100 },
+        velocity: { x: 0, y: 0 },
+      };
+
+      renderHook(() =>
+        useDialogTransform({
+          elementRef,
+          backdropRef,
+          visible: true,
+          openDirection: "bottom",
+          swipeState: operatingSwipeState,
+          displacement: 100,
+          displacement2D: { x: 30, y: 100 },
+        }),
+      );
+
+      // Transform should reflect 2D displacement
+      expect(element.style.transform).toContain("translate(30px, 100px)");
+    });
+
+    it("should animate snapback when swipe ends below threshold", async () => {
+      const element = createMockElement({ width: 400, height: 300 });
+      const backdrop = createMockBackdrop();
+      const elementRef = { current: element };
+      const backdropRef = { current: backdrop };
+
+      const operatingState: ContinuousOperationState = {
+        phase: "operating",
+        displacement: { x: 20, y: 50 },
+        velocity: { x: 0, y: 0 },
+      };
+
+      const displacement2D = { x: 20, y: 50 };
+
+      const { rerender, result } = renderHook(
+        ({ swipeState, displacement, d2d }) =>
+          useDialogTransform({
+            elementRef,
+            backdropRef,
+            visible: true,
+            openDirection: "bottom",
+            swipeState,
+            displacement,
+            displacement2D: d2d,
+          }),
+        { initialProps: { swipeState: operatingState, displacement: 50, d2d: displacement2D } },
+      );
+
+      // End swipe
+      const endedState: ContinuousOperationState = {
+        phase: "ended",
+        displacement: { x: 20, y: 50 },
+        velocity: { x: 0, y: 0 },
+      };
+      rerender({ swipeState: endedState, displacement: 50, d2d: displacement2D });
+
+      // Should start snapback animation
+      expect(result.current.isAnimating).toBe(true);
+    });
+  });
+
+  describe("container size handling", () => {
+    it("should not apply transform when container size is 0", () => {
+      const element = createMockElement({ width: 0, height: 0 });
+      const backdrop = createMockBackdrop();
+      const elementRef = { current: element };
+      const backdropRef = { current: backdrop };
+
+      const { rerender } = renderHook(
+        ({ visible }) =>
+          useDialogTransform({
+            elementRef,
+            backdropRef,
+            visible,
+            openDirection: "bottom",
+            swipeState: idleSwipeState,
+            displacement: 0,
+            displacement2D: zeroDisplacement2D,
+          }),
+        { initialProps: { visible: false } },
+      );
+
+      rerender({ visible: true });
+
+      act(() => {
+        runAnimationFrames(5, 50);
+      });
+
+      // This test documents the current BROKEN behavior
+      // Transform should NOT be empty - this is the bug!
+      // When we fix it, this expectation should change
+      expect(element.style.transform).toBe("");
+    });
+  });
+});