"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const TailwindTabs_1 = require("../components/modern/TailwindTabs");
describe('TailwindTabs', () => {
    test('renders correctly with default props', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { children: [(0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabList, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 2" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 3" })] }), (0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 2" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 3" })] })] }));
        // Tab list is rendered
        const tabList = react_1.screen.getByRole('tablist');
        expect(tabList).toBeInTheDocument();
        // All tabs are rendered
        const tabs = react_1.screen.getAllByRole('tab');
        expect(tabs).toHaveLength(3);
        expect(tabs[0]).toHaveTextContent('Tab 1');
        expect(tabs[1]).toHaveTextContent('Tab 2');
        expect(tabs[2]).toHaveTextContent('Tab 3');
        // First tab is selected by default
        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
        expect(tabs[2]).toHaveAttribute('aria-selected', 'false');
        // First panel is visible
        const visiblePanel = react_1.screen.getByRole('tabpanel');
        expect(visiblePanel).toHaveTextContent('Content 1');
        // Other panels are not in the DOM
        expect(react_1.screen.queryByText('Content 2')).not.toBeInTheDocument();
        expect(react_1.screen.queryByText('Content 3')).not.toBeInTheDocument();
    });
    test('switches tabs when clicked', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { children: [(0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabList, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 2" })] }), (0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 2" })] })] }));
        const tabs = react_1.screen.getAllByRole('tab');
        // Click second tab
        react_1.fireEvent.click(tabs[1]);
        // Second tab should be selected
        expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
        // Second panel should be visible
        const visiblePanel = react_1.screen.getByRole('tabpanel');
        expect(visiblePanel).toHaveTextContent('Content 2');
        // First panel should not be in the DOM
        expect(react_1.screen.queryByText('Content 1')).not.toBeInTheDocument();
    });
    test('handles onChange callback', () => {
        const handleChange = jest.fn();
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { onChange: handleChange, children: [(0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabList, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 2" })] }), (0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 2" })] })] }));
        const tabs = react_1.screen.getAllByRole('tab');
        // Click second tab
        react_1.fireEvent.click(tabs[1]);
        // onChange should be called with index 1
        expect(handleChange).toHaveBeenCalledWith(1);
    });
    test('respects defaultIndex prop', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { defaultIndex: 1, children: [(0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabList, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 2" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 3" })] }), (0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 2" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 3" })] })] }));
        const tabs = react_1.screen.getAllByRole('tab');
        // Second tab should be selected by default
        expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
        expect(tabs[2]).toHaveAttribute('aria-selected', 'false');
        // Second panel should be visible
        const visiblePanel = react_1.screen.getByRole('tabpanel');
        expect(visiblePanel).toHaveTextContent('Content 2');
    });
    test('handles disabled tabs', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { children: [(0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabList, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { isDisabled: true, children: "Tab 2" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 3" })] }), (0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 2" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 3" })] })] }));
        const tabs = react_1.screen.getAllByRole('tab');
        // Second tab should be disabled
        expect(tabs[1]).toBeDisabled();
        // Try to click disabled tab
        react_1.fireEvent.click(tabs[1]);
        // First tab should still be selected
        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
        // First panel should still be visible
        const visiblePanel = react_1.screen.getByRole('tabpanel');
        expect(visiblePanel).toHaveTextContent('Content 1');
    });
    test('handles keyboard navigation in horizontal orientation', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { children: [(0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabList, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 2" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 3" })] }), (0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 2" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 3" })] })] }));
        const tabs = react_1.screen.getAllByRole('tab');
        // Tab 1 is focused initially
        tabs[0].focus();
        // Press right arrow
        react_1.fireEvent.keyDown(document.activeElement || document.body, { key: 'ArrowRight' });
        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
        // Press right arrow again
        react_1.fireEvent.keyDown(document.activeElement || document.body, { key: 'ArrowRight' });
        expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
        // Press right arrow again (should cycle back to first tab)
        react_1.fireEvent.keyDown(document.activeElement || document.body, { key: 'ArrowRight' });
        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
        // Press left arrow
        react_1.fireEvent.keyDown(document.activeElement || document.body, { key: 'ArrowLeft' });
        expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
        // Press Home key
        react_1.fireEvent.keyDown(document.activeElement || document.body, { key: 'Home' });
        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
        // Press End key
        react_1.fireEvent.keyDown(document.activeElement || document.body, { key: 'End' });
        expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
    });
    test('applies correct classes for different variants', () => {
        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { variant: "underline", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabList, { "data-testid": "tablist", children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { "data-testid": "tab", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanels, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }) })] }));
        // Check underline variant
        let tablist = react_1.screen.getByTestId('tablist');
        let tab = react_1.screen.getByTestId('tab');
        expect(tablist).toHaveClass('border-b');
        expect(tab).toHaveClass('border-b-2');
        // Check enclosed variant
        rerender((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { variant: "enclosed", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabList, { "data-testid": "tablist", children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { "data-testid": "tab", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanels, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }) })] }));
        tablist = react_1.screen.getByTestId('tablist');
        tab = react_1.screen.getByTestId('tab');
        expect(tablist).toHaveClass('bg-gray-100');
        expect(tab).toHaveClass('bg-white');
        // Check soft-rounded variant
        rerender((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { variant: "soft-rounded", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabList, { "data-testid": "tablist", children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { "data-testid": "tab", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanels, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }) })] }));
        tablist = react_1.screen.getByTestId('tablist');
        tab = react_1.screen.getByTestId('tab');
        expect(tablist).toHaveClass('gap-1');
        expect(tab).toHaveClass('rounded-full');
        // Check solid-rounded variant
        rerender((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { variant: "solid-rounded", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabList, { "data-testid": "tablist", children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { "data-testid": "tab", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanels, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }) })] }));
        tablist = react_1.screen.getByTestId('tablist');
        tab = react_1.screen.getByTestId('tab');
        expect(tablist).toHaveClass('gap-1');
        expect(tab).toHaveClass('rounded-full');
        expect(tab).toHaveClass('bg-primary-600');
    });
    test('applies correct classes for different sizes', () => {
        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { size: "sm", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabList, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { "data-testid": "tab", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanels, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }) })] }));
        // Check small size
        let tab = react_1.screen.getByTestId('tab');
        expect(tab).toHaveClass('px-3', 'py-1.5', 'text-sm');
        // Check medium size
        rerender((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { size: "md", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabList, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { "data-testid": "tab", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanels, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }) })] }));
        tab = react_1.screen.getByTestId('tab');
        expect(tab).toHaveClass('px-4', 'py-2', 'text-base');
        // Check large size
        rerender((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { size: "lg", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabList, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { "data-testid": "tab", children: "Tab 1" }) }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanels, { children: (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }) })] }));
        tab = react_1.screen.getByTestId('tab');
        expect(tab).toHaveClass('px-6', 'py-3', 'text-lg');
    });
    test('supports vertical orientation', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { orientation: "vertical", children: [(0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabList, { "data-testid": "tablist", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { "data-testid": "tab", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 2" })] }), (0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabPanels, { "data-testid": "tabpanels", children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 2" })] })] }));
        const container = react_1.screen.getByRole('tablist').parentElement;
        const tablist = react_1.screen.getByTestId('tablist');
        const tabpanels = react_1.screen.getByTestId('tabpanels');
        // Container should have flex-row layout
        expect(container).toHaveClass('flex-row');
        // Tablist should have flex-col layout
        expect(tablist).toHaveClass('flex-col');
        // Tabpanels should have left padding
        expect(tabpanels).toHaveClass('pl-4');
    });
    test('supports manual tab activation', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(TailwindTabs_1.TailwindTabs, { isManual: true, children: [(0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabList, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.Tab, { children: "Tab 2" })] }), (0, jsx_runtime_1.jsxs)(TailwindTabs_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 1" }), (0, jsx_runtime_1.jsx)(TailwindTabs_1.TabPanel, { children: "Content 2" })] })] }));
        const tabs = react_1.screen.getAllByRole('tab');
        // Focus second tab (shouldn't change selection in manual mode)
        tabs[1].focus();
        // First tab should still be selected
        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
        // Click second tab (should change selection)
        react_1.fireEvent.click(tabs[1]);
        // Second tab should now be selected
        expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
    });
});
//# sourceMappingURL=TailwindTabs.test.js.map