react-panel-layout 0.6.0 → 0.6.1

package/src/modules/pivot/usePivotSwipeInput.spec.ts

@@ -6,29 +6,57 @@ import * as React from "react";
 import { usePivotSwipeInput } from "./usePivotSwipeInput.js";
 import type { UsePivotResult } from "./types.js";
 
-describe("usePivotSwipeInput", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
+type CallTracker = {
+  calls: ReadonlyArray<ReadonlyArray<unknown>>;
+  fn: (...args: ReadonlyArray<unknown>) => void;
+};
+
+const createCallTracker = (): CallTracker => {
+  const calls: Array<ReadonlyArray<unknown>> = [];
+  const fn = (...args: ReadonlyArray<unknown>): void => {
+    calls.push(args);
+  };
+  return { calls, fn };
+};
+
+type MockPivotState = {
+  pivot: Pick<UsePivotResult, "go" | "canGo">;
+  calls: {
+    go: CallTracker;
+    canGo: CallTracker;
+  };
+};
 
-  afterEach(() => {
-    vi.useRealTimers();
-  });
+describe("usePivotSwipeInput", () => {
 
   const createRef = (): React.RefObject<HTMLDivElement> => {
     const element = document.createElement("div");
     return { current: element };
   };
 
-  const createMockPivot = (): Pick<UsePivotResult, "go" | "canGo"> => ({
-    go: vi.fn(),
-    canGo: vi.fn().mockReturnValue(true),
-  });
+  const createMockPivot = (canGoResult: boolean = true): MockPivotState => {
+    const go = createCallTracker();
+    const canGo = createCallTracker();
+    const canGoFn = (direction: number): boolean => {
+      canGo.fn(direction);
+      return canGoResult;
+    };
+    return {
+      pivot: {
+        go: go.fn,
+        canGo: canGoFn,
+      },
+      calls: {
+        go,
+        canGo,
+      },
+    };
+  };
 
   describe("initialization", () => {
     it("starts with idle state", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot } = createMockPivot(true);
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({ containerRef, pivot }),
@@ -39,7 +67,7 @@ describe("usePivotSwipeInput", () => {
 
     it("provides container props with style", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot } = createMockPivot(true);
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({ containerRef, pivot }),
@@ -53,7 +81,7 @@ describe("usePivotSwipeInput", () => {
   describe("swipe to navigate", () => {
     it("calls go(1) when swiping left (to see next)", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot, calls } = createMockPivot(true);
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({
@@ -96,12 +124,13 @@ describe("usePivotSwipeInput", () => {
       });
 
       // Swipe left (-1 direction) should call go(1) to show next
-      expect(pivot.go).toHaveBeenCalledWith(1);
+      expect(calls.go.calls).toHaveLength(1);
+      expect(calls.go.calls[0]?.[0]).toBe(1);
     });
 
     it("calls go(-1) when swiping right (to see previous)", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot, calls } = createMockPivot(true);
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({
@@ -144,13 +173,13 @@ describe("usePivotSwipeInput", () => {
       });
 
       // Swipe right (1 direction) should call go(-1) to show previous
-      expect(pivot.go).toHaveBeenCalledWith(-1);
+      expect(calls.go.calls).toHaveLength(1);
+      expect(calls.go.calls[0]?.[0]).toBe(-1);
     });
 
     it("does not call go when canGo returns false", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
-      (pivot.canGo as ReturnType<typeof vi.fn>).mockReturnValue(false);
+      const { pivot, calls } = createMockPivot(false);
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({
@@ -192,14 +221,14 @@ describe("usePivotSwipeInput", () => {
         document.dispatchEvent(upEvent);
       });
 
-      expect(pivot.go).not.toHaveBeenCalled();
+      expect(calls.go.calls).toHaveLength(0);
     });
   });
 
   describe("input state tracking", () => {
     it("updates inputState during swipe", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot } = createMockPivot();
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({ containerRef, pivot }),
@@ -240,7 +269,7 @@ describe("usePivotSwipeInput", () => {
   describe("disabled state", () => {
     it("does not track when disabled", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot } = createMockPivot();
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({ containerRef, pivot, enabled: false }),
@@ -266,7 +295,7 @@ describe("usePivotSwipeInput", () => {
   describe("vertical axis", () => {
     it("supports vertical swipe when axis is vertical", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot, calls } = createMockPivot();
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({
@@ -312,7 +341,8 @@ describe("usePivotSwipeInput", () => {
       });
 
       // Swipe up (-1 direction) should call go(1) to show next
-      expect(pivot.go).toHaveBeenCalledWith(1);
+      expect(calls.go.calls).toHaveLength(1);
+      expect(calls.go.calls[0]?.[0]).toBe(1);
     });
   });
 
@@ -334,64 +364,77 @@ describe("usePivotSwipeInput", () => {
 
     it("should NOT trigger navigation with small displacement (under 25% of container)", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot, calls } = createMockPivot();
 
       // コンテナ幅が400pxの場合、25%=100px未満はトリガーしないべき
       const containerWidth = 400;
       const smallDisplacement = containerWidth * 0.2; // 80px = 20%
 
-      const { result } = renderHook(() =>
-        usePivotSwipeInput({
-          containerRef,
-          pivot,
-          // 推奨閾値: コンテナ幅の25%程度
-          thresholds: {
-            distanceThreshold: containerWidth * 0.25, // 100px
-            velocityThreshold: 0.5, // より高い閾値
-            lockThreshold: 10,
-          },
-        }),
-      );
-
-      // Pointer down
-      const downEvent = {
-        clientX: 200,
-        clientY: 100,
-        pointerId: 1,
-        isPrimary: true,
-        pointerType: "touch",
-        button: 0,
-      } as React.PointerEvent<HTMLElement>;
-
-      act(() => {
-        result.current.containerProps.onPointerDown?.(downEvent);
-      });
-
-      // 小さな移動 (80px left)
-      const moveEvent = new PointerEvent("pointermove", {
-        clientX: 200 - smallDisplacement,
-        clientY: 102,
-        pointerId: 1,
-      });
-
-      act(() => {
-        document.dispatchEvent(moveEvent);
-      });
-
-      // Pointer up
-      const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
-
-      act(() => {
-        document.dispatchEvent(upEvent);
-      });
-
-      // 閾値未満の移動ではナビゲーションされないべき
-      expect(pivot.go).not.toHaveBeenCalled();
+      // Mock performance.now() to control velocity calculation
+      // 80px / 200ms = 0.4 px/ms (under 0.5 threshold)
+      let mockTime = 0;
+      const originalPerformanceNow = performance.now;
+      performance.now = () => mockTime;
+
+      try {
+        const { result } = renderHook(() =>
+          usePivotSwipeInput({
+            containerRef,
+            pivot,
+            // 推奨閾値: コンテナ幅の25%程度
+            thresholds: {
+              distanceThreshold: containerWidth * 0.25, // 100px
+              velocityThreshold: 0.5, // より高い閾値
+              lockThreshold: 10,
+            },
+          }),
+        );
+
+        // Pointer down at time 0
+        mockTime = 0;
+        const downEvent = {
+          clientX: 200,
+          clientY: 100,
+          pointerId: 1,
+          isPrimary: true,
+          pointerType: "touch",
+          button: 0,
+        } as React.PointerEvent<HTMLElement>;
+
+        act(() => {
+          result.current.containerProps.onPointerDown?.(downEvent);
+        });
+
+        // 小さな移動 (80px left) at time 200ms
+        // velocity = 80px / 200ms = 0.4 px/ms (under 0.5 threshold)
+        mockTime = 200;
+        const moveEvent = new PointerEvent("pointermove", {
+          clientX: 200 - smallDisplacement,
+          clientY: 102,
+          pointerId: 1,
+        });
+
+        act(() => {
+          document.dispatchEvent(moveEvent);
+        });
+
+        // Pointer up
+        const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
+
+        act(() => {
+          document.dispatchEvent(upEvent);
+        });
+
+        // 閾値未満の移動ではナビゲーションされないべき
+        expect(calls.go.calls).toHaveLength(0);
+      } finally {
+        performance.now = originalPerformanceNow;
+      }
     });
 
     it("should trigger navigation with significant displacement (over 25% of container)", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot, calls } = createMockPivot();
 
       const containerWidth = 400;
       const significantDisplacement = containerWidth * 0.3; // 120px = 30%
@@ -439,59 +482,73 @@ describe("usePivotSwipeInput", () => {
       });
 
       // 閾値を超えた移動ではナビゲーションされる
-      expect(pivot.go).toHaveBeenCalledWith(1);
+      expect(calls.go.calls).toHaveLength(1);
+      expect(calls.go.calls[0]?.[0]).toBe(1);
     });
 
     it("does NOT trigger with displacement under default threshold (100px)", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
-
-      // デフォルト閾値: distanceThreshold: 100px, velocityThreshold: 0.5 px/ms
-      const { result } = renderHook(() =>
-        usePivotSwipeInput({
-          containerRef,
-          pivot,
-          // デフォルト値を使用
-        }),
-      );
-
-      const downEvent = {
-        clientX: 200,
-        clientY: 100,
-        pointerId: 1,
-        isPrimary: true,
-        pointerType: "touch",
-        button: 0,
-      } as React.PointerEvent<HTMLElement>;
-
-      act(() => {
-        result.current.containerProps.onPointerDown?.(downEvent);
-      });
-
-      // 60pxは新しいデフォルト閾値(100px)未満
-      const moveEvent = new PointerEvent("pointermove", {
-        clientX: 140, // -60px (< 100px threshold)
-        clientY: 102,
-        pointerId: 1,
-      });
-
-      act(() => {
-        document.dispatchEvent(moveEvent);
-      });
-
-      const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
-
-      act(() => {
-        document.dispatchEvent(upEvent);
-      });
-
-      // 閾値未満なのでトリガーされない
-      expect(pivot.go).not.toHaveBeenCalled();
+      const { pivot, calls } = createMockPivot();
+
+      // Mock performance.now() to control velocity calculation
+      // 60px / 200ms = 0.3 px/ms (under 0.5 threshold)
+      let mockTime = 0;
+      const originalPerformanceNow = performance.now;
+      performance.now = () => mockTime;
+
+      try {
+        // デフォルト閾値: distanceThreshold: 100px, velocityThreshold: 0.5 px/ms
+        const { result } = renderHook(() =>
+          usePivotSwipeInput({
+            containerRef,
+            pivot,
+            // デフォルト値を使用
+          }),
+        );
+
+        mockTime = 0;
+        const downEvent = {
+          clientX: 200,
+          clientY: 100,
+          pointerId: 1,
+          isPrimary: true,
+          pointerType: "touch",
+          button: 0,
+        } as React.PointerEvent<HTMLElement>;
+
+        act(() => {
+          result.current.containerProps.onPointerDown?.(downEvent);
+        });
+
+        // 60pxは新しいデフォルト閾値(100px)未満
+        // velocity = 60px / 200ms = 0.3 px/ms (under 0.5 threshold)
+        mockTime = 200;
+        const moveEvent = new PointerEvent("pointermove", {
+          clientX: 140, // -60px (< 100px threshold)
+          clientY: 102,
+          pointerId: 1,
+        });
+
+        act(() => {
+          document.dispatchEvent(moveEvent);
+        });
+
+        const upEvent = new PointerEvent("pointerup", { pointerId: 1 });
+
+        act(() => {
+          document.dispatchEvent(upEvent);
+        });
+
+        // 閾値未満なのでトリガーされない
+        expect(calls.go.calls).toHaveLength(0);
+      } finally {
+        performance.now = originalPerformanceNow;
+      }
     });
 
     it("triggers with displacement over default threshold (100px)", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot, calls } = createMockPivot();
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({
@@ -530,7 +587,8 @@ describe("usePivotSwipeInput", () => {
         document.dispatchEvent(upEvent);
       });
 
-      expect(pivot.go).toHaveBeenCalledWith(1);
+      expect(calls.go.calls).toHaveLength(1);
+      expect(calls.go.calls[0]?.[0]).toBe(1);
     });
   });
 
@@ -551,7 +609,7 @@ describe("usePivotSwipeInput", () => {
 
     it("should NOT trigger navigation when pointercancel fires (finger still down)", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot, calls } = createMockPivot();
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({
@@ -595,12 +653,12 @@ describe("usePivotSwipeInput", () => {
       });
 
       // Navigation should NOT be triggered - the swipe was canceled, not completed
-      expect(pivot.go).not.toHaveBeenCalled();
+      expect(calls.go.calls).toHaveLength(0);
     });
 
     it("should trigger navigation normally on pointerup", () => {
       const containerRef = createRef();
-      const pivot = createMockPivot();
+      const { pivot, calls } = createMockPivot();
 
       const { result } = renderHook(() =>
         usePivotSwipeInput({
@@ -643,7 +701,8 @@ describe("usePivotSwipeInput", () => {
       });
 
       // Navigation SHOULD be triggered
-      expect(pivot.go).toHaveBeenCalledWith(1);
+      expect(calls.go.calls).toHaveLength(1);
+      expect(calls.go.calls[0]?.[0]).toBe(1);
     });
   });
 });