hamid
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { ThemeProvider } from '../../theme';
|
|
import RelationSelect from './RelationSelect';
|
|
|
|
const OPTIONS = [
|
|
{ code: 'parent', label: 'Parent' },
|
|
{ code: 'self', label: 'Myself' },
|
|
];
|
|
|
|
function renderSelect(value: string | null) {
|
|
const onChange = jest.fn();
|
|
const utils = render(
|
|
<ThemeProvider>
|
|
<RelationSelect options={OPTIONS} value={value} onChange={onChange} />
|
|
</ThemeProvider>,
|
|
);
|
|
return { ...utils, onChange };
|
|
}
|
|
|
|
describe('<RelationSelect/> component', () => {
|
|
it('renders every relation option', () => {
|
|
renderSelect(null);
|
|
expect(screen.getByText('Parent')).toBeInTheDocument();
|
|
expect(screen.getByText('Myself')).toBeInTheDocument();
|
|
});
|
|
|
|
it('marks the selected option as checked', () => {
|
|
const { container } = renderSelect('self');
|
|
expect(container.querySelector('[data-code="self"]')).toHaveAttribute('aria-checked', 'true');
|
|
expect(container.querySelector('[data-code="parent"]')).toHaveAttribute('aria-checked', 'false');
|
|
});
|
|
|
|
it('calls onChange with the picked code', async () => {
|
|
const user = userEvent.setup();
|
|
const { onChange } = renderSelect(null);
|
|
await user.click(screen.getByText('Parent'));
|
|
expect(onChange).toHaveBeenCalledWith('parent');
|
|
});
|
|
|
|
it('renders a check icon on the selected card, not only a border color (WCAG 1.4.1)', () => {
|
|
const { container } = renderSelect('self');
|
|
const selectedCard = container.querySelector('[data-code="self"]');
|
|
const unselectedCard = container.querySelector('[data-code="parent"]');
|
|
expect(selectedCard?.querySelector('svg')).toBeInTheDocument();
|
|
expect(unselectedCard?.querySelector('svg')).not.toBeInTheDocument();
|
|
});
|
|
});
|