@kadconsulting/dry/dist/src/components/CardCarousel/CardCarousel.test.js

KAD Reusable Component Library

import { jsx as _jsx } from "react/jsx-runtime";
import { render, fireEvent, act, screen } from '@testing-library/react';
import CardCarousel from './CardCarousel';
// Mock the useWindowSize hook
jest.mock('../../hooks/useWindowSize', () => ({
    __esModule: true,
    default: () => ({ width: 1024, height: 768 }),
}));
describe('<CardCarousel />', () => {
    const mockCards = [
        _jsx("div", { children: "Card 1" }, '1'),
        _jsx("div", { children: "Card 2" }, '2'),
        _jsx("div", { children: "Card 3" }, '3'),
        _jsx("div", { children: "Card 4" }, '4'),
        _jsx("div", { children: "Card 5" }, '5'),
    ];
    it('renders the correct initial cards', () => {
        const { getByText, queryByText } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, "data-testid": 'card-carousel' }));
        expect(getByText('Card 1')).toBeInTheDocument();
        expect(getByText('Card 2')).toBeInTheDocument();
        expect(getByText('Card 3')).toBeInTheDocument();
        expect(queryByText('Card 4')).not.toBeInTheDocument();
    });
    it('navigates to the next cards when clicking next button', () => {
        const { getByText, queryByText } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, "data-testid": 'card-carousel' }));
        fireEvent.click(screen.getByRole('button', { name: /forward/i }));
        expect(queryByText('Card 1')).not.toBeInTheDocument();
        expect(getByText('Card 2')).toBeInTheDocument();
        expect(getByText('Card 3')).toBeInTheDocument();
        expect(getByText('Card 4')).toBeInTheDocument();
    });
    it('navigates to the previous cards when clicking previous button', () => {
        const { getByText, queryByText } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, "data-testid": 'card-carousel' }));
        fireEvent.click(screen.getByRole('button', { name: /forward/i }));
        fireEvent.click(screen.getByRole('button', { name: /back/i }));
        expect(getByText('Card 1')).toBeInTheDocument();
        expect(getByText('Card 2')).toBeInTheDocument();
        expect(getByText('Card 3')).toBeInTheDocument();
        expect(queryByText('Card 4')).not.toBeInTheDocument();
    });
    it('disables previous button on first card', () => {
        render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, "data-testid": 'card-carousel' }));
        const prevButton = screen.getByRole('button', { name: /back/i });
        expect(prevButton).toHaveClass('dry-card-carousel__button--disabled');
    });
    it('disables next button on last card', () => {
        render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, "data-testid": 'card-carousel' }));
        fireEvent.click(screen.getByRole('button', { name: /forward/i }));
        fireEvent.click(screen.getByRole('button', { name: /forward/i }));
        const nextButton = screen.getByRole('button', { name: /forward/i });
        expect(nextButton).toHaveClass('dry-card-carousel__button--disabled');
    });
    it('renders bubble selectors when bubbleSelector prop is true', () => {
        render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, bubbleSelector: true, "data-testid": 'card-carousel' }));
        const bubbles = screen.getAllByRole('button');
        expect(bubbles).toHaveLength(3); // 5 cards, 3 display count = 3 bubbles
    });
    it('navigates to the correct cards when clicking a bubble', () => {
        const { getByText, queryByText } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, bubbleSelector: true, "data-testid": 'card-carousel' }));
        const bubbles = screen.getAllByRole('button');
        fireEvent.click(bubbles[2]);
        expect(queryByText('Card 1')).not.toBeInTheDocument();
        expect(queryByText('Card 2')).not.toBeInTheDocument();
        expect(getByText('Card 3')).toBeInTheDocument();
        expect(getByText('Card 4')).toBeInTheDocument();
        expect(getByText('Card 5')).toBeInTheDocument();
    });
    it('positions buttons at the bottom when buttonsBottom is true', () => {
        render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, buttonsBottom: true, "data-testid": 'card-carousel' }));
        const buttonsContainer = screen
            .getByRole('button', { name: /forward/i })
            .closest('.dry-card-carousel__buttons');
        expect(buttonsContainer).toHaveClass('dry-card-carousel__buttons--bottom');
    });
    it('positions buttons as overlay when buttonsBottom is false', () => {
        render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, buttonsBottom: false, "data-testid": 'card-carousel' }));
        const buttonsContainer = screen
            .getByRole('button', { name: /forward/i })
            .closest('.dry-card-carousel__buttons');
        expect(buttonsContainer).toHaveClass('dry-card-carousel__buttons--overlay');
    });
    it('moves one card at a time when moveOneAtATime is true', () => {
        const { getByText, queryByText } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, moveOneAtATime: true, "data-testid": 'card-carousel' }));
        fireEvent.click(screen.getByRole('button', { name: /forward/i }));
        expect(queryByText('Card 1')).not.toBeInTheDocument();
        expect(getByText('Card 2')).toBeInTheDocument();
        expect(getByText('Card 3')).toBeInTheDocument();
        expect(getByText('Card 4')).toBeInTheDocument();
    });
    it('autoplays when autoplay prop is true', () => {
        jest.useFakeTimers();
        const { getByText, queryByText } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, autoplay: true, interval: 1000, "data-testid": 'card-carousel' }));
        act(() => {
            jest.advanceTimersByTime(1000);
        });
        expect(queryByText('Card 1')).not.toBeInTheDocument();
        expect(getByText('Card 2')).toBeInTheDocument();
        expect(getByText('Card 3')).toBeInTheDocument();
        expect(getByText('Card 4')).toBeInTheDocument();
        jest.useRealTimers();
    });
    it('pauses autoplay on mouse enter and resumes on mouse leave', () => {
        jest.useFakeTimers();
        const { getByText, queryByText, getByTestId } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, autoplay: true, interval: 1000, "data-testid": 'card-carousel' }));
        const carousel = getByTestId('card-carousel');
        fireEvent.mouseEnter(carousel);
        act(() => {
            jest.advanceTimersByTime(2000);
        });
        expect(getByText('Card 1')).toBeInTheDocument(); // Should not have moved
        fireEvent.mouseLeave(carousel);
        act(() => {
            jest.advanceTimersByTime(1000);
        });
        expect(queryByText('Card 1')).not.toBeInTheDocument(); // Should have moved now
        jest.useRealTimers();
    });
    it('responds to keyboard navigation', () => {
        const { getByText, queryByText } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, "data-testid": 'card-carousel' }));
        fireEvent.keyDown(window, { key: 'ArrowRight' });
        expect(queryByText('Card 1')).not.toBeInTheDocument();
        expect(getByText('Card 2')).toBeInTheDocument();
        fireEvent.keyDown(window, { key: 'ArrowLeft' });
        expect(getByText('Card 1')).toBeInTheDocument();
    });
    it('handles touch events for swiping', () => {
        const { getByText, queryByText, getByTestId } = render(_jsx(CardCarousel, { cards: mockCards, displayCount: 3, "data-testid": 'card-carousel' }));
        const carousel = getByTestId('card-carousel');
        fireEvent.touchStart(carousel, { touches: [{ clientX: 0 }] });
        fireEvent.touchEnd(carousel, { changedTouches: [{ clientX: -100 }] });
        expect(queryByText('Card 1')).not.toBeInTheDocument();
        expect(getByText('Card 2')).toBeInTheDocument();
    });
});
//# sourceMappingURL=CardCarousel.test.js.map