react-panel-layout 0.6.1 → 0.7.1

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

@@ -1,20 +1,52 @@
 /**
  * @file Tests for useDialogSwipeInput hook
  */
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderHook, act } from "@testing-library/react";
 import * as React from "react";
 import { useDialogSwipeInput } from "./useDialogSwipeInput.js";
 
-// Mock ResizeObserver
-vi.stubGlobal(
-  "ResizeObserver",
-  class {
-    observe = vi.fn();
-    unobserve = vi.fn();
-    disconnect = vi.fn();
-  },
-);
+/**
+ * Call tracker for testing callbacks.
+ */
+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 };
+};
+
+/**
+ * Cast native PointerEvent to React.PointerEvent for testing.
+ */
+function asReactPointerEvent(e: PointerEvent): React.PointerEvent<HTMLElement> {
+  // eslint-disable-next-line custom/no-as-outside-guard -- test helper for event casting
+  return e as unknown as React.PointerEvent<HTMLElement>;
+}
+
+// Simple ResizeObserver mock
+const originalResizeObserver = globalThis.ResizeObserver;
+
+// eslint-disable-next-line no-restricted-syntax -- mock class needed for ResizeObserver
+class MockResizeObserver {
+  observe(): void {}
+  unobserve(): void {}
+  disconnect(): void {}
+}
+
+beforeEach(() => {
+  // eslint-disable-next-line custom/no-as-outside-guard -- test mock assignment
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => {
+  globalThis.ResizeObserver = originalResizeObserver;
+});
 
 describe("useDialogSwipeInput", () => {
   const createMockContainer = (dimensions: { width: number; height: number }) => {
@@ -24,15 +56,6 @@ describe("useDialogSwipeInput", () => {
     return container;
   };
 
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    vi.clearAllMocks();
-  });
-
   describe("initialization", () => {
     it("should return idle state initially", () => {
       const container = createMockContainer({ width: 400, height: 300 });
@@ -43,7 +66,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -61,7 +84,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -80,7 +103,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -97,7 +120,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "left",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -116,7 +139,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: false,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 
@@ -128,9 +151,7 @@ describe("useDialogSwipeInput", () => {
       });
 
       act(() => {
-        result.current.containerProps.onPointerDown?.(
-          pointerEvent as unknown as React.PointerEvent,
-        );
+        result.current.containerProps.onPointerDown?.(asReactPointerEvent(pointerEvent));
       });
 
       expect(result.current.state.phase).toBe("idle");
@@ -147,7 +168,7 @@ describe("useDialogSwipeInput", () => {
           containerRef,
           openDirection: "bottom",
           enabled: true,
-          onSwipeDismiss: vi.fn(),
+          onSwipeDismiss: createCallTracker().fn,
         }),
       );
 

package/src/modules/dialog/useDialogSwipeInput.ts

@@ -17,6 +17,36 @@ import {
 import type { DialogOpenDirection } from "./dialogAnimationUtils.js";
 import { getAnimationAxis, getDirectionSign } from "./dialogAnimationUtils.js";
 
+/**
+ * Get sign from displacement value.
+ */
+function getSignFromDisplacement(value: number): -1 | 0 | 1 {
+  if (value > 0) {
+    return 1;
+  }
+  if (value < 0) {
+    return -1;
+  }
+  return 0;
+}
+
+type TrackingPoint = { timestamp: number } | null;
+
+/**
+ * Compute velocity from tracking points.
+ */
+function computeSwipeVelocity(
+  start: TrackingPoint,
+  current: TrackingPoint,
+  primaryValue: number,
+): number {
+  if (start === null || current === null) {
+    return 0;
+  }
+  const duration = Math.max(1, current.timestamp - start.timestamp);
+  return Math.abs(primaryValue) / duration;
+}
+
 /**
  * Default dismiss threshold (30% of container size).
  */
@@ -77,7 +107,10 @@ function isScrollableElement(element: HTMLElement): boolean {
     (style.overflowY === "scroll" || style.overflowY === "auto") &&
     element.scrollHeight > element.clientHeight;
 
-  return isScrollableX || isScrollableY;
+  if (isScrollableX) {
+    return true;
+  }
+  return isScrollableY;
 }
 
 /**
@@ -206,7 +239,7 @@ export function useDialogSwipeInput(
     if (containerSize <= 0) {
       return 0;
     }
-    const sign = primaryDisplacement > 0 ? 1 : primaryDisplacement < 0 ? -1 : 0;
+    const sign = getSignFromDisplacement(primaryDisplacement);
     if (sign !== expectedSign) {
       return 0; // Wrong direction
     }
@@ -244,13 +277,11 @@ export function useDialogSwipeInput(
         if (containerSize > 0) {
           const finalDisplacement = lastDisplacementRef.current;
           const primaryValue = axis === "x" ? finalDisplacement.x : finalDisplacement.y;
-          const sign = primaryValue > 0 ? 1 : primaryValue < 0 ? -1 : 0;
+          const sign = getSignFromDisplacement(primaryValue);
 
           if (sign === expectedSign) {
             const ratio = Math.abs(primaryValue) / containerSize;
-            const velocity = tracking.start && tracking.current
-              ? Math.abs(primaryValue) / Math.max(1, tracking.current.timestamp - tracking.start.timestamp)
-              : 0;
+            const velocity = computeSwipeVelocity(tracking.start, tracking.current, primaryValue);
 
             if (ratio >= dismissThreshold || velocity >= VELOCITY_THRESHOLD) {
               onSwipeDismiss();

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

@@ -1,67 +1,94 @@
 /**
  * @file Tests for useDialogTransform hook
  */
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 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 mockResizeObserver = vi.fn();
-vi.stubGlobal("ResizeObserver", class {
-  constructor(callback: ResizeObserverCallback) {
-    mockResizeObserver(callback);
-  }
-  observe = vi.fn();
-  unobserve = vi.fn();
-  disconnect = vi.fn();
-});
+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", () => {
-  let rafCallbacks: FrameRequestCallback[] = [];
-  let rafId = 0;
+  const createRAFTracker = () => {
+    const callbacks: FrameRequestCallback[] = [];
+    const tracker = { callbacks, nextId: 0 };
+    return tracker;
+  };
 
-  beforeEach(() => {
-    rafCallbacks = [];
-    rafId = 0;
+  const rafTracker = createRAFTracker();
+  const originalRAF = globalThis.requestAnimationFrame;
+  const originalCAF = globalThis.cancelAnimationFrame;
 
-    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
-      rafCallbacks.push(cb);
-      return ++rafId;
-    });
-    vi.stubGlobal("cancelAnimationFrame", (id: number) => {
+  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(() => {
-    vi.unstubAllGlobals();
-    vi.clearAllMocks();
+    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 = [...rafCallbacks];
-      rafCallbacks = [];
+      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: vi.fn(),
+        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: "",
@@ -140,7 +167,10 @@ describe("useDialogTransform", () => {
       const backdrop = createMockBackdrop();
       const elementRef = { current: element };
       const backdropRef = { current: backdrop };
-      const onOpenComplete = vi.fn();
+      const onOpenCompleteCalls: unknown[] = [];
+      const onOpenComplete = (): void => {
+        onOpenCompleteCalls.push(undefined);
+      };
 
       const { result, rerender } = renderHook(
         ({ visible }) =>
@@ -170,7 +200,7 @@ describe("useDialogTransform", () => {
         expect(result.current.phase).toBe("open");
       });
 
-      expect(onOpenComplete).toHaveBeenCalled();
+      expect(onOpenCompleteCalls.length).toBeGreaterThan(0);
     });
   });
 
@@ -218,7 +248,10 @@ describe("useDialogTransform", () => {
       const backdrop = createMockBackdrop();
       const elementRef = { current: element };
       const backdropRef = { current: backdrop };
-      const onCloseComplete = vi.fn();
+      const onCloseCompleteCalls: unknown[] = [];
+      const onCloseComplete = (): void => {
+        onCloseCompleteCalls.push(undefined);
+      };
 
       const { result, rerender } = renderHook(
         ({ visible }) =>
@@ -260,7 +293,7 @@ describe("useDialogTransform", () => {
         expect(result.current.phase).toBe("closed");
       });
 
-      expect(onCloseComplete).toHaveBeenCalled();
+      expect(onCloseCompleteCalls.length).toBeGreaterThan(0);
     });
   });