"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const TailwindCarousel_1 = require("../components/modern/TailwindCarousel");
// Mock slides data
const testSlides = [
    {
        id: 1,
        content: (0, jsx_runtime_1.jsx)("img", { src: "/test1.jpg", alt: "Test 1", "data-testid": "slide-1" }),
        caption: "Caption 1",
        thumbnail: "/thumb1.jpg"
    },
    {
        id: 2,
        content: (0, jsx_runtime_1.jsx)("img", { src: "/test2.jpg", alt: "Test 2", "data-testid": "slide-2" }),
        caption: "Caption 2",
        thumbnail: "/thumb2.jpg"
    },
    {
        id: 3,
        content: (0, jsx_runtime_1.jsx)("img", { src: "/test3.jpg", alt: "Test 3", "data-testid": "slide-3" }),
        caption: "Caption 3",
        thumbnail: "/thumb3.jpg"
    }
];
// Mock timer
jest.useFakeTimers();
describe('TailwindCarousel', () => {
    test('renders correctly with default props', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides }));
        // Carousel should be rendered
        const carousel = react_1.screen.getByRole('region', { name: /image carousel/i });
        expect(carousel).toBeInTheDocument();
        // First slide should be visible
        const slide1 = react_1.screen.getByTestId('slide-1');
        expect(slide1).toBeInTheDocument();
        expect(slide1.closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Other slides should not be visible when using slide effect
        const slide2Container = react_1.screen.getByTestId('slide-2').closest('[role="group"]');
        const slide3Container = react_1.screen.getByTestId('slide-3').closest('[role="group"]');
        expect(slide2Container).toHaveAttribute('aria-hidden', 'true');
        expect(slide3Container).toHaveAttribute('aria-hidden', 'true');
        // Caption should be rendered
        expect(react_1.screen.getByText('Caption 1')).toBeInTheDocument();
        // Navigation controls should be rendered
        const prevButton = react_1.screen.getByRole('button', { name: /previous slide/i });
        const nextButton = react_1.screen.getByRole('button', { name: /next slide/i });
        expect(prevButton).toBeInTheDocument();
        expect(nextButton).toBeInTheDocument();
        // Indicators should be rendered
        const indicators = react_1.screen.getAllByRole('button', { name: /go to slide/i });
        expect(indicators).toHaveLength(3);
    });
    test('supports initialSlide prop', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, initialSlide: 1 }));
        // Second slide should be visible
        const slide2 = react_1.screen.getByTestId('slide-2');
        expect(slide2.closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Other slides should not be visible
        const slide1Container = react_1.screen.getByTestId('slide-1').closest('[role="group"]');
        const slide3Container = react_1.screen.getByTestId('slide-3').closest('[role="group"]');
        expect(slide1Container).toHaveAttribute('aria-hidden', 'true');
        expect(slide3Container).toHaveAttribute('aria-hidden', 'true');
    });
    test('navigates to next and previous slides', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides }));
        // Initial state
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Navigate to next slide
        const nextButton = react_1.screen.getByRole('button', { name: /next slide/i });
        react_1.fireEvent.click(nextButton);
        // Second slide should be visible
        expect(react_1.screen.getByTestId('slide-2').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Navigate to next slide
        react_1.fireEvent.click(nextButton);
        // Third slide should be visible
        expect(react_1.screen.getByTestId('slide-3').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Navigate to previous slide
        const prevButton = react_1.screen.getByRole('button', { name: /previous slide/i });
        react_1.fireEvent.click(prevButton);
        // Second slide should be visible again
        expect(react_1.screen.getByTestId('slide-2').closest('[aria-hidden="false"]')).toBeInTheDocument();
    });
    test('loops with infinite prop', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, infinite: true }));
        // Navigate to previous slide from first slide (should go to last slide)
        const prevButton = react_1.screen.getByRole('button', { name: /previous slide/i });
        react_1.fireEvent.click(prevButton);
        // Last slide should be visible
        expect(react_1.screen.getByTestId('slide-3').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Navigate to next slide from last slide (should go to first slide)
        const nextButton = react_1.screen.getByRole('button', { name: /next slide/i });
        react_1.fireEvent.click(nextButton);
        react_1.fireEvent.click(nextButton);
        // First slide should be visible again
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
    });
    test('does not loop when infinite is false', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, infinite: false }));
        // Navigate to previous slide from first slide (should stay on first slide)
        const prevButton = react_1.screen.getByRole('button', { name: /previous slide/i });
        react_1.fireEvent.click(prevButton);
        // First slide should still be visible
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Navigate to last slide
        const nextButton = react_1.screen.getByRole('button', { name: /next slide/i });
        react_1.fireEvent.click(nextButton);
        react_1.fireEvent.click(nextButton);
        // Last slide should be visible
        expect(react_1.screen.getByTestId('slide-3').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Try to navigate past last slide (should stay on last slide)
        react_1.fireEvent.click(nextButton);
        // Last slide should still be visible
        expect(react_1.screen.getByTestId('slide-3').closest('[aria-hidden="false"]')).toBeInTheDocument();
    });
    test('navigates when clicking indicators', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides }));
        // Get indicators
        const indicators = react_1.screen.getAllByRole('button', { name: /go to slide/i });
        // Click on the third indicator
        react_1.fireEvent.click(indicators[2]);
        // Third slide should be visible
        expect(react_1.screen.getByTestId('slide-3').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Click on the first indicator
        react_1.fireEvent.click(indicators[0]);
        // First slide should be visible
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
    });
    test('auto-plays slides when autoPlay is true', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, autoPlay: true, interval: 2000 }));
        // Initially first slide is visible
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Advance time by interval
        (0, react_1.act)(() => {
            jest.advanceTimersByTime(2000);
        });
        // Second slide should now be visible
        expect(react_1.screen.getByTestId('slide-2').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Advance time again
        (0, react_1.act)(() => {
            jest.advanceTimersByTime(2000);
        });
        // Third slide should now be visible
        expect(react_1.screen.getByTestId('slide-3').closest('[aria-hidden="false"]')).toBeInTheDocument();
    });
    test('pauses auto-play on hover when pauseOnHover is true', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, autoPlay: true, interval: 2000, pauseOnHover: true }));
        // Initially first slide is visible
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Hover over the carousel
        const carousel = react_1.screen.getByRole('region', { name: /image carousel/i });
        react_1.fireEvent.mouseEnter(carousel);
        // Advance time by interval
        (0, react_1.act)(() => {
            jest.advanceTimersByTime(2000);
        });
        // First slide should still be visible (auto-play paused)
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Mouse leave
        react_1.fireEvent.mouseLeave(carousel);
        // Advance time by interval
        (0, react_1.act)(() => {
            jest.advanceTimersByTime(2000);
        });
        // Second slide should now be visible (auto-play resumed)
        expect(react_1.screen.getByTestId('slide-2').closest('[aria-hidden="false"]')).toBeInTheDocument();
    });
    test('supports keyboard navigation', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides }));
        // Initially first slide is visible
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Press right arrow key
        const carousel = react_1.screen.getByRole('region', { name: /image carousel/i });
        react_1.fireEvent.keyDown(carousel, { key: 'ArrowRight' });
        // Second slide should be visible
        expect(react_1.screen.getByTestId('slide-2').closest('[aria-hidden="false"]')).toBeInTheDocument();
        // Press left arrow key
        react_1.fireEvent.keyDown(carousel, { key: 'ArrowLeft' });
        // First slide should be visible again
        expect(react_1.screen.getByTestId('slide-1').closest('[aria-hidden="false"]')).toBeInTheDocument();
    });
    test('hides captions when showCaptions is false', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, showCaptions: false }));
        // Captions should not be rendered
        expect(react_1.screen.queryByText('Caption 1')).not.toBeInTheDocument();
    });
    test('hides controls when controls is "none"', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, controls: "none" }));
        // Navigation controls should not be rendered
        const prevButton = react_1.screen.queryByRole('button', { name: /previous slide/i });
        const nextButton = react_1.screen.queryByRole('button', { name: /next slide/i });
        expect(prevButton).not.toBeInTheDocument();
        expect(nextButton).not.toBeInTheDocument();
    });
    test('hides indicators when indicators is "none"', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, indicators: "none" }));
        // Indicators should not be rendered
        const indicators = react_1.screen.queryAllByRole('button', { name: /go to slide/i });
        expect(indicators).toHaveLength(0);
    });
    test('calls onChange when slide changes', () => {
        const handleChange = jest.fn();
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, onChange: handleChange }));
        // Navigate to next slide
        const nextButton = react_1.screen.getByRole('button', { name: /next slide/i });
        react_1.fireEvent.click(nextButton);
        // onChange should be called with the new index
        expect(handleChange).toHaveBeenCalledWith(1);
    });
    test('applies different effects correctly', () => {
        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, effect: "slide" }));
        // Slide effect should use transform for transitions
        let slidesContainer = react_1.screen.getByTestId('slide-1').closest('[class*="flex h-full w-full"]');
        expect(slidesContainer).toHaveClass('transition-transform');
        // Fade effect
        rerender((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, effect: "fade" }));
        // Fade effect should use opacity for transitions
        let slide1 = react_1.screen.getByTestId('slide-1').closest('[role="group"]');
        expect(slide1).toHaveClass('transition-opacity');
        // Zoom effect
        rerender((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, effect: "zoom" }));
        // Zoom effect should use scale for transitions
        slide1 = react_1.screen.getByTestId('slide-1').closest('[role="group"]');
        expect(slide1).toHaveClass('transition-all');
        expect(slide1).toHaveClass('scale-100');
    });
    test('applies different indicator types correctly', () => {
        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, indicators: "dots" }));
        // Dots indicators should be rendered
        let indicators = react_1.screen.getAllByRole('button', { name: /go to slide/i });
        expect(indicators[0]).toHaveClass('rounded-full');
        expect(indicators[0]).toHaveClass('w-3');
        expect(indicators[0]).toHaveClass('h-3');
        // Bars indicators
        rerender((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, indicators: "bars" }));
        indicators = react_1.screen.getAllByRole('button', { name: /go to slide/i });
        expect(indicators[0]).toHaveClass('h-1');
        expect(indicators[0]).toHaveClass('w-8');
        // Numbers indicators
        rerender((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, indicators: "numbers" }));
        indicators = react_1.screen.getAllByRole('button', { name: /go to slide/i });
        expect(indicators[0]).toHaveTextContent('1');
        expect(indicators[0]).toHaveClass('flex');
        expect(indicators[0]).toHaveClass('items-center');
        expect(indicators[0]).toHaveClass('justify-center');
    });
    test('applies aspect ratio correctly', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, aspectRatio: "16:9" }));
        // Container should have padding-top set based on aspect ratio
        const carousel = react_1.screen.getByRole('region', { name: /image carousel/i });
        // Calculate expected padding (9 / 16 * 100 = 56.25%)
        expect(carousel).toHaveStyle({ paddingTop: '56.25%' });
    });
    test('applies custom class names correctly', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindCarousel_1.TailwindCarousel, { slides: testSlides, className: "test-container-class", slideClassName: "test-slide-class", indicatorsClassName: "test-indicators-class", controlsClassName: "test-controls-class", captionClassName: "test-caption-class" }));
        // Container should have custom class
        const carousel = react_1.screen.getByRole('region', { name: /image carousel/i });
        expect(carousel).toHaveClass('test-container-class');
        // Slide should have custom class
        const slide = react_1.screen.getByTestId('slide-1').closest('[role="group"]');
        expect(slide).toHaveClass('test-slide-class');
        // Indicators container should have custom class
        const indicatorsContainer = react_1.screen.getAllByRole('button', { name: /go to slide/i })[0].parentElement;
        expect(indicatorsContainer).toHaveClass('test-indicators-class');
        // Controls should have custom class
        const control = react_1.screen.getByRole('button', { name: /next slide/i });
        expect(control).toHaveClass('test-controls-class');
        // Caption should have custom class
        const caption = react_1.screen.getByText('Caption 1').closest('div');
        expect(caption).toHaveClass('test-caption-class');
    });
});
//# sourceMappingURL=TailwindCarousel.test.js.map