"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Tests for the AccessibleTabs component
 */
const react_1 = __importDefault(require("react"));
const react_2 = require("@testing-library/react");
const AccessibleTabs_1 = require("../AccessibleTabs");
// Mock the accessibility system
jest.mock('../accessibility/AccessibilitySystem', () => ({
    useAccessibility: () => ({
        analyzeComponent: jest.fn().mockResolvedValue({
            issues: [],
            score: 100,
        }),
    }),
}));
describe('AccessibleTabs', () => {
    const defaultProps = {
        id: 'test-tabs',
        items: [
            {
                id: 'tab1',
                label: 'Tab 1',
                content: 'Content 1',
                description: 'Description for tab 1',
            },
            {
                id: 'tab2',
                label: 'Tab 2',
                content: 'Content 2',
                description: 'Description for tab 2',
            },
            {
                id: 'tab3',
                label: 'Tab 3',
                content: 'Content 3',
                description: 'Description for tab 3',
                isDisabled: true,
            },
        ],
    };
    it('renders with basic props', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps }));
        // Check if tabs are rendered
        expect(react_2.screen.getByText('Tab 1')).toBeInTheDocument();
        expect(react_2.screen.getByText('Tab 2')).toBeInTheDocument();
        expect(react_2.screen.getByText('Tab 3')).toBeInTheDocument();
        // Check if first tab is selected by default
        expect(react_2.screen.getByText('Content 1')).toBeInTheDocument();
        expect(react_2.screen.queryByText('Content 2')).not.toBeVisible();
        expect(react_2.screen.queryByText('Content 3')).not.toBeVisible();
    });
    it('handles controlled value', () => {
        const onTabChange = jest.fn();
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, selectedTabId: "tab2", onTabChange: onTabChange }));
        // Check if second tab is selected
        expect(react_2.screen.getByText('Content 2')).toBeInTheDocument();
        expect(react_2.screen.queryByText('Content 1')).not.toBeVisible();
        // Change selection
        react_2.fireEvent.click(react_2.screen.getByText('Tab 1'));
        expect(onTabChange).toHaveBeenCalledWith('tab1');
    });
    it('handles uncontrolled value with defaultSelectedTabId', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, defaultSelectedTabId: "tab2" }));
        expect(react_2.screen.getByText('Content 2')).toBeInTheDocument();
    });
    it('handles disabled state', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isDisabled: true }));
        // Check if all tabs are disabled
        const tabs = react_2.screen.getAllByRole('button');
        tabs.forEach(tab => {
            expect(tab).toBeDisabled();
        });
    });
    it('handles individual disabled tabs', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps }));
        // Check if only Tab 3 is disabled
        expect(react_2.screen.getByText('Tab 1')).not.toBeDisabled();
        expect(react_2.screen.getByText('Tab 2')).not.toBeDisabled();
        expect(react_2.screen.getByText('Tab 3')).toBeDisabled();
    });
    it('handles vertical layout', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isVertical: true }));
        // Check if tabs container has vertical layout class
        const tabsContainer = react_2.screen.getByRole('navigation').querySelector('.bfui-tabs-list');
        expect(tabsContainer).toHaveAttribute('data-orientation', 'vertical');
    });
    it('handles custom class names', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, className: "custom-tabs", tabListClassName: "custom-list", tabClassName: "custom-tab", tabPanelClassName: "custom-panel" }));
        // Check if custom classes are applied
        expect(react_2.screen.getByRole('navigation')).toHaveClass('custom-tabs');
        expect(react_2.screen.getByRole('navigation').querySelector('.bfui-tabs-list')).toHaveClass('custom-list');
        expect(react_2.screen.getByText('Tab 1')).toHaveClass('custom-tab');
        expect(react_2.screen.getByText('Content 1').parentElement).toHaveClass('custom-panel');
    });
    it('forwards ref', () => {
        const ref = react_1.default.createRef();
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, ref: ref }));
        expect(ref.current).toBeInstanceOf(HTMLDivElement);
    });
    it('maintains focus styles', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps }));
        // Focus first tab
        const firstTab = react_2.screen.getByText('Tab 1');
        firstTab.focus();
        // Check if focus styles are applied
        expect(firstTab).toHaveFocus();
    });
    it('handles dark mode styles', () => {
        // Add dark mode class to document
        document.documentElement.classList.add('dark');
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps }));
        // Check if dark mode classes are applied
        expect(react_2.screen.getByRole('navigation')).toHaveClass('dark:bg-gray-800');
        expect(react_2.screen.getByText('Tab 1')).toHaveClass('dark:text-gray-200');
        // Clean up
        document.documentElement.classList.remove('dark');
    });
    it('provides proper ARIA attributes', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, ariaLabel: "Test Tabs", ariaDescribedby: "tabs-desc", tabPanelAriaLabel: "Tab Panel", tabPanelAriaDescribedby: "panel-desc" }));
        const tabsContainer = react_2.screen.getByRole('navigation');
        // Check ARIA attributes
        expect(tabsContainer).toHaveAttribute('aria-label', 'Test Tabs');
        expect(tabsContainer).toHaveAttribute('aria-describedby', 'tabs-desc');
        // Check tab panel ARIA attributes
        const tabPanel = react_2.screen.getByText('Content 1').parentElement;
        expect(tabPanel).toHaveAttribute('aria-label', 'Tab Panel');
        expect(tabPanel).toHaveAttribute('aria-describedby', 'panel-desc');
    });
    it('handles keyboard navigation', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps }));
        // Focus first tab
        const firstTab = react_2.screen.getByText('Tab 1');
        firstTab.focus();
        // Navigate to next tab with arrow right
        react_2.fireEvent.keyDown(firstTab, { key: 'ArrowRight' });
        expect(react_2.screen.getByText('Tab 2')).toHaveFocus();
        // Navigate to previous tab with arrow left
        react_2.fireEvent.keyDown(react_2.screen.getByText('Tab 2'), { key: 'ArrowLeft' });
        expect(firstTab).toHaveFocus();
        // Navigate to first tab with Home
        react_2.fireEvent.keyDown(react_2.screen.getByText('Tab 2'), { key: 'Home' });
        expect(firstTab).toHaveFocus();
        // Navigate to last tab with End
        react_2.fireEvent.keyDown(firstTab, { key: 'End' });
        expect(react_2.screen.getByText('Tab 3')).toHaveFocus();
    });
    it('handles vertical keyboard navigation', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isVertical: true }));
        // Focus first tab
        const firstTab = react_2.screen.getByText('Tab 1');
        firstTab.focus();
        // Navigate to next tab with arrow down
        react_2.fireEvent.keyDown(firstTab, { key: 'ArrowDown' });
        expect(react_2.screen.getByText('Tab 2')).toHaveFocus();
        // Navigate to previous tab with arrow up
        react_2.fireEvent.keyDown(react_2.screen.getByText('Tab 2'), { key: 'ArrowUp' });
        expect(firstTab).toHaveFocus();
    });
    it('displays accessibility issues', async () => {
        // Mock accessibility analysis to return issues
        jest.spyOn(require('../accessibility/AccessibilitySystem').useAccessibility(), 'analyzeComponent')
            .mockResolvedValueOnce({
            issues: ['Issue 1', 'Issue 2'],
            score: 80,
        });
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps }));
        // Wait for accessibility issues to be displayed
        const issues = await react_2.screen.findByText('Accessibility Issues:');
        expect(issues).toBeInTheDocument();
        expect(react_2.screen.getByText('Issue 1')).toBeInTheDocument();
        expect(react_2.screen.getByText('Issue 2')).toBeInTheDocument();
    });
    it('handles tab changes', () => {
        const onTabChange = jest.fn();
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, onTabChange: onTabChange }));
        // Click second tab
        react_2.fireEvent.click(react_2.screen.getByText('Tab 2'));
        expect(onTabChange).toHaveBeenCalledWith('tab2');
        expect(react_2.screen.getByText('Content 2')).toBeInTheDocument();
        // Click first tab
        react_2.fireEvent.click(react_2.screen.getByText('Tab 1'));
        expect(onTabChange).toHaveBeenCalledWith('tab1');
        expect(react_2.screen.getByText('Content 1')).toBeInTheDocument();
    });
    it('maintains component state during prop changes', () => {
        const { rerender } = (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, selectedTabId: "tab1" }));
        // Check initial selection
        expect(react_2.screen.getByText('Content 1')).toBeInTheDocument();
        // Change selection
        rerender((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, selectedTabId: "tab2" }));
        expect(react_2.screen.getByText('Content 2')).toBeInTheDocument();
        // Change back to initial selection
        rerender((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, selectedTabId: "tab1" }));
        expect(react_2.screen.getByText('Content 1')).toBeInTheDocument();
    });
    it('handles loading state', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isLoading: true }));
        // Check if loading state is applied
        expect(react_2.screen.getByRole('navigation')).toHaveClass('bfui-tabs-loading');
        expect(react_2.screen.getByRole('navigation')).toHaveAttribute('data-loading', 'true');
    });
    it('handles tab icons', () => {
        const items = [
            {
                id: 'tab1',
                label: 'Tab 1',
                content: 'Content 1',
                icon: (0, jsx_runtime_1.jsx)("span", { "data-testid": "icon", children: "\uD83D\uDE80" }),
            },
        ];
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, items: items, showIcons: true }));
        // Check if icon is rendered
        expect(react_2.screen.getByTestId('icon')).toBeInTheDocument();
        expect(react_2.screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true');
    });
    it('handles tab descriptions', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, showDescriptions: true }));
        // Check if descriptions are rendered
        expect(react_2.screen.getByText('Description for tab 1')).toBeInTheDocument();
        expect(react_2.screen.getByText('Description for tab 2')).toBeInTheDocument();
        expect(react_2.screen.getByText('Description for tab 3')).toBeInTheDocument();
    });
    it('handles compact tabs', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isCompact: true }));
        expect(react_2.screen.getByRole('navigation')).toHaveClass('bfui-tabs-compact');
    });
    it('handles filled tabs', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isFilled: true }));
        expect(react_2.screen.getByRole('navigation')).toHaveClass('bfui-tabs-filled');
    });
    it('handles outlined tabs', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isOutlined: true }));
        expect(react_2.screen.getByRole('navigation')).toHaveClass('bfui-tabs-outlined');
    });
    it('handles pill tabs', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isPill: true }));
        expect(react_2.screen.getByRole('navigation')).toHaveClass('bfui-tabs-pill');
    });
    it('handles animated tabs', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...defaultProps, isAnimated: true }));
        expect(react_2.screen.getByRole('navigation')).toHaveClass('bfui-tabs-animated');
    });
});
//# sourceMappingURL=AccessibleTabs.test.js.map