import { render, screen } from '@testing-library/react';
import { Input } from '../Input';

describe('<Input>', () => {
    it('associates the label with the input (clicking the label focuses it)', () => {
        render(<Input label="Email" />);
        const input = screen.getByLabelText('Email');
        expect(input.tagName).toBe('INPUT');
    });

    it('links a hint via aria-describedby', () => {
        render(<Input label="Email" hint="We never share it" />);
        const input = screen.getByLabelText('Email');
        const describedBy = input.getAttribute('aria-describedby');
        expect(describedBy).toBeTruthy();
        expect(document.getElementById(describedBy as string)).toHaveTextContent('We never share it');
    });

    it('marks invalid inputs with aria-invalid and shows the error text', () => {
        render(<Input label="Email" error="Required" />);
        const input = screen.getByLabelText('Email');
        expect(input).toHaveAttribute('aria-invalid', 'true');
        expect(screen.getByText('Required')).toBeInTheDocument();
    });
});