"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 AccessibleButton component
 */
const react_1 = __importDefault(require("react"));
const react_2 = require("@testing-library/react");
const AccessibilitySystem_1 = require("../../accessibility/AccessibilitySystem");
const AccessibleButton_1 = __importDefault(require("../AccessibleButton"));
// Mock the accessibility services
jest.mock('@bluefly/llmcli/services/accessibility-validation-service', () => ({
    AccessibilityValidationService: jest.fn().mockImplementation(() => ({
        validateAccessibilityStandards: jest.fn().mockResolvedValue([]),
        generateReport: jest.fn().mockResolvedValue(''),
    })),
}));
jest.mock('@bluefly/llmcli/services/component-analyzer', () => ({
    ComponentAnalyzer: {
        getInstance: jest.fn().mockReturnValue({
            analyzeComponent: jest.fn().mockResolvedValue({
                issues: [],
                suggestions: [],
            }),
        }),
    },
}));
jest.mock('@bluefly/llmcli/services/css-variables-analyzer', () => ({
    CSSVariablesAnalyzer: {
        getInstance: jest.fn().mockReturnValue({
            analyzeCSSVariables: jest.fn().mockResolvedValue({
                variables: new Map(),
                issues: [],
            }),
        }),
    },
}));
jest.mock('@bluefly/llmcli/services/css-in-js-analyzer', () => ({
    CSSInJSAnalyzer: {
        getInstance: jest.fn().mockReturnValue({
            analyzeComponent: jest.fn().mockResolvedValue([]),
        }),
    },
}));
describe('AccessibleButton', () => {
    const renderButton = (props = {}) => {
        return (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibilitySystem_1.AccessibilityProvider, { children: (0, jsx_runtime_1.jsx)(AccessibleButton_1.default, { ...props, children: "Click me" }) }));
    };
    it('renders with default props', () => {
        renderButton();
        const button = react_2.screen.getByRole('button', { name: /click me/i });
        expect(button).toBeInTheDocument();
        expect(button).toHaveClass('accessible-button');
    });
    it('applies variant styles', () => {
        renderButton({ variant: 'primary' });
        const button = react_2.screen.getByRole('button');
        expect(button).toHaveStyle({
            backgroundColor: 'var(--color-primary)',
            color: 'var(--color-primary-contrast)',
        });
    });
    it('applies size styles', () => {
        renderButton({ size: 'lg' });
        const button = react_2.screen.getByRole('button');
        expect(button).toHaveStyle({
            padding: '1rem 2rem',
            fontSize: '1.125rem',
        });
    });
    it('handles loading state', () => {
        renderButton({ isLoading: true });
        const button = react_2.screen.getByRole('button');
        expect(button).toBeDisabled();
        expect(button).toHaveAttribute('aria-busy', 'true');
        expect(react_2.screen.getByRole('status')).toBeInTheDocument();
    });
    it('handles disabled state', () => {
        renderButton({ disabled: true });
        const button = react_2.screen.getByRole('button');
        expect(button).toBeDisabled();
        expect(button).toHaveAttribute('aria-disabled', 'true');
        expect(button).toHaveStyle({ opacity: 0.6 });
    });
    it('handles full width', () => {
        renderButton({ fullWidth: true });
        const button = react_2.screen.getByRole('button');
        expect(button).toHaveStyle({ width: '100%' });
    });
    it('renders with icons', () => {
        const leftIcon = (0, jsx_runtime_1.jsx)("span", { "data-testid": "left-icon", children: "\u2190" });
        const rightIcon = (0, jsx_runtime_1.jsx)("span", { "data-testid": "right-icon", children: "\u2192" });
        renderButton({ leftIcon, rightIcon });
        expect(react_2.screen.getByTestId('left-icon')).toBeInTheDocument();
        expect(react_2.screen.getByTestId('right-icon')).toBeInTheDocument();
        expect(react_2.screen.getByTestId('left-icon')).toHaveAttribute('aria-hidden', 'true');
        expect(react_2.screen.getByTestId('right-icon')).toHaveAttribute('aria-hidden', 'true');
    });
    it('handles click events', () => {
        const handleClick = jest.fn();
        renderButton({ onClick: handleClick });
        react_2.fireEvent.click(react_2.screen.getByRole('button'));
        expect(handleClick).toHaveBeenCalledTimes(1);
    });
    it('does not trigger click when disabled', () => {
        const handleClick = jest.fn();
        renderButton({ onClick: handleClick, disabled: true });
        react_2.fireEvent.click(react_2.screen.getByRole('button'));
        expect(handleClick).not.toHaveBeenCalled();
    });
    it('does not trigger click when loading', () => {
        const handleClick = jest.fn();
        renderButton({ onClick: handleClick, isLoading: true });
        react_2.fireEvent.click(react_2.screen.getByRole('button'));
        expect(handleClick).not.toHaveBeenCalled();
    });
    it('applies custom className', () => {
        renderButton({ className: 'custom-class' });
        const button = react_2.screen.getByRole('button');
        expect(button).toHaveClass('custom-class');
    });
    it('forwards ref', () => {
        const ref = react_1.default.createRef();
        renderButton({ ref });
        expect(ref.current).toBeInstanceOf(HTMLButtonElement);
    });
    it('displays accessibility issues when present', async () => {
        const mockIssues = [
            {
                criterion: '1.4.3',
                severity: 'error',
                message: 'Insufficient color contrast',
                selector: '.accessible-button',
                property: 'color',
                value: '#FF0000',
                fix: 'Use a darker color for better contrast',
            },
        ];
        // Mock the component analyzer to return issues
        const mockComponentAnalyzer = require('@bluefly/llmcli/services/component-analyzer').ComponentAnalyzer.getInstance();
        mockComponentAnalyzer.analyzeComponent.mockResolvedValueOnce({
            issues: mockIssues,
            suggestions: [],
        });
        renderButton();
        // Wait for the accessibility analysis to complete
        const issue = await react_2.screen.findByText('Insufficient color contrast');
        expect(issue).toBeInTheDocument();
        expect(react_2.screen.getByText('Use a darker color for better contrast')).toBeInTheDocument();
    });
    it('handles keyboard navigation', () => {
        renderButton();
        const button = react_2.screen.getByRole('button');
        // Focus the button
        button.focus();
        expect(button).toHaveFocus();
        // Press Enter
        react_2.fireEvent.keyDown(button, { key: 'Enter' });
        expect(button).toHaveFocus();
        // Press Space
        react_2.fireEvent.keyDown(button, { key: ' ' });
        expect(button).toHaveFocus();
    });
    it('maintains focus styles', () => {
        renderButton({ variant: 'primary' });
        const button = react_2.screen.getByRole('button');
        // Focus the button
        button.focus();
        expect(button).toHaveStyle({
            outline: '2px solid var(--color-primary-light)',
            outlineOffset: '2px',
        });
    });
});
//# sourceMappingURL=AccessibleButton.test.js.map