"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 AccessibleInput component
 */
const react_1 = __importDefault(require("react"));
const react_2 = require("@testing-library/react");
const AccessibleInput_1 = require("../AccessibleInput");
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 }),
}));
describe('AccessibleInput', () => {
    const renderInput = (props = {}) => {
        return (0, react_2.render)((0, jsx_runtime_1.jsx)(AccessibilitySystem_1.AccessibilityProvider, { children: (0, jsx_runtime_1.jsx)(AccessibleInput_1.AccessibleInput, { label: "Test Input", id: "test-input", ...props }) }));
    };
    it('renders with basic props', () => {
        renderInput();
        expect(react_2.screen.getByLabelText('Test Input')).toBeInTheDocument();
        expect(react_2.screen.getByRole('textbox')).toBeInTheDocument();
    });
    it('handles required state', () => {
        renderInput({ required: true });
        const input = react_2.screen.getByRole('textbox');
        expect(input).toBeRequired();
        expect(react_2.screen.getByText('*')).toBeInTheDocument();
    });
    it('displays helper text', () => {
        const helperText = 'This is helper text';
        renderInput({ helperText });
        expect(react_2.screen.getByText(helperText)).toBeInTheDocument();
    });
    it('displays error message', () => {
        const error = 'This is an error';
        renderInput({ error });
        expect(react_2.screen.getByText(error)).toBeInTheDocument();
        expect(react_2.screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
    });
    it('handles validation', async () => {
        const validate = (value) => value.length < 3 ? 'Must be at least 3 characters' : undefined;
        renderInput({ validate });
        const input = react_2.screen.getByRole('textbox');
        react_2.fireEvent.change(input, { target: { value: 'ab' } });
        await (0, react_2.waitFor)(() => {
            expect(react_2.screen.getByText('Must be at least 3 characters')).toBeInTheDocument();
        });
        react_2.fireEvent.change(input, { target: { value: 'abc' } });
        await (0, react_2.waitFor)(() => {
            expect(react_2.screen.queryByText('Must be at least 3 characters')).not.toBeInTheDocument();
        });
    });
    it('shows loading state', () => {
        renderInput({ isLoading: true });
        expect(react_2.screen.getByRole('textbox')).toBeDisabled();
        expect(react_2.screen.getByRole('status')).toBeInTheDocument();
        expect(react_2.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" });
        renderInput({ startIcon, endIcon });
        expect(react_2.screen.getByTestId('start-icon')).toBeInTheDocument();
        expect(react_2.screen.getByTestId('end-icon')).toBeInTheDocument();
    });
    it('shows character counter when enabled', () => {
        renderInput({ showCounter: true, maxLength: 10 });
        const input = react_2.screen.getByRole('textbox');
        react_2.fireEvent.change(input, { target: { value: 'test' } });
        expect(react_2.screen.getByText('4/10')).toBeInTheDocument();
    });
    it('forwards ref to input element', () => {
        const ref = react_1.default.createRef();
        renderInput({ ref });
        expect(ref.current).toBeInstanceOf(HTMLInputElement);
    });
    it('handles custom class names', () => {
        renderInput({
            wrapperClassName: 'custom-wrapper',
            inputClassName: 'custom-input',
            labelClassName: 'custom-label',
            helperTextClassName: 'custom-helper',
            errorClassName: 'custom-error',
        });
        expect(react_2.screen.getByRole('textbox').parentElement?.parentElement).toHaveClass('custom-wrapper');
        expect(react_2.screen.getByRole('textbox')).toHaveClass('custom-input');
        expect(react_2.screen.getByLabelText('Test Input')).toHaveClass('custom-label');
    });
    it('displays accessibility issues', async () => {
        renderInput();
        await (0, react_2.waitFor)(() => {
            expect(react_2.screen.getByText('Accessibility Issues:')).toBeInTheDocument();
            expect(react_2.screen.getByText('Test accessibility issue')).toBeInTheDocument();
        });
    });
    it('handles disabled state', () => {
        renderInput({ disabled: true });
        const input = react_2.screen.getByRole('textbox');
        expect(input).toBeDisabled();
        expect(input).toHaveClass('disabled:opacity-50');
    });
    it('maintains focus styles', () => {
        renderInput();
        const input = react_2.screen.getByRole('textbox');
        react_2.fireEvent.focus(input);
        expect(input).toHaveClass('focus:ring-2');
        expect(input).toHaveClass('focus:ring-offset-2');
    });
    it('handles dark mode styles', () => {
        // Mock dark mode
        document.documentElement.classList.add('dark');
        renderInput();
        const input = react_2.screen.getByRole('textbox');
        expect(input).toHaveClass('dark:border-gray-600');
        // Cleanup
        document.documentElement.classList.remove('dark');
    });
    it('provides proper ARIA attributes', () => {
        renderInput({
            helperText: 'Helper text',
            error: 'Error message',
            'aria-describedby': 'custom-desc',
        });
        const input = react_2.screen.getByRole('textbox');
        expect(input).toHaveAttribute('aria-describedby', expect.stringContaining('test-input-helper'));
        expect(input).toHaveAttribute('aria-describedby', expect.stringContaining('test-input-error'));
        expect(input).toHaveAttribute('aria-describedby', expect.stringContaining('custom-desc'));
    });
    it('handles value changes', () => {
        const onChange = jest.fn();
        renderInput({ onChange });
        const input = react_2.screen.getByRole('textbox');
        react_2.fireEvent.change(input, { target: { value: 'new value' } });
        expect(onChange).toHaveBeenCalled();
        expect(input).toHaveValue('new value');
    });
    it('handles controlled and uncontrolled states', () => {
        // Uncontrolled
        const { rerender } = renderInput({ defaultValue: 'initial' });
        expect(react_2.screen.getByRole('textbox')).toHaveValue('initial');
        // Controlled
        rerender((0, jsx_runtime_1.jsx)(AccessibilitySystem_1.AccessibilityProvider, { children: (0, jsx_runtime_1.jsx)(AccessibleInput_1.AccessibleInput, { label: "Test Input", id: "test-input", value: "controlled", onChange: () => { } }) }));
        expect(react_2.screen.getByRole('textbox')).toHaveValue('controlled');
    });
});
//# sourceMappingURL=AccessibleInput.test.js.map