"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const AccessibleSelect_1 = require("../AccessibleSelect");
const AccessibilitySystem_1 = require("../../accessibility/AccessibilitySystem");
// Mock the accessibility system
jest.mock('../../accessibility/AccessibilitySystem', () => ({
    useAccessibility: () => ({
        analyzeComponent: jest.fn().mockResolvedValue({
            issues: [
                {
                    message: 'Test accessibility issue',
                    severity: 'warning',
                },
            ],
        }),
    }),
    AccessibilityProvider: ({ children }) => (0, jsx_runtime_1.jsx)("div", { children: children }),
}));
const mockOptions = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2', disabled: true },
    { value: '3', label: 'Option 3', description: 'Description for option 3' },
    { value: '4', label: 'Option 4', group: 'Group A' },
    { value: '5', label: 'Option 5', group: 'Group A' },
    { value: '6', label: 'Option 6', group: 'Group B' },
];
describe('AccessibleSelect', () => {
    const renderSelect = (props = {}) => {
        return (0, react_1.render)((0, jsx_runtime_1.jsx)(AccessibilitySystem_1.AccessibilityProvider, { children: (0, jsx_runtime_1.jsx)(AccessibleSelect_1.AccessibleSelect, { label: "Test Select", options: mockOptions, id: "test-select", ...props }) }));
    };
    it('renders with basic props', () => {
        renderSelect();
        expect(react_1.screen.getByLabelText('Test Select')).toBeInTheDocument();
        expect(react_1.screen.getByRole('button')).toBeInTheDocument();
        expect(react_1.screen.getByText('Select an option')).toBeInTheDocument();
    });
    it('handles required state', () => {
        renderSelect({ required: true });
        expect(react_1.screen.getByText('*')).toBeInTheDocument();
    });
    it('displays helper text', () => {
        const helperText = 'This is helper text';
        renderSelect({ helperText });
        expect(react_1.screen.getByText(helperText)).toBeInTheDocument();
    });
    it('displays error message', () => {
        const error = 'This is an error';
        renderSelect({ error });
        expect(react_1.screen.getByText(error)).toBeInTheDocument();
        expect(react_1.screen.getByRole('button')).toHaveAttribute('aria-invalid', 'true');
    });
    it('opens dropdown on click', () => {
        renderSelect();
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
        expect(react_1.screen.getByText('Option 1')).toBeInTheDocument();
    });
    it('closes dropdown when clicking outside', () => {
        renderSelect();
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
        react_1.fireEvent.mouseDown(document.body);
        expect(react_1.screen.queryByRole('listbox')).not.toBeInTheDocument();
    });
    it('handles option selection', () => {
        const onChange = jest.fn();
        renderSelect({ onChange });
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        const option = react_1.screen.getByText('Option 1');
        react_1.fireEvent.click(option);
        expect(onChange).toHaveBeenCalledWith('1', mockOptions[0]);
        expect(react_1.screen.getByText('Option 1')).toBeInTheDocument();
        expect(react_1.screen.queryByRole('listbox')).not.toBeInTheDocument();
    });
    it('handles disabled options', () => {
        renderSelect();
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        const disabledOption = react_1.screen.getByText('Option 2');
        expect(disabledOption).toHaveClass('opacity-50');
        expect(disabledOption).toHaveClass('cursor-not-allowed');
        react_1.fireEvent.click(disabledOption);
        expect(react_1.screen.getByText('Select an option')).toBeInTheDocument();
    });
    it('handles searchable mode', () => {
        renderSelect({ searchable: true });
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        const searchInput = react_1.screen.getByRole('searchbox');
        expect(searchInput).toBeInTheDocument();
        react_1.fireEvent.change(searchInput, { target: { value: 'Option 1' } });
        expect(react_1.screen.getByText('Option 1')).toBeInTheDocument();
        expect(react_1.screen.queryByText('Option 2')).not.toBeInTheDocument();
    });
    it('displays option groups', () => {
        renderSelect();
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        expect(react_1.screen.getByText('Group A')).toBeInTheDocument();
        expect(react_1.screen.getByText('Group B')).toBeInTheDocument();
        expect(react_1.screen.getByText('Option 4')).toBeInTheDocument();
        expect(react_1.screen.getByText('Option 6')).toBeInTheDocument();
    });
    it('displays option descriptions', () => {
        renderSelect();
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        expect(react_1.screen.getByText('Description for option 3')).toBeInTheDocument();
    });
    it('handles loading state', () => {
        renderSelect({ isLoading: true });
        const button = react_1.screen.getByRole('button');
        expect(button).toBeDisabled();
        expect(react_1.screen.getByRole('status')).toBeInTheDocument();
        expect(react_1.screen.getByText('Loading...')).toBeInTheDocument();
    });
    it('handles icons', () => {
        const startIcon = (0, jsx_runtime_1.jsx)("span", { "data-testid": "start-icon", children: "\uD83D\uDD0D" });
        const endIcon = (0, jsx_runtime_1.jsx)("span", { "data-testid": "end-icon", children: "\u2713" });
        renderSelect({ startIcon, endIcon });
        expect(react_1.screen.getByTestId('start-icon')).toBeInTheDocument();
        expect(react_1.screen.getByTestId('end-icon')).toBeInTheDocument();
    });
    it('handles custom class names', () => {
        renderSelect({
            wrapperClassName: 'custom-wrapper',
            selectClassName: 'custom-select',
            labelClassName: 'custom-label',
            helperTextClassName: 'custom-helper',
            errorClassName: 'custom-error',
            dropdownClassName: 'custom-dropdown',
            searchClassName: 'custom-search',
            optionClassName: 'custom-option',
            groupClassName: 'custom-group',
        });
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        expect(button.parentElement?.parentElement).toHaveClass('custom-wrapper');
        expect(button).toHaveClass('custom-select');
        expect(react_1.screen.getByLabelText('Test Select')).toHaveClass('custom-label');
        expect(react_1.screen.getByRole('listbox')).toHaveClass('custom-dropdown');
        expect(react_1.screen.getByText('Group A')).toHaveClass('custom-group');
    });
    it('displays accessibility issues', async () => {
        renderSelect();
        await (0, react_1.waitFor)(() => {
            expect(react_1.screen.getByText('Accessibility Issues:')).toBeInTheDocument();
            expect(react_1.screen.getByText('Test accessibility issue')).toBeInTheDocument();
        });
    });
    it('handles keyboard navigation', () => {
        renderSelect();
        const button = react_1.screen.getByRole('button');
        button.focus();
        // Open dropdown with Enter
        react_1.fireEvent.keyDown(button, { key: 'Enter' });
        expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
        // Close dropdown with Escape
        react_1.fireEvent.keyDown(button, { key: 'Escape' });
        expect(react_1.screen.queryByRole('listbox')).not.toBeInTheDocument();
    });
    it('handles validation', async () => {
        const validate = (value) => value === '1' ? 'Option 1 is not allowed' : undefined;
        renderSelect({ validate });
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        const option = react_1.screen.getByText('Option 1');
        react_1.fireEvent.click(option);
        await (0, react_1.waitFor)(() => {
            expect(react_1.screen.getByText('Option 1 is not allowed')).toBeInTheDocument();
        });
    });
    it('maintains focus management', () => {
        renderSelect({ searchable: true });
        const button = react_1.screen.getByRole('button');
        react_1.fireEvent.click(button);
        const searchInput = react_1.screen.getByRole('searchbox');
        expect(document.activeElement).toBe(searchInput);
        const option = react_1.screen.getByText('Option 1');
        react_1.fireEvent.click(option);
        expect(document.activeElement).toBe(button);
    });
    it('handles dark mode styles', () => {
        // Mock dark mode
        document.documentElement.classList.add('dark');
        renderSelect();
        const button = react_1.screen.getByRole('button');
        expect(button).toHaveClass('dark:bg-gray-800');
        // Cleanup
        document.documentElement.classList.remove('dark');
    });
});
//# sourceMappingURL=AccessibleSelect.test.js.map