@times-components/ts-components 1.145.1-b32ea924749bafdf12e3e8515023538fa20e7808.3 → 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4

package/src/components/carousel-component/__tests__/DefaultNavigationArrow.test.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DefaultNavigationArrow } from '../DefaultNavigationArrow';
+
+describe('DefaultNavigationArrow', () => {
+  const mockOnClick = jest.fn();
+
+  beforeEach(() => {
+    mockOnClick.mockClear();
+  });
+
+  it('renders left arrow', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders right arrow', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="right"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const button = screen.getByLabelText('Next items');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClick when disabled', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={true}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    fireEvent.click(button);
+
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
+
+  it('applies disabled styling when disabled', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={true}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    expect(button).toHaveAttribute('disabled');
+  });
+
+  it('renders SVG icon', () => {
+    const { container } = render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('has correct aria-label for accessibility', () => {
+    const { rerender } = render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByLabelText('Previous items')).toBeInTheDocument();
+
+    rerender(
+      <DefaultNavigationArrow
+        direction="right"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByLabelText('Next items')).toBeInTheDocument();
+  });
+
+  it('renders as a button element', () => {
+    render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    const button = screen.getByLabelText('Previous items');
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('applies correct styles based on direction', () => {
+    const { container, rerender } = render(
+      <DefaultNavigationArrow
+        direction="left"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    let button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+
+    rerender(
+      <DefaultNavigationArrow
+        direction="right"
+        onClick={mockOnClick}
+        disabled={false}
+      />
+    );
+
+    button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+  });
+});

package/src/components/carousel-component/__tests__/DefaultPageDot.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DefaultPageDot } from '../DefaultPageDot';
+
+describe('DefaultPageDot', () => {
+  const mockOnClick = jest.fn();
+
+  beforeEach(() => {
+    mockOnClick.mockClear();
+  });
+
+  it('renders active dot', () => {
+    render(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders inactive dot', () => {
+    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders multiple dots with different indices', () => {
+    const { rerender } = render(
+      <DefaultPageDot active={true} onClick={mockOnClick} index={0} />
+    );
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    rerender(<DefaultPageDot active={false} onClick={mockOnClick} index={1} />);
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('handles active state changes', () => {
+    const { rerender } = render(
+      <DefaultPageDot active={false} onClick={mockOnClick} index={0} />
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+
+    rerender(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it('applies different styling for active vs inactive state', () => {
+    const { container, rerender } = render(
+      <DefaultPageDot active={false} onClick={mockOnClick} index={0} />
+    );
+
+    const inactiveButton = container.querySelector('button');
+    expect(inactiveButton).toBeInTheDocument();
+
+    rerender(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);
+
+    const activeButton = container.querySelector('button');
+    expect(activeButton).toBeInTheDocument();
+  });
+
+  it('renders as a button element', () => {
+    render(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('passes correct index to onClick handler', () => {
+    const { rerender } = render(
+      <DefaultPageDot active={false} onClick={mockOnClick} index={2} />
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+
+    rerender(<DefaultPageDot active={false} onClick={mockOnClick} index={5} />);
+
+    fireEvent.click(button);
+    expect(mockOnClick).toHaveBeenCalledTimes(2);
+  });
+
+  it('is focusable for keyboard navigation', () => {
+    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);
+
+    const button = screen.getByRole('button');
+    button.focus();
+    expect(document.activeElement).toBe(button);
+  });
+});

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

@@ -0,0 +1,438 @@
+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.handleMouseMove).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 handleMouseMove when not dragging', () => {
+    const { result } = renderHook(() => useCarousel(10, { itemsPerPage: 2 }));
+
+    const mockEvent = ({
+      preventDefault: jest.fn(),
+      pageX: 100
+    } as unknown) as React.MouseEvent;
+
+    act(() => {
+      result.current.handleMouseMove(mockEvent);
+    });
+
+    expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+  });
+
+  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 }));
+
+    act(() => {
+      result.current.handleMouseLeave();
+    });
+
+    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 mouseMoveEvent = ({
+      preventDefault: jest.fn(),
+      pageX: 150
+    } 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.handleMouseMove(mouseMoveEvent);
+    });
+
+    expect(mouseMoveEvent.preventDefault).toHaveBeenCalled();
+
+    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 = {
+      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');
+
+    act(() => {
+      result.current.handleMouseLeave();
+    });
+
+    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);
+  });
+});