"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");
const react_1 = require("@testing-library/react");
const AccessibilityDemo_1 = __importDefault(require("../AccessibilityDemo"));
// Mock the accessibility components
jest.mock('../../accessibility/AccessibilitySystem', () => ({
    AccessibilityProvider: ({ children }) => (0, jsx_runtime_1.jsx)("div", { children: children }),
    AccessibilityChecker: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "accessibility-checker", children: "Checker" }),
    AccessibilityPreview: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "accessibility-preview", children: "Preview" }),
    AccessibilityScore: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "accessibility-score", children: "Score" }),
}));
jest.mock('../AccessibleButton', () => ({
    __esModule: true,
    default: ({ children, onClick, variant }) => ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: `accessible-button ${variant}`, "data-testid": "accessible-button", children: children })),
}));
describe('AccessibilityDemo', () => {
    it('renders the demo interface', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        // Check header
        expect(react_1.screen.getByText('Accessibility Demo')).toBeInTheDocument();
        expect(react_1.screen.getByText(/Explore our modern, accessible components/)).toBeInTheDocument();
        // Check sections
        expect(react_1.screen.getByText('Select Component')).toBeInTheDocument();
        expect(react_1.screen.getByText('Preview Mode')).toBeInTheDocument();
        expect(react_1.screen.getByText('Preview')).toBeInTheDocument();
        expect(react_1.screen.getByText('Accessibility Analysis')).toBeInTheDocument();
        expect(react_1.screen.getByText('Accessibility Score')).toBeInTheDocument();
        expect(react_1.screen.getByText('Component Source')).toBeInTheDocument();
    });
    it('renders all demo components', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        expect(react_1.screen.getByText('Button with Icons')).toBeInTheDocument();
        expect(react_1.screen.getByText('Loading Button')).toBeInTheDocument();
        expect(react_1.screen.getByText('Disabled Button')).toBeInTheDocument();
        expect(react_1.screen.getByText('Full Width Button')).toBeInTheDocument();
    });
    it('allows component selection', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        // Click on a different component
        react_1.fireEvent.click(react_1.screen.getByText('Loading Button'));
        // Check that the component source is updated
        expect(react_1.screen.getByText(/variant="secondary"/)).toBeInTheDocument();
        expect(react_1.screen.getByText(/isLoading/)).toBeInTheDocument();
    });
    it('allows preview mode selection', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        // Check initial mode
        expect(react_1.screen.getByText('Normal')).toHaveClass('primary');
        // Change mode
        react_1.fireEvent.click(react_1.screen.getByText('Colorblind'));
        expect(react_1.screen.getByText('Colorblind')).toHaveClass('primary');
        expect(react_1.screen.getByText('Normal')).toHaveClass('secondary');
    });
    it('renders accessibility components', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        expect(react_1.screen.getByTestId('accessibility-checker')).toBeInTheDocument();
        expect(react_1.screen.getByTestId('accessibility-preview')).toBeInTheDocument();
        expect(react_1.screen.getByTestId('accessibility-score')).toBeInTheDocument();
    });
    it('displays component source code', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        const sourceCode = react_1.screen.getByText(/<AccessibleButton/);
        expect(sourceCode).toBeInTheDocument();
        expect(sourceCode.parentElement).toHaveClass('source-code');
    });
    it('handles responsive layout', () => {
        // Mock window resize
        global.innerWidth = 500;
        global.dispatchEvent(new Event('resize'));
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        // Check that the layout adjusts
        const controls = react_1.screen.getByText('Select Component').closest('.demo-controls');
        expect(controls).toHaveStyle({ gridTemplateColumns: '1fr' });
    });
    it('maintains accessibility in preview modes', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        // Check that preview modes are accessible
        const previewModes = ['Normal', 'Colorblind', 'High Contrast', 'Screen Reader'];
        previewModes.forEach(mode => {
            const button = react_1.screen.getByText(mode);
            expect(button).toHaveAttribute('role', 'button');
            expect(button).not.toHaveAttribute('aria-hidden');
        });
    });
    it('provides keyboard navigation', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        // Focus the first component button
        const firstButton = react_1.screen.getByText('Button with Icons');
        firstButton.focus();
        // Press arrow keys to navigate
        react_1.fireEvent.keyDown(firstButton, { key: 'ArrowRight' });
        expect(react_1.screen.getByText('Loading Button')).toHaveFocus();
        react_1.fireEvent.keyDown(react_1.screen.getByText('Loading Button'), { key: 'ArrowRight' });
        expect(react_1.screen.getByText('Disabled Button')).toHaveFocus();
    });
    it('maintains focus management', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilityDemo_1.default, {}));
        // Click a component button
        react_1.fireEvent.click(react_1.screen.getByText('Loading Button'));
        // Check that focus is maintained
        expect(react_1.screen.getByText('Loading Button')).toHaveFocus();
        // Change preview mode
        react_1.fireEvent.click(react_1.screen.getByText('High Contrast'));
        expect(react_1.screen.getByText('High Contrast')).toHaveFocus();
    });
});
//# sourceMappingURL=AccessibilityDemo.test.js.map