@windstream/react-shared-components 0.1.92 → 0.1.94

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

@@ -0,0 +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();
+    });
+  });
+});