import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { render, screen } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';
describe('Tabs Components', () => {
    it('should  Tabs match snapshot', () => {
        const { asFragment } = render(_jsx(Tabs, {}));
        expect(asFragment()).toMatchSnapshot();
    });
    it('should  TabsList match snapshot', () => {
        const { asFragment } = render(_jsx(Tabs, { children: _jsx(TabsList, {}) }));
        expect(asFragment()).toMatchSnapshot();
    });
    it('should TabsContent  match snapshot', () => {
        const { asFragment } = render(_jsx(Tabs, { children: _jsx(TabsContent, { value: "tab1", children: "Content 1" }) }));
        expect(asFragment()).toMatchSnapshot();
    });
    it('should TabsTrigger match snapshot', () => {
        const { asFragment } = render(_jsx(Tabs, { children: _jsx(TabsList, { children: _jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }) }) }));
        expect(asFragment()).toMatchSnapshot();
    });
    it('renders basic tabs structure', () => {
        render(_jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" })] }), _jsx(TabsContent, { value: "tab1", children: "Content 1" }), _jsx(TabsContent, { value: "tab2", children: "Content 2" })] }));
        expect(screen.getByRole('tablist')).toBeInTheDocument();
        expect(screen.getAllByRole('tab')).toHaveLength(2);
        expect(screen.getByText('Content 1')).toBeInTheDocument();
    });
    it('activates when selected', async () => {
        render(_jsx(Tabs, { defaultValue: "tab1", children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" })] }) }));
        const firstTab = screen.getAllByRole('tab')[0];
        expect(firstTab).toHaveAttribute('data-state', 'active');
        await userEvent.click(screen.getByText('Tab 2'));
        expect(screen.getByText('Tab 2')).toHaveAttribute('data-state', 'active');
    });
    it('shows content when associated tab is active', async () => {
        render(_jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" })] }), _jsx(TabsContent, { value: "tab1", "data-testid": "content-1", children: "Content 1" }), _jsx(TabsContent, { value: "tab2", "data-testid": "content-2", children: "Content 2" })] }));
        // Check initial state
        expect(screen.getByTestId('content-1')).toHaveAttribute('data-state', 'active');
        expect(screen.getByTestId('content-2')).toHaveAttribute('data-state', 'inactive');
        // Switch tabs
        await userEvent.click(screen.getByText('Tab 2'));
        // Verify updated state
        expect(screen.getByTestId('content-1')).toHaveAttribute('data-state', 'inactive');
        expect(screen.getByTestId('content-2')).toHaveAttribute('data-state', 'active');
    });
});
//# sourceMappingURL=tabs.test.js.map