"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const ComponentShowcase_1 = require("../ComponentShowcase");
// Mock the accessibility system
jest.mock('../../accessibility/AccessibilitySystem', () => ({
    ...jest.requireActual('../../accessibility/AccessibilitySystem'),
    useAccessibility: () => ({
        analyzeComponent: jest.fn().mockResolvedValue({
            issues: [],
            score: 100,
        }),
    }),
}));
describe('ComponentShowcase', () => {
    beforeEach(() => {
        // Reset document zoom
        document.documentElement.style.zoom = '1';
    });
    it('renders the showcase with all components', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Check header
        expect(react_1.screen.getByText('Modern Component Showcase')).toBeInTheDocument();
        expect(react_1.screen.getByText(/A collection of modern, accessible components/)).toBeInTheDocument();
        // Check controls
        expect(react_1.screen.getByLabelText('Select Component')).toBeInTheDocument();
        expect(react_1.screen.getByLabelText('Preview Mode')).toBeInTheDocument();
        expect(react_1.screen.getByText('Keyboard Shortcuts (⌘H)')).toBeInTheDocument();
        expect(react_1.screen.getByText('Accessibility Details (⌘A)')).toBeInTheDocument();
        // Check tabs
        expect(react_1.screen.getByText('Preview (1)')).toBeInTheDocument();
        expect(react_1.screen.getByText('Code (2)')).toBeInTheDocument();
        expect(react_1.screen.getByText('Accessibility (3)')).toBeInTheDocument();
        expect(react_1.screen.getByText('Keyboard (4)')).toBeInTheDocument();
        // Check initial component (Button)
        expect(react_1.screen.getByText('Button Preview')).toBeInTheDocument();
        expect(react_1.screen.getByText('Primary Button')).toBeInTheDocument();
    });
    it('switches between components', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Select Input component
        react_1.fireEvent.change(react_1.screen.getByLabelText('Select Component'), {
            target: { value: 'input' },
        });
        // Check if Input component is displayed
        expect(react_1.screen.getByText('Input Preview')).toBeInTheDocument();
        expect(react_1.screen.getByLabelText('Username')).toBeInTheDocument();
        // Select Select component
        react_1.fireEvent.change(react_1.screen.getByLabelText('Select Component'), {
            target: { value: 'select' },
        });
        // Check if Select component is displayed
        expect(react_1.screen.getByText('Select Preview')).toBeInTheDocument();
        expect(react_1.screen.getByLabelText('Country')).toBeInTheDocument();
        // Select Checkbox component
        react_1.fireEvent.change(react_1.screen.getByLabelText('Select Component'), {
            target: { value: 'checkbox' },
        });
        // Check if Checkbox component is displayed
        expect(react_1.screen.getByText('Checkbox Preview')).toBeInTheDocument();
        expect(react_1.screen.getByLabelText('Accept terms and conditions')).toBeInTheDocument();
    });
    it('switches between preview modes', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        const previewModeSelect = react_1.screen.getByLabelText('Preview Mode');
        // Test all preview modes
        const modes = [
            'normal',
            'colorblind-protanopia',
            'colorblind-deuteranopia',
            'colorblind-tritanopia',
            'high-contrast-light',
            'high-contrast-dark',
            'screen-reader',
            'reduced-motion',
            'focus-visible',
            'keyboard-only',
            'zoom-200',
            'zoom-300',
            'grayscale',
        ];
        modes.forEach(mode => {
            react_1.fireEvent.change(previewModeSelect, { target: { value: mode } });
            expect(previewModeSelect).toHaveValue(mode);
            // Check if preview mode description is displayed
            const description = react_1.screen.getByText(new RegExp(mode.replace('-', ' '), 'i'));
            expect(description).toBeInTheDocument();
        });
        // Test zoom levels
        react_1.fireEvent.change(previewModeSelect, { target: { value: 'zoom-200' } });
        expect(document.documentElement.style.zoom).toBe('2');
        react_1.fireEvent.change(previewModeSelect, { target: { value: 'zoom-300' } });
        expect(document.documentElement.style.zoom).toBe('3');
        // Reset zoom
        react_1.fireEvent.change(previewModeSelect, { target: { value: 'normal' } });
        expect(document.documentElement.style.zoom).toBe('1');
    });
    it('switches between tabs', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Check initial tab
        expect(react_1.screen.getByText('Button Preview')).toBeInTheDocument();
        // Switch to Code tab
        react_1.fireEvent.click(react_1.screen.getByText('Code (2)'));
        expect(react_1.screen.getByText('Example Code')).toBeInTheDocument();
        // Switch to Accessibility tab
        react_1.fireEvent.click(react_1.screen.getByText('Accessibility (3)'));
        expect(react_1.screen.getByText('Accessibility Information')).toBeInTheDocument();
        // Switch to Keyboard tab
        react_1.fireEvent.click(react_1.screen.getByText('Keyboard (4)'));
        expect(react_1.screen.getByText('Keyboard Navigation')).toBeInTheDocument();
    });
    it('handles keyboard shortcuts', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Test tab switching shortcuts
        (0, react_1.act)(() => {
            react_1.fireEvent.keyDown(document, { key: '1' });
        });
        expect(react_1.screen.getByText('Button Preview')).toBeInTheDocument();
        (0, react_1.act)(() => {
            react_1.fireEvent.keyDown(document, { key: '2' });
        });
        expect(react_1.screen.getByText('Example Code')).toBeInTheDocument();
        (0, react_1.act)(() => {
            react_1.fireEvent.keyDown(document, { key: '3' });
        });
        expect(react_1.screen.getByText('Accessibility Information')).toBeInTheDocument();
        (0, react_1.act)(() => {
            react_1.fireEvent.keyDown(document, { key: '4' });
        });
        expect(react_1.screen.getByText('Keyboard Navigation')).toBeInTheDocument();
        // Test keyboard shortcuts modal
        (0, react_1.act)(() => {
            react_1.fireEvent.keyDown(document, { key: 'h', ctrlKey: true });
        });
        expect(react_1.screen.getByText('Keyboard Shortcuts')).toBeInTheDocument();
        // Test accessibility details toggle
        (0, react_1.act)(() => {
            react_1.fireEvent.keyDown(document, { key: 'a', ctrlKey: true });
        });
        // Add assertions for accessibility details visibility
    });
    it('toggles keyboard shortcuts modal', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Open modal
        react_1.fireEvent.click(react_1.screen.getByText('Keyboard Shortcuts (⌘H)'));
        expect(react_1.screen.getByText('Keyboard Shortcuts')).toBeInTheDocument();
        // Close modal
        react_1.fireEvent.click(react_1.screen.getByText('Close'));
        expect(react_1.screen.queryByText('Keyboard Shortcuts')).not.toBeInTheDocument();
    });
    it('displays preview mode descriptions', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        const previewModeSelect = react_1.screen.getByLabelText('Preview Mode');
        const modes = [
            'normal',
            'colorblind-protanopia',
            'colorblind-deuteranopia',
            'colorblind-tritanopia',
            'high-contrast-light',
            'high-contrast-dark',
            'screen-reader',
            'reduced-motion',
            'focus-visible',
            'keyboard-only',
            'zoom-200',
            'zoom-300',
            'grayscale',
        ];
        modes.forEach(mode => {
            react_1.fireEvent.change(previewModeSelect, { target: { value: mode } });
            const description = react_1.screen.getByText(new RegExp(mode.replace('-', ' '), 'i'));
            expect(description).toBeInTheDocument();
        });
    });
    it('maintains dark mode support', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Check for dark mode classes
        const mainElement = react_1.screen.getByRole('main');
        expect(mainElement).toHaveClass('dark:bg-gray-900');
        const header = react_1.screen.getByRole('banner');
        expect(header).toHaveClass('dark:bg-gray-800');
        const previewSection = react_1.screen.getByText('Button Preview').closest('div');
        expect(previewSection).toHaveClass('dark:bg-gray-800');
    });
    it('handles keyboard navigation', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Focus the component selector
        const componentSelect = react_1.screen.getByLabelText('Select Component');
        componentSelect.focus();
        expect(componentSelect).toHaveFocus();
        // Navigate through options
        react_1.fireEvent.keyDown(componentSelect, { key: 'ArrowDown' });
        expect(componentSelect).toHaveValue('input');
        // Focus the preview mode selector
        const previewModeSelect = react_1.screen.getByLabelText('Preview Mode');
        previewModeSelect.focus();
        expect(previewModeSelect).toHaveFocus();
        // Navigate through options
        react_1.fireEvent.keyDown(previewModeSelect, { key: 'ArrowDown' });
        expect(previewModeSelect).toHaveValue('colorblind');
    });
    it('displays accessibility information', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Check footer
        expect(react_1.screen.getByText(/Built with accessibility in mind/)).toBeInTheDocument();
        expect(react_1.screen.getByText(/WCAG 2.2 AA compliant/)).toBeInTheDocument();
        // Check component accessibility features
        const button = react_1.screen.getByText('Primary Button');
        expect(button).toHaveAttribute('role', 'button');
        // Switch to Input component
        react_1.fireEvent.change(react_1.screen.getByLabelText('Select Component'), {
            target: { value: 'input' },
        });
        const input = react_1.screen.getByLabelText('Username');
        expect(input).toHaveAttribute('aria-invalid', 'false');
    });
    it('handles responsive layout', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Check responsive classes
        const mainGrid = react_1.screen.getByRole('main').querySelector('.grid');
        expect(mainGrid).toHaveClass('grid-cols-1', 'lg:grid-cols-2');
        const controlsGrid = react_1.screen.getByRole('main').querySelector('.grid-cols-1.md\\:grid-cols-2');
        expect(controlsGrid).toBeInTheDocument();
    });
    it('maintains component state during preview mode changes', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Select Input component and interact with it
        react_1.fireEvent.change(react_1.screen.getByLabelText('Select Component'), {
            target: { value: 'input' },
        });
        const input = react_1.screen.getByLabelText('Username');
        react_1.fireEvent.change(input, { target: { value: 'testuser' } });
        expect(input).toHaveValue('testuser');
        // Change preview mode
        react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
            target: { value: 'high-contrast-light' },
        });
        // Check if input value is maintained
        expect(input).toHaveValue('testuser');
    });
    it('handles keyboard navigation in preview modes', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Test keyboard-only mode
        react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
            target: { value: 'keyboard-only' },
        });
        // Focus the component selector
        const componentSelect = react_1.screen.getByLabelText('Select Component');
        componentSelect.focus();
        expect(componentSelect).toHaveFocus();
        // Navigate through options
        react_1.fireEvent.keyDown(componentSelect, { key: 'ArrowDown' });
        expect(componentSelect).toHaveValue('input');
        // Test focus-visible mode
        react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
            target: { value: 'focus-visible' },
        });
        // Check if focus styles are enhanced
        componentSelect.focus();
        expect(componentSelect).toHaveClass('focus:ring-2');
    });
    it('provides proper ARIA labels and roles', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Check main landmarks
        expect(react_1.screen.getByRole('banner')).toBeInTheDocument();
        expect(react_1.screen.getByRole('main')).toBeInTheDocument();
        expect(react_1.screen.getByRole('contentinfo')).toBeInTheDocument();
        expect(react_1.screen.getByRole('navigation', { name: 'Tabs' })).toBeInTheDocument();
        // Check form controls
        expect(react_1.screen.getByLabelText('Select Component')).toHaveAttribute('id', 'component-select');
        expect(react_1.screen.getByLabelText('Preview Mode')).toHaveAttribute('id', 'preview-mode');
        // Check headings hierarchy
        const headings = react_1.screen.getAllByRole('heading');
        expect(headings[0]).toHaveTextContent('Modern Component Showcase');
        expect(headings[1]).toHaveTextContent(/Preview$/);
    });
    it('handles reduced motion mode', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Enable reduced motion mode
        react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
            target: { value: 'reduced-motion' },
        });
        // Check if motion is reduced
        expect(document.documentElement).toHaveClass('preview-reduced-motion');
    });
    it('handles screen reader mode', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Enable screen reader mode
        react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
            target: { value: 'screen-reader' },
        });
        // Check if screen reader optimizations are applied
        expect(document.documentElement).toHaveClass('preview-screen-reader');
    });
    it('handles colorblind modes', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        const colorblindModes = [
            'colorblind-protanopia',
            'colorblind-deuteranopia',
            'colorblind-tritanopia',
        ];
        colorblindModes.forEach(mode => {
            react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
                target: { value: mode },
            });
            expect(document.documentElement).toHaveClass(`preview-${mode}`);
        });
    });
    it('handles high contrast modes', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        const highContrastModes = [
            'high-contrast-light',
            'high-contrast-dark',
        ];
        highContrastModes.forEach(mode => {
            react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
                target: { value: mode },
            });
            expect(document.documentElement).toHaveClass(`preview-${mode}`);
        });
    });
    it('handles grayscale mode', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
            target: { value: 'grayscale' },
        });
        expect(document.documentElement).toHaveClass('preview-grayscale');
    });
    it('cleans up preview mode styles on unmount', () => {
        const { unmount } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ComponentShowcase_1.ComponentShowcase, {}));
        // Apply a preview mode
        react_1.fireEvent.change(react_1.screen.getByLabelText('Preview Mode'), {
            target: { value: 'high-contrast-light' },
        });
        // Unmount component
        unmount();
        // Check if styles are cleaned up
        expect(document.documentElement.style.zoom).toBe('1');
        expect(document.documentElement).not.toHaveClass('preview-high-contrast-light');
    });
});
//# sourceMappingURL=ComponentShowcase.test.js.map