@times-components/ts-components 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4 → 1.145.1-d1253ed8e87e7cdf861fbf772a5f9026182434db.4

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

@@ -1,105 +0,0 @@
-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

@@ -1,438 +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.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);
-  });
-});