@windstream/react-shared-components 0.1.94 → 0.1.96

package/src/hooks/use-carousel-swipe.test.ts

@@ -1,393 +1,393 @@
-import React from "react";
-import { CarouselSwipeConfig, useCarouselSwipe } from "./use-carousel-swipe";
-
-import { act, renderHook } from "@testing-library/react";
-
-// Helper to create a mock TouchEvent
-function makeTouchEvent(clientX: number): React.TouchEvent {
-  return {
-    touches: [{ clientX }],
-  } as unknown as React.TouchEvent;
-}
-
-describe("useCarouselSwipe", () => {
-  const defaultConfig: CarouselSwipeConfig = {
-    itemCount: 5,
-    enableAutoScroll: false,
-  };
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  describe("Initial state", () => {
-    it("returns currentIndex 0", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      expect(result.current.currentIndex).toBe(0);
-    });
-
-    it("returns swipeOffset 0", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      expect(result.current.swipeOffset).toBe(0);
-    });
-
-    it("returns isSwiping false", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      expect(result.current.isSwiping).toBe(false);
-    });
-
-    it("returns containerRef", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      expect(result.current.containerRef).toBeDefined();
-      expect(result.current.containerRef.current).toBeNull();
-    });
-
-    it("returns default constants", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      expect(result.current.constants).toEqual({
-        CARD_OFFSET_PERCENTAGE: 105,
-        SWIPE_THRESHOLD: 0.15,
-        MOBILE_BREAKPOINT: 768,
-        AUTO_SCROLL_INTERVAL: 8000,
-      });
-    });
-
-    it("uses custom constants from config", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({
-          itemCount: 3,
-          cardOffsetPercentage: 110,
-          swipeThreshold: 0.2,
-          mobileBreakpoint: 1024,
-          autoScrollInterval: 5000,
-        })
-      );
-      expect(result.current.constants).toEqual({
-        CARD_OFFSET_PERCENTAGE: 110,
-        SWIPE_THRESHOLD: 0.2,
-        MOBILE_BREAKPOINT: 1024,
-        AUTO_SCROLL_INTERVAL: 5000,
-      });
-    });
-  });
-
-  describe("nextSlide", () => {
-    it("advances to next slide", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.nextSlide());
-      expect(result.current.currentIndex).toBe(1);
-    });
-
-    it("wraps around to 0 from last slide", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      // Go to last slide (index 4)
-      act(() => result.current.goToSlide(4));
-      act(() => result.current.nextSlide());
-      expect(result.current.currentIndex).toBe(0);
-    });
-
-    it("does nothing when itemCount is 0", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({ itemCount: 0, enableAutoScroll: false })
-      );
-      act(() => result.current.nextSlide());
-      expect(result.current.currentIndex).toBe(0);
-    });
-  });
-
-  describe("prevSlide", () => {
-    it("goes to previous slide", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.goToSlide(2));
-      act(() => result.current.prevSlide());
-      expect(result.current.currentIndex).toBe(1);
-    });
-
-    it("wraps to last slide from first slide", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.prevSlide());
-      expect(result.current.currentIndex).toBe(4);
-    });
-
-    it("does nothing when itemCount is 0", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({ itemCount: 0, enableAutoScroll: false })
-      );
-      act(() => result.current.prevSlide());
-      expect(result.current.currentIndex).toBe(0);
-    });
-  });
-
-  describe("goToSlide", () => {
-    it("navigates to specific slide index", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.goToSlide(3));
-      expect(result.current.currentIndex).toBe(3);
-    });
-
-    it("ignores negative index", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.goToSlide(-1));
-      expect(result.current.currentIndex).toBe(0);
-    });
-
-    it("ignores index >= itemCount", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.goToSlide(5));
-      expect(result.current.currentIndex).toBe(0);
-    });
-
-    it("navigates to first slide (index 0)", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.goToSlide(3));
-      act(() => result.current.goToSlide(0));
-      expect(result.current.currentIndex).toBe(0);
-    });
-
-    it("navigates to last valid slide", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.goToSlide(4));
-      expect(result.current.currentIndex).toBe(4);
-    });
-  });
-
-  describe("Touch gesture handling", () => {
-    it("sets isSwiping to true on touch start", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
-      expect(result.current.isSwiping).toBe(true);
-    });
-
-    it("tracks swipe offset during touch move", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
-      act(() => result.current.handleTouchMove(makeTouchEvent(150)));
-      expect(result.current.swipeOffset).toBe(-50);
-    });
-
-    it("does not track move when not swiping", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      // Don't call handleTouchStart, so isSwiping is false
-      act(() => result.current.handleTouchMove(makeTouchEvent(150)));
-      expect(result.current.swipeOffset).toBe(0);
-    });
-
-    it("resets swipeOffset and isSwiping on touch end", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
-      act(() => result.current.handleTouchMove(makeTouchEvent(210)));
-      act(() => result.current.handleTouchEnd());
-      expect(result.current.swipeOffset).toBe(0);
-      expect(result.current.isSwiping).toBe(false);
-    });
-
-    it("triggers prevSlide on right swipe exceeding threshold", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({ ...defaultConfig, swipeThreshold: 0.01 })
-      );
-      // Start at slide 2 so prevSlide can go back
-      act(() => result.current.goToSlide(2));
-      act(() => result.current.handleTouchStart(makeTouchEvent(100)));
-      act(() => result.current.handleTouchMove(makeTouchEvent(300)));
-      act(() => result.current.handleTouchEnd());
-      expect(result.current.currentIndex).toBe(1);
-    });
-
-    it("triggers nextSlide on left swipe exceeding threshold", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({ ...defaultConfig, swipeThreshold: 0.01 })
-      );
-      act(() => result.current.handleTouchStart(makeTouchEvent(300)));
-      act(() => result.current.handleTouchMove(makeTouchEvent(100)));
-      act(() => result.current.handleTouchEnd());
-      expect(result.current.currentIndex).toBe(1);
-    });
-
-    it("does not change slide when swipe is below threshold", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({ ...defaultConfig, swipeThreshold: 0.99 })
-      );
-      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
-      act(() => result.current.handleTouchMove(makeTouchEvent(195)));
-      act(() => result.current.handleTouchEnd());
-      expect(result.current.currentIndex).toBe(0);
-    });
-  });
-
-  describe("Auto-scroll", () => {
-    it("auto-scrolls to next slide at configured interval", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({
-          itemCount: 5,
-          enableAutoScroll: true,
-          autoScrollInterval: 3000,
-        })
-      );
-      expect(result.current.currentIndex).toBe(0);
-      act(() => jest.advanceTimersByTime(3000));
-      expect(result.current.currentIndex).toBe(1);
-      act(() => jest.advanceTimersByTime(3000));
-      expect(result.current.currentIndex).toBe(2);
-    });
-
-    it("does not auto-scroll when enableAutoScroll is false", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({
-          itemCount: 5,
-          enableAutoScroll: false,
-          autoScrollInterval: 3000,
-        })
-      );
-      act(() => jest.advanceTimersByTime(10000));
-      expect(result.current.currentIndex).toBe(0);
-    });
-
-    it("does not auto-scroll when autoScrollInterval is 0", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({
-          itemCount: 5,
-          enableAutoScroll: true,
-          autoScrollInterval: 0,
-        })
-      );
-      act(() => jest.advanceTimersByTime(10000));
-      expect(result.current.currentIndex).toBe(0);
-    });
-
-    it("does not auto-scroll when itemCount is 0", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({
-          itemCount: 0,
-          enableAutoScroll: true,
-          autoScrollInterval: 3000,
-        })
-      );
-      act(() => jest.advanceTimersByTime(10000));
-      expect(result.current.currentIndex).toBe(0);
-    });
-
-    it("pauses auto-scroll on touch start", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({
-          itemCount: 5,
-          enableAutoScroll: true,
-          autoScrollInterval: 3000,
-        })
-      );
-      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
-      act(() => jest.advanceTimersByTime(10000));
-      // Should still be at 0 because auto-scroll was paused
-      // (though the initial interval may have already ticked)
-      expect(result.current.isSwiping).toBe(true);
-    });
-
-    it("restarts auto-scroll after touch end when enabled", () => {
-      const { result } = renderHook(() =>
-        useCarouselSwipe({
-          itemCount: 5,
-          enableAutoScroll: true,
-          autoScrollInterval: 3000,
-        })
-      );
-      // Touch interaction
-      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
-      act(() => result.current.handleTouchEnd());
-      // After touch end, auto-scroll should restart
-      act(() => jest.advanceTimersByTime(3000));
-      expect(result.current.currentIndex).toBeGreaterThan(0);
-    });
-
-    it("cleans up interval on unmount", () => {
-      const clearIntervalSpy = jest.spyOn(global, "clearInterval");
-      const { unmount } = renderHook(() =>
-        useCarouselSwipe({
-          itemCount: 5,
-          enableAutoScroll: true,
-          autoScrollInterval: 3000,
-        })
-      );
-      unmount();
-      expect(clearIntervalSpy).toHaveBeenCalled();
-      clearIntervalSpy.mockRestore();
-    });
-  });
-
-  describe("Responsive behavior", () => {
-    it("detects mobile viewport", () => {
-      Object.defineProperty(window, "innerWidth", {
-        writable: true,
-        value: 500,
-      });
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      expect(result.current.isMobile).toBe(true);
-    });
-
-    it("detects desktop viewport", () => {
-      Object.defineProperty(window, "innerWidth", {
-        writable: true,
-        value: 1024,
-      });
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      expect(result.current.isMobile).toBe(false);
-    });
-
-    it("updates isMobile on resize", () => {
-      Object.defineProperty(window, "innerWidth", {
-        writable: true,
-        value: 1024,
-      });
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      expect(result.current.isMobile).toBe(false);
-
-      act(() => {
-        Object.defineProperty(window, "innerWidth", {
-          writable: true,
-          value: 500,
-        });
-        window.dispatchEvent(new Event("resize"));
-      });
-      expect(result.current.isMobile).toBe(true);
-    });
-
-    it("updates containerWidth on resize", () => {
-      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const initialWidth = result.current.containerWidth;
-      act(() => {
-        Object.defineProperty(window, "innerWidth", {
-          writable: true,
-          value: 800,
-        });
-        window.dispatchEvent(new Event("resize"));
-      });
-      // containerRef is null so falls back to window.innerWidth
-      expect(result.current.containerWidth).toBe(800);
-    });
-
-    it("uses custom mobileBreakpoint", () => {
-      Object.defineProperty(window, "innerWidth", {
-        writable: true,
-        value: 900,
-      });
-      const { result } = renderHook(() =>
-        useCarouselSwipe({ ...defaultConfig, mobileBreakpoint: 1024 })
-      );
-      expect(result.current.isMobile).toBe(true);
-    });
-
-    it("removes resize listeners on unmount", () => {
-      const removeEventListenerSpy = jest.spyOn(window, "removeEventListener");
-      const { unmount } = renderHook(() => useCarouselSwipe(defaultConfig));
-      unmount();
-      const resizeCalls = removeEventListenerSpy.mock.calls.filter(
-        call => call[0] === "resize"
-      );
-      expect(resizeCalls.length).toBeGreaterThanOrEqual(2); // containerWidth + isMobile
-      removeEventListenerSpy.mockRestore();
-    });
-  });
-});
+import React from "react";
+import { CarouselSwipeConfig, useCarouselSwipe } from "./use-carousel-swipe";
+
+import { act, renderHook } from "@testing-library/react";
+
+// Helper to create a mock TouchEvent
+function makeTouchEvent(clientX: number): React.TouchEvent {
+  return {
+    touches: [{ clientX }],
+  } as unknown as React.TouchEvent;
+}
+
+describe("useCarouselSwipe", () => {
+  const defaultConfig: CarouselSwipeConfig = {
+    itemCount: 5,
+    enableAutoScroll: false,
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe("Initial state", () => {
+    it("returns currentIndex 0", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      expect(result.current.currentIndex).toBe(0);
+    });
+
+    it("returns swipeOffset 0", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      expect(result.current.swipeOffset).toBe(0);
+    });
+
+    it("returns isSwiping false", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      expect(result.current.isSwiping).toBe(false);
+    });
+
+    it("returns containerRef", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      expect(result.current.containerRef).toBeDefined();
+      expect(result.current.containerRef.current).toBeNull();
+    });
+
+    it("returns default constants", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      expect(result.current.constants).toEqual({
+        CARD_OFFSET_PERCENTAGE: 105,
+        SWIPE_THRESHOLD: 0.15,
+        MOBILE_BREAKPOINT: 768,
+        AUTO_SCROLL_INTERVAL: 8000,
+      });
+    });
+
+    it("uses custom constants from config", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({
+          itemCount: 3,
+          cardOffsetPercentage: 110,
+          swipeThreshold: 0.2,
+          mobileBreakpoint: 1024,
+          autoScrollInterval: 5000,
+        })
+      );
+      expect(result.current.constants).toEqual({
+        CARD_OFFSET_PERCENTAGE: 110,
+        SWIPE_THRESHOLD: 0.2,
+        MOBILE_BREAKPOINT: 1024,
+        AUTO_SCROLL_INTERVAL: 5000,
+      });
+    });
+  });
+
+  describe("nextSlide", () => {
+    it("advances to next slide", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.nextSlide());
+      expect(result.current.currentIndex).toBe(1);
+    });
+
+    it("wraps around to 0 from last slide", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      // Go to last slide (index 4)
+      act(() => result.current.goToSlide(4));
+      act(() => result.current.nextSlide());
+      expect(result.current.currentIndex).toBe(0);
+    });
+
+    it("does nothing when itemCount is 0", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({ itemCount: 0, enableAutoScroll: false })
+      );
+      act(() => result.current.nextSlide());
+      expect(result.current.currentIndex).toBe(0);
+    });
+  });
+
+  describe("prevSlide", () => {
+    it("goes to previous slide", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.goToSlide(2));
+      act(() => result.current.prevSlide());
+      expect(result.current.currentIndex).toBe(1);
+    });
+
+    it("wraps to last slide from first slide", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.prevSlide());
+      expect(result.current.currentIndex).toBe(4);
+    });
+
+    it("does nothing when itemCount is 0", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({ itemCount: 0, enableAutoScroll: false })
+      );
+      act(() => result.current.prevSlide());
+      expect(result.current.currentIndex).toBe(0);
+    });
+  });
+
+  describe("goToSlide", () => {
+    it("navigates to specific slide index", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.goToSlide(3));
+      expect(result.current.currentIndex).toBe(3);
+    });
+
+    it("ignores negative index", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.goToSlide(-1));
+      expect(result.current.currentIndex).toBe(0);
+    });
+
+    it("ignores index >= itemCount", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.goToSlide(5));
+      expect(result.current.currentIndex).toBe(0);
+    });
+
+    it("navigates to first slide (index 0)", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.goToSlide(3));
+      act(() => result.current.goToSlide(0));
+      expect(result.current.currentIndex).toBe(0);
+    });
+
+    it("navigates to last valid slide", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.goToSlide(4));
+      expect(result.current.currentIndex).toBe(4);
+    });
+  });
+
+  describe("Touch gesture handling", () => {
+    it("sets isSwiping to true on touch start", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
+      expect(result.current.isSwiping).toBe(true);
+    });
+
+    it("tracks swipe offset during touch move", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
+      act(() => result.current.handleTouchMove(makeTouchEvent(150)));
+      expect(result.current.swipeOffset).toBe(-50);
+    });
+
+    it("does not track move when not swiping", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      // Don't call handleTouchStart, so isSwiping is false
+      act(() => result.current.handleTouchMove(makeTouchEvent(150)));
+      expect(result.current.swipeOffset).toBe(0);
+    });
+
+    it("resets swipeOffset and isSwiping on touch end", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
+      act(() => result.current.handleTouchMove(makeTouchEvent(210)));
+      act(() => result.current.handleTouchEnd());
+      expect(result.current.swipeOffset).toBe(0);
+      expect(result.current.isSwiping).toBe(false);
+    });
+
+    it("triggers prevSlide on right swipe exceeding threshold", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({ ...defaultConfig, swipeThreshold: 0.01 })
+      );
+      // Start at slide 2 so prevSlide can go back
+      act(() => result.current.goToSlide(2));
+      act(() => result.current.handleTouchStart(makeTouchEvent(100)));
+      act(() => result.current.handleTouchMove(makeTouchEvent(300)));
+      act(() => result.current.handleTouchEnd());
+      expect(result.current.currentIndex).toBe(1);
+    });
+
+    it("triggers nextSlide on left swipe exceeding threshold", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({ ...defaultConfig, swipeThreshold: 0.01 })
+      );
+      act(() => result.current.handleTouchStart(makeTouchEvent(300)));
+      act(() => result.current.handleTouchMove(makeTouchEvent(100)));
+      act(() => result.current.handleTouchEnd());
+      expect(result.current.currentIndex).toBe(1);
+    });
+
+    it("does not change slide when swipe is below threshold", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({ ...defaultConfig, swipeThreshold: 0.99 })
+      );
+      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
+      act(() => result.current.handleTouchMove(makeTouchEvent(195)));
+      act(() => result.current.handleTouchEnd());
+      expect(result.current.currentIndex).toBe(0);
+    });
+  });
+
+  describe("Auto-scroll", () => {
+    it("auto-scrolls to next slide at configured interval", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({
+          itemCount: 5,
+          enableAutoScroll: true,
+          autoScrollInterval: 3000,
+        })
+      );
+      expect(result.current.currentIndex).toBe(0);
+      act(() => jest.advanceTimersByTime(3000));
+      expect(result.current.currentIndex).toBe(1);
+      act(() => jest.advanceTimersByTime(3000));
+      expect(result.current.currentIndex).toBe(2);
+    });
+
+    it("does not auto-scroll when enableAutoScroll is false", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({
+          itemCount: 5,
+          enableAutoScroll: false,
+          autoScrollInterval: 3000,
+        })
+      );
+      act(() => jest.advanceTimersByTime(10000));
+      expect(result.current.currentIndex).toBe(0);
+    });
+
+    it("does not auto-scroll when autoScrollInterval is 0", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({
+          itemCount: 5,
+          enableAutoScroll: true,
+          autoScrollInterval: 0,
+        })
+      );
+      act(() => jest.advanceTimersByTime(10000));
+      expect(result.current.currentIndex).toBe(0);
+    });
+
+    it("does not auto-scroll when itemCount is 0", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({
+          itemCount: 0,
+          enableAutoScroll: true,
+          autoScrollInterval: 3000,
+        })
+      );
+      act(() => jest.advanceTimersByTime(10000));
+      expect(result.current.currentIndex).toBe(0);
+    });
+
+    it("pauses auto-scroll on touch start", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({
+          itemCount: 5,
+          enableAutoScroll: true,
+          autoScrollInterval: 3000,
+        })
+      );
+      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
+      act(() => jest.advanceTimersByTime(10000));
+      // Should still be at 0 because auto-scroll was paused
+      // (though the initial interval may have already ticked)
+      expect(result.current.isSwiping).toBe(true);
+    });
+
+    it("restarts auto-scroll after touch end when enabled", () => {
+      const { result } = renderHook(() =>
+        useCarouselSwipe({
+          itemCount: 5,
+          enableAutoScroll: true,
+          autoScrollInterval: 3000,
+        })
+      );
+      // Touch interaction
+      act(() => result.current.handleTouchStart(makeTouchEvent(200)));
+      act(() => result.current.handleTouchEnd());
+      // After touch end, auto-scroll should restart
+      act(() => jest.advanceTimersByTime(3000));
+      expect(result.current.currentIndex).toBeGreaterThan(0);
+    });
+
+    it("cleans up interval on unmount", () => {
+      const clearIntervalSpy = jest.spyOn(global, "clearInterval");
+      const { unmount } = renderHook(() =>
+        useCarouselSwipe({
+          itemCount: 5,
+          enableAutoScroll: true,
+          autoScrollInterval: 3000,
+        })
+      );
+      unmount();
+      expect(clearIntervalSpy).toHaveBeenCalled();
+      clearIntervalSpy.mockRestore();
+    });
+  });
+
+  describe("Responsive behavior", () => {
+    it("detects mobile viewport", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 500,
+      });
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      expect(result.current.isMobile).toBe(true);
+    });
+
+    it("detects desktop viewport", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 1024,
+      });
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      expect(result.current.isMobile).toBe(false);
+    });
+
+    it("updates isMobile on resize", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 1024,
+      });
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      expect(result.current.isMobile).toBe(false);
+
+      act(() => {
+        Object.defineProperty(window, "innerWidth", {
+          writable: true,
+          value: 500,
+        });
+        window.dispatchEvent(new Event("resize"));
+      });
+      expect(result.current.isMobile).toBe(true);
+    });
+
+    it("updates containerWidth on resize", () => {
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const initialWidth = result.current.containerWidth;
+      act(() => {
+        Object.defineProperty(window, "innerWidth", {
+          writable: true,
+          value: 800,
+        });
+        window.dispatchEvent(new Event("resize"));
+      });
+      // containerRef is null so falls back to window.innerWidth
+      expect(result.current.containerWidth).toBe(800);
+    });
+
+    it("uses custom mobileBreakpoint", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 900,
+      });
+      const { result } = renderHook(() =>
+        useCarouselSwipe({ ...defaultConfig, mobileBreakpoint: 1024 })
+      );
+      expect(result.current.isMobile).toBe(true);
+    });
+
+    it("removes resize listeners on unmount", () => {
+      const removeEventListenerSpy = jest.spyOn(window, "removeEventListener");
+      const { unmount } = renderHook(() => useCarouselSwipe(defaultConfig));
+      unmount();
+      const resizeCalls = removeEventListenerSpy.mock.calls.filter(
+        call => call[0] === "resize"
+      );
+      expect(resizeCalls.length).toBeGreaterThanOrEqual(2); // containerWidth + isMobile
+      removeEventListenerSpy.mockRestore();
+    });
+  });
+});