@times-components/ts-components 1.146.2-be27d508c972211ad80599875cd69c63bf67d4b1.45 → 1.146.2-c9973aa4b92ab539c7e626ec928a64701390290d.3

package/src/components/carousel-component/hooks/__tests__/useCarousel.test.ts

@@ -1,625 +0,0 @@
-import React from 'react';
-import { renderHook, act } from '@testing-library/react-hooks';
-import { useCarousel } from '../useCarousel';
-
-describe('useCarousel', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  it('initializes with correct default values', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    expect(result.current.currentPage).toBe(0);
-    expect(result.current.totalPages).toBe(5);
-    expect(result.current.isScrolling).toBe(false);
-  });
-
-  it('calculates correct totalPages', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 3 }));
-
-    expect(result.current.totalPages).toBe(4);
-  });
-
-  it('provides navigation functions', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    expect(typeof result.current.handleNext).toBe('function');
-    expect(typeof result.current.handlePrevious).toBe('function');
-    expect(typeof result.current.scrollToPage).toBe('function');
-  });
-
-  it('provides mouse event handlers for drag functionality', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    expect(typeof result.current.handleMouseDown).toBe('function');
-    expect(typeof result.current.handleMouseUp).toBe('function');
-    expect(typeof result.current.handleMouseLeave).toBe('function');
-  });
-
-  it('handles single page correctly', () => {
-    const { result } = renderHook(() => useCarousel(2, { itemsPerPage: 2 }));
-
-    expect(result.current.totalPages).toBe(1);
-
-    act(() => {
-      result.current.handleNext();
-    });
-
-    expect(result.current.currentPage).toBe(0);
-  });
-
-  it('handles empty items', () => {
-    const { result } = renderHook(() => useCarousel(0, { itemsPerPage: 2 }));
-
-    expect(result.current.totalPages).toBe(0);
-    expect(result.current.currentPage).toBe(0);
-  });
-
-  it('updates totalPages when totalItems changes', () => {
-    const { result, rerender } = renderHook(
-      ({ total }) => useCarousel(total, { itemsPerPage: 2 }),
-      { initialProps: { total: 10 } }
-    );
-
-    expect(result.current.totalPages).toBe(5);
-
-    rerender({ total: 6 });
-
-    expect(result.current.totalPages).toBe(3);
-  });
-
-  it('cleans up timeout on unmount', () => {
-    const { unmount } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    unmount();
-
-    expect(jest.getTimerCount()).toBe(0);
-  });
-
-  it('defaults to itemsPerPage of 2 when not provided', () => {
-    const { result } = renderHook(() => useCarousel(10, {}));
-
-    expect(result.current.totalPages).toBe(5);
-  });
-
-  it('handles itemsPerPage of 1', () => {
-    const { result } = renderHook(() => useCarousel(5, { itemsPerPage: 1 }));
-
-    expect(result.current.totalPages).toBe(5);
-  });
-
-  it('handles large number of items', () => {
-    const { result } = renderHook(() =>
-      useCarousel(1000, { itemsPerPage: 10 })
-    );
-
-    expect(result.current.totalPages).toBe(100);
-  });
-
-  it('handles odd number of items with even itemsPerPage', () => {
-    const { result } = renderHook(() => useCarousel(5, { itemsPerPage: 2 }));
-
-    expect(result.current.totalPages).toBe(3);
-  });
-
-  it('provides carouselRef', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    expect(result.current.carouselRef).toBeDefined();
-    expect(typeof result.current.carouselRef).toBe('object');
-  });
-
-  it('updates when itemsPerPage option changes', () => {
-    const { result, rerender } = renderHook(
-      ({ itemsPerPage }) => useCarousel(10, { itemsPerPage }),
-      { initialProps: { itemsPerPage: 2 } }
-    );
-
-    expect(result.current.totalPages).toBe(5);
-
-    rerender({ itemsPerPage: 5 });
-
-    expect(result.current.totalPages).toBe(2);
-  });
-
-  it('handles itemsPerPage greater than total items', () => {
-    const { result } = renderHook(() => useCarousel(3, { itemsPerPage: 10 }));
-
-    expect(result.current.totalPages).toBe(1);
-  });
-
-  it('calls onPageChange when provided in options', () => {
-    const onPageChange = jest.fn();
-    const { result } = renderHook(() =>
-      useCarousel(10, { itemsPerPage: 2, onPageChange })
-    );
-
-    expect(result.current.currentPage).toBe(0);
-    expect(onPageChange).not.toHaveBeenCalled();
-  });
-
-  it('handles mouseDown without carouselRef', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockEvent = ({
-      preventDefault: jest.fn(),
-      pageX: 100
-    } as unknown) as React.MouseEvent;
-
-    expect(result.current.carouselRef.current).toBeNull();
-    act(() => {
-      result.current.handleMouseDown(mockEvent);
-    });
-
-    expect(mockEvent.preventDefault).not.toHaveBeenCalled();
-  });
-
-  it('calls onPageChange when scrolling to a page', () => {
-    const onPageChange = jest.fn();
-    const { result } = renderHook(() =>
-      useCarousel(10, { itemsPerPage: 2, onPageChange })
-    );
-
-    const mockCard1: Partial<HTMLElement> = { offsetLeft: 0 };
-    const mockCard2: Partial<HTMLElement> = { offsetLeft: 400 };
-    const mockChildren = [
-      mockCard1,
-      mockCard2,
-      mockCard1,
-      mockCard2,
-      mockCard1
-    ];
-
-    const mockCarousel = {
-      scrollLeft: 0,
-      children: mockChildren,
-      scrollTo: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.scrollToPage(1);
-      jest.runAllTimers();
-    });
-    expect(onPageChange).toHaveBeenCalledWith(1);
-    expect(mockCarousel.scrollTo).toHaveBeenCalled();
-  });
-
-  it('returns undefined cleanup when carousel is not mounted', () => {
-    const { result, unmount } = renderHook(() =>
-      useCarousel(10, { itemsPerPage: 2 })
-    );
-
-    expect(result.current.carouselRef.current).toBeNull();
-
-    unmount();
-  });
-
-  it('handles handleMouseUp when not dragging', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockEvent = ({
-      pageX: 100
-    } as unknown) as React.MouseEvent;
-
-    act(() => {
-      result.current.handleMouseUp(mockEvent);
-    });
-
-    expect(result.current.currentPage).toBe(0);
-  });
-
-  it('handles handleMouseLeave when not dragging', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockEvent = ({
-      pageX: 100
-    } as unknown) as React.MouseEvent;
-
-    act(() => {
-      result.current.handleMouseLeave(mockEvent);
-    });
-
-    expect(result.current.currentPage).toBe(0);
-  });
-
-  it('handles complete mouse drag interaction', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCarousel = {
-      scrollLeft: 0,
-      children: [],
-      scrollTo: jest.fn(),
-      style: { cursor: 'grab' },
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    const mouseDownEvent = ({
-      preventDefault: jest.fn(),
-      pageX: 200
-    } as unknown) as React.MouseEvent;
-
-    const mouseUpEvent = ({
-      pageX: 100
-    } as unknown) as React.MouseEvent;
-
-    act(() => {
-      result.current.handleMouseDown(mouseDownEvent);
-    });
-
-    expect(mouseDownEvent.preventDefault).toHaveBeenCalled();
-    expect(mockCarousel.style.cursor).toBe('grabbing');
-
-    act(() => {
-      result.current.handleMouseUp(mouseUpEvent);
-    });
-
-    expect(mockCarousel.style.cursor).toBe('grab');
-  });
-
-  it('handles mouseUp with small drag distance', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCarousel = {
-      scrollLeft: 0,
-      children: [],
-      scrollTo: jest.fn(),
-      style: { cursor: 'grab' },
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.handleMouseDown(({
-        preventDefault: jest.fn(),
-        pageX: 100
-      } as unknown) as React.MouseEvent);
-    });
-
-    act(() => {
-      result.current.handleMouseUp(({
-        pageX: 90
-      } as unknown) as React.MouseEvent);
-    });
-
-    expect(result.current.currentPage).toBe(0);
-  });
-
-  it('handles mouseLeave during active drag', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCarousel = {
-      scrollLeft: 0,
-      children: [],
-      scrollTo: jest.fn(),
-      style: { cursor: 'grab' },
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.handleMouseDown(({
-        preventDefault: jest.fn(),
-        pageX: 100
-      } as unknown) as React.MouseEvent);
-    });
-
-    expect(mockCarousel.style.cursor).toBe('grabbing');
-
-    const mouseLeaveEvent = ({
-      pageX: 120
-    } as unknown) as React.MouseEvent;
-
-    act(() => {
-      result.current.handleMouseLeave(mouseLeaveEvent);
-    });
-
-    expect(mockCarousel.style.cursor).toBe('grab');
-  });
-
-  it('scrollToPage handles case with no children', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCarousel = {
-      children: [],
-      scrollTo: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.scrollToPage(1);
-    });
-
-    expect(mockCarousel.scrollTo).not.toHaveBeenCalled();
-  });
-
-  it('handlePrevious and handleNext navigate correctly', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCards = Array.from({ length: 5 }, (_, i) => ({
-      offsetLeft: i * 200
-    })) as HTMLElement[];
-
-    const mockCarousel = {
-      children: mockCards,
-      scrollTo: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.handleNext();
-      jest.runAllTimers();
-    });
-
-    expect(result.current.currentPage).toBe(1);
-
-    act(() => {
-      result.current.handlePrevious();
-      jest.runAllTimers();
-    });
-
-    expect(result.current.currentPage).toBe(0);
-  });
-
-  it('drag triggers navigation', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCards = Array.from({ length: 5 }, (_, i) => ({
-      offsetLeft: i * 200
-    })) as HTMLElement[];
-
-    const mockCarousel = {
-      children: mockCards,
-      scrollTo: jest.fn(),
-      style: { cursor: 'grab' },
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.handleMouseDown(({
-        preventDefault: jest.fn(),
-        pageX: 200
-      } as unknown) as React.MouseEvent);
-    });
-
-    act(() => {
-      result.current.handleMouseUp(({
-        pageX: 100
-      } as unknown) as React.MouseEvent);
-    });
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(result.current.currentPage).toBe(1);
-  });
-
-  it('provides touch event handlers', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    expect(typeof result.current.handleTouchStart).toBe('function');
-    expect(typeof result.current.handleTouchMove).toBe('function');
-    expect(typeof result.current.handleTouchEnd).toBe('function');
-  });
-
-  it('handles touch swipe right to left (next)', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCards = Array.from({ length: 5 }, (_, i) => ({
-      offsetLeft: i * 200
-    })) as HTMLElement[];
-
-    const mockCarousel = {
-      children: mockCards,
-      scrollTo: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.handleTouchStart(({
-        touches: [{ clientX: 200 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    act(() => {
-      result.current.handleTouchMove(({
-        touches: [{ clientX: 150 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(result.current.currentPage).toBe(1);
-
-    act(() => {
-      result.current.handleTouchEnd();
-    });
-  });
-
-  it('handles touch swipe left to right (previous)', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCards = Array.from({ length: 5 }, (_, i) => ({
-      offsetLeft: i * 200
-    })) as HTMLElement[];
-
-    const mockCarousel = {
-      children: mockCards,
-      scrollTo: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    // First navigate to page 1
-    act(() => {
-      result.current.scrollToPage(1);
-      jest.runAllTimers();
-    });
-
-    expect(result.current.currentPage).toBe(1);
-
-    // Then swipe left to right (previous)
-    act(() => {
-      result.current.handleTouchStart(({
-        touches: [{ clientX: 100 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    act(() => {
-      result.current.handleTouchMove(({
-        touches: [{ clientX: 150 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(result.current.currentPage).toBe(0);
-
-    act(() => {
-      result.current.handleTouchEnd();
-    });
-  });
-
-  it('handles touch swipe with small distance (no navigation)', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCarousel = {
-      children: [],
-      scrollTo: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.handleTouchStart(({
-        touches: [{ clientX: 100 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    act(() => {
-      result.current.handleTouchMove(({
-        touches: [{ clientX: 115 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    expect(result.current.currentPage).toBe(0);
-
-    act(() => {
-      result.current.handleTouchEnd();
-    });
-  });
-
-  it('ignores touch move when no touch start', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCarousel = {
-      children: [],
-      scrollTo: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.handleTouchMove(({
-        touches: [{ clientX: 150 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    expect(result.current.currentPage).toBe(0);
-  });
-
-  it('ignores touch move when already swiping', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    const mockCards = Array.from({ length: 5 }, (_, i) => ({
-      offsetLeft: i * 200
-    })) as HTMLElement[];
-
-    const mockCarousel = {
-      children: mockCards,
-      scrollTo: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn()
-    };
-
-    (result.current.carouselRef as any).current = mockCarousel;
-
-    act(() => {
-      result.current.handleTouchStart(({
-        touches: [{ clientX: 200 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    act(() => {
-      result.current.handleTouchMove(({
-        touches: [{ clientX: 150 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    // Second touch move should be ignored
-    act(() => {
-      result.current.handleTouchMove(({
-        touches: [{ clientX: 100 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(result.current.currentPage).toBe(1);
-  });
-
-  it('handles touch start without carousel ref', () => {
-    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
-
-    (result.current.carouselRef as any).current = null;
-
-    act(() => {
-      result.current.handleTouchStart(({
-        touches: [{ clientX: 100 }]
-      } as unknown) as React.TouchEvent);
-    });
-
-    expect(result.current.currentPage).toBe(0);
-  });
-});