"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const react_2 = require("@chakra-ui/react");
const AccessibilityChecker_1 = require("../AccessibilityChecker");
const useAccessibilityChecker_1 = require("../../../hooks/useAccessibilityChecker");
// Mock the useAccessibilityChecker hook
jest.mock('../../../hooks/useAccessibilityChecker');
const mockResults = [
    {
        criterion: '1.1.1',
        severity: 'error',
        message: 'Image missing alt text',
        details: 'The image element has no alt attribute',
        fix: 'Add alt="description" to the image',
        aiSuggestions: ['Consider adding descriptive alt text for screen readers']
    },
    {
        criterion: '1.4.3',
        severity: 'warning',
        message: 'Insufficient color contrast',
        details: 'Text color #999999 on white background',
        fix: 'Use a darker text color',
        aiSuggestions: ['Consider using #666666 for better contrast']
    }
];
const mockElement = document.createElement('div');
mockElement.innerHTML = '<img src="test.jpg"><p style="color: #999999">Low contrast text</p>';
describe('AccessibilityChecker', () => {
    beforeEach(() => {
        useAccessibilityChecker_1.useAccessibilityChecker.mockReturnValue({
            results: mockResults,
            isScanning: false,
            scan: jest.fn(),
            clearResults: jest.fn(),
            error: null
        });
    });
    const renderComponent = (props = {}) => {
        return (0, react_1.render)((0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(AccessibilityChecker_1.AccessibilityChecker, { targetElement: mockElement, autoScan: true, severity: "error", useAI: true, ...props }) }));
    };
    it('renders the accessibility checker with initial state', () => {
        renderComponent();
        expect(react_1.screen.getByText('Accessibility Checker')).toBeInTheDocument();
        expect(react_1.screen.getByText('2 issues found')).toBeInTheDocument();
        expect(react_1.screen.getByText('ERROR')).toBeInTheDocument();
    });
    it('expands and collapses the results panel', async () => {
        renderComponent();
        // Initially collapsed
        expect(react_1.screen.queryByText('Image missing alt text')).not.toBeInTheDocument();
        // Expand
        react_1.fireEvent.click(react_1.screen.getByText('Expand'));
        expect(react_1.screen.getByText('Image missing alt text')).toBeInTheDocument();
        expect(react_1.screen.getByText('Insufficient color contrast')).toBeInTheDocument();
        // Collapse
        react_1.fireEvent.click(react_1.screen.getByText('Collapse'));
        expect(react_1.screen.queryByText('Image missing alt text')).not.toBeInTheDocument();
    });
    it('displays AI suggestions when available', async () => {
        renderComponent();
        react_1.fireEvent.click(react_1.screen.getByText('Expand'));
        expect(react_1.screen.getByText('AI Suggestion: Consider adding descriptive alt text for screen readers')).toBeInTheDocument();
        expect(react_1.screen.getByText('AI Suggestion: Consider using #666666 for better contrast')).toBeInTheDocument();
    });
    it('shows scanning state', async () => {
        useAccessibilityChecker_1.useAccessibilityChecker.mockReturnValue({
            results: mockResults,
            isScanning: true,
            scan: jest.fn(),
            clearResults: jest.fn(),
            error: null
        });
        renderComponent();
        expect(react_1.screen.getByText('Scanning...')).toBeInTheDocument();
    });
    it('handles errors gracefully', async () => {
        useAccessibilityChecker_1.useAccessibilityChecker.mockReturnValue({
            results: [],
            isScanning: false,
            scan: jest.fn(),
            clearResults: jest.fn(),
            error: new Error('Scan failed')
        });
        renderComponent();
        expect(react_1.screen.getByText('Scan Failed')).toBeInTheDocument();
    });
    it('triggers scan on button click', async () => {
        const mockScan = jest.fn();
        useAccessibilityChecker_1.useAccessibilityChecker.mockReturnValue({
            results: mockResults,
            isScanning: false,
            scan: mockScan,
            clearResults: jest.fn(),
            error: null
        });
        renderComponent();
        react_1.fireEvent.click(react_1.screen.getByText('Scan Now'));
        await (0, react_1.waitFor)(() => {
            expect(mockScan).toHaveBeenCalled();
        });
    });
    it('displays different severity levels correctly', () => {
        renderComponent();
        react_1.fireEvent.click(react_1.screen.getByText('Expand'));
        const errorBadge = react_1.screen.getByText('ERROR');
        const warningBadge = react_1.screen.getByText('WARNING');
        expect(errorBadge).toHaveStyle({ color: 'red.500' });
        expect(warningBadge).toHaveStyle({ color: 'orange.500' });
    });
    it('updates when results change', async () => {
        const { rerender } = renderComponent();
        const newResults = [
            {
                criterion: '2.1.1',
                severity: 'error',
                message: 'Keyboard accessibility issue',
                details: 'Element not focusable',
                fix: 'Add tabindex="0"',
                aiSuggestions: ['Make the element keyboard focusable']
            }
        ];
        useAccessibilityChecker_1.useAccessibilityChecker.mockReturnValue({
            results: newResults,
            isScanning: false,
            scan: jest.fn(),
            clearResults: jest.fn(),
            error: null
        });
        rerender((0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(AccessibilityChecker_1.AccessibilityChecker, { targetElement: mockElement, autoScan: true, severity: "error", useAI: true }) }));
        react_1.fireEvent.click(react_1.screen.getByText('Expand'));
        expect(react_1.screen.getByText('Keyboard accessibility issue')).toBeInTheDocument();
        expect(react_1.screen.getByText('1 issue found')).toBeInTheDocument();
    });
});
//# sourceMappingURL=AccessibilityChecker.test.js.map