2022-05-11 20:18:43 +03:00
|
|
|
import { render, screen } from '@testing-library/react';
|
2022-05-28 11:34:12 +03:00
|
|
|
import { Checkbox } from '../../src/utils/Checkbox';
|
2022-07-10 00:03:21 +03:00
|
|
|
import { renderWithEvents } from '../__mocks__/setUpTest';
|
2019-03-17 20:09:10 +03:00
|
|
|
|
|
|
|
describe('<Checkbox />', () => {
|
2022-05-02 11:21:18 +03:00
|
|
|
it.each([['foo'], ['bar'], ['baz']])('includes extra class names when provided', (className) => {
|
|
|
|
const { container } = render(<Checkbox className={className} />);
|
|
|
|
expect(container.firstChild).toHaveAttribute('class', `form-check form-checkbox ${className}`);
|
2019-03-17 20:09:10 +03:00
|
|
|
});
|
|
|
|
|
2022-05-02 11:21:18 +03:00
|
|
|
it.each([[true], [false]])('marks input as checked if defined', (checked) => {
|
|
|
|
render(<Checkbox checked={checked}>Foo</Checkbox>);
|
2019-03-17 20:09:10 +03:00
|
|
|
|
2022-05-02 11:21:18 +03:00
|
|
|
if (checked) {
|
|
|
|
expect(screen.getByLabelText('Foo')).toBeChecked();
|
|
|
|
} else {
|
|
|
|
expect(screen.getByLabelText('Foo')).not.toBeChecked();
|
|
|
|
}
|
2019-03-17 20:09:10 +03:00
|
|
|
});
|
|
|
|
|
2022-05-02 11:21:18 +03:00
|
|
|
it.each([['foo'], ['bar'], ['baz']])('renders provided children inside the label', (children) => {
|
|
|
|
render(<Checkbox>{children}</Checkbox>);
|
|
|
|
expect(screen.getByText(children)).toHaveAttribute('class', 'form-check-label');
|
2019-03-17 20:09:10 +03:00
|
|
|
});
|
|
|
|
|
2022-05-11 20:18:43 +03:00
|
|
|
it.each([[true], [false]])('changes checked status on input change', async (checked) => {
|
2019-03-17 20:09:10 +03:00
|
|
|
const onChange = jest.fn();
|
2022-07-10 00:03:21 +03:00
|
|
|
const { user } = renderWithEvents(<Checkbox onChange={onChange} checked={checked}>Foo</Checkbox>);
|
2019-03-17 20:09:10 +03:00
|
|
|
|
2022-05-02 11:21:18 +03:00
|
|
|
expect(onChange).not.toHaveBeenCalled();
|
2022-05-11 20:18:43 +03:00
|
|
|
await user.click(screen.getByLabelText('Foo'));
|
2022-05-02 11:21:18 +03:00
|
|
|
expect(onChange).toHaveBeenCalledWith(!checked, expect.anything());
|
2019-03-17 20:09:10 +03:00
|
|
|
});
|
2020-11-28 13:45:04 +03:00
|
|
|
|
2022-05-02 11:21:18 +03:00
|
|
|
it.each([[true], [false]])('allows setting inline rendering', (inline) => {
|
|
|
|
const { container } = render(<Checkbox inline={inline} />);
|
2020-11-28 13:45:04 +03:00
|
|
|
|
2022-05-02 11:21:18 +03:00
|
|
|
if (inline) {
|
|
|
|
expect(container.firstChild).toHaveAttribute('style', 'display: inline-block;');
|
|
|
|
} else {
|
|
|
|
expect(container.firstChild).not.toHaveAttribute('style');
|
|
|
|
}
|
2020-11-28 13:45:04 +03:00
|
|
|
});
|
2019-03-17 20:09:10 +03:00
|
|
|
});
|