diff --git a/src/__tests__/FormInputs.test.tsx b/src/__tests__/FormInputs.test.tsx new file mode 100644 index 0000000..8211266 --- /dev/null +++ b/src/__tests__/FormInputs.test.tsx @@ -0,0 +1,171 @@ +import { render, screen } from '@testing-library/react'; +import { + TextInput, + NumberInput, + Textarea, + Select, + DatePicker, + Toggle, + Checkbox, +} from '@/components/FormInputs'; + +describe('FormInputs - aria-describedby', () => { + describe('TextInput', () => { + it('sets aria-describedby pointing to error element', () => { + render(); + const input = screen.getByRole('textbox'); + expect(input).toHaveAttribute('aria-describedby', 'email-error'); + expect(screen.getByText('Required')).toHaveAttribute('id', 'email-error'); + }); + + it('sets aria-describedby pointing to helper text element', () => { + render(); + const input = screen.getByRole('textbox'); + expect(input).toHaveAttribute('aria-describedby', 'email-helper'); + expect(screen.getByText('Your email address')).toHaveAttribute('id', 'email-helper'); + }); + + it('does not set aria-describedby when no error or helper text', () => { + render(); + const input = screen.getByRole('textbox'); + expect(input).not.toHaveAttribute('aria-describedby'); + }); + + it('sets aria-invalid when error is present', () => { + render(); + expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true'); + }); + + it('sets aria-invalid=false when no error', () => { + render(); + expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'false'); + }); + }); + + describe('NumberInput', () => { + it('sets aria-describedby pointing to error element', () => { + render(); + const input = screen.getByRole('spinbutton'); + expect(input).toHaveAttribute('aria-describedby', 'count-error'); + expect(screen.getByText('Must be positive')).toHaveAttribute('id', 'count-error'); + }); + + it('sets aria-describedby pointing to helper text', () => { + render(); + const input = screen.getByRole('spinbutton'); + expect(input).toHaveAttribute('aria-describedby', 'count-helper'); + }); + }); + + describe('Textarea', () => { + it('sets aria-describedby pointing to error element', () => { + render(