mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 09:47:28 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated Checkbox test to rteact testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-02 10:21:18 +02:00
parent d9b55f1d95
commit 39d4f8c73d
1 changed files with 26 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
test/utils/Checkbox.test.tsx
View file

@ -1,70 +1,43 @@
import { ChangeEvent, PropsWithChildren } from 'react'; import { fireEvent, render, screen } from '@testing-library/react';
import { mount, ReactWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import Checkbox from '../../src/utils/Checkbox'; import Checkbox from '../../src/utils/Checkbox';
import { BooleanControlProps } from '../../src/utils/BooleanControl';
describe('<Checkbox />', () => { describe('<Checkbox />', () => {
let wrapped: ReactWrapper; it.each([['foo'], ['bar'], ['baz']])('includes extra class names when provided', (className) => {
const { container } = render(<Checkbox className={className} />);
const createComponent = (props: PropsWithChildren<BooleanControlProps> = {}) => { expect(container.firstChild).toHaveAttribute('class', `form-check form-checkbox ${className}`);
wrapped = mount(<Checkbox {...props} />);
return wrapped;
};
afterEach(() => wrapped?.unmount());
it('includes extra class names when provided', () => {
const classNames = ['foo', 'bar', 'baz'];
expect.assertions(classNames.length);
classNames.forEach((className) => {
const wrapped = createComponent({ className });
expect(wrapped.prop('className')).toContain(className);
});
}); });
it('marks input as checked if defined', () => { it.each([[true], [false]])('marks input as checked if defined', (checked) => {
const checkeds = [true, false]; render(<Checkbox checked={checked}>Foo</Checkbox>);
expect.assertions(checkeds.length); if (checked) {
checkeds.forEach((checked) => { expect(screen.getByLabelText('Foo')).toBeChecked();
const wrapped = createComponent({ checked }); } else {
const input = wrapped.find('input'); expect(screen.getByLabelText('Foo')).not.toBeChecked();
}
expect(input.prop('checked')).toEqual(checked);
});
}); });
it('renders provided children inside the label', () => { it.each([['foo'], ['bar'], ['baz']])('renders provided children inside the label', (children) => {
const labels = ['foo', 'bar', 'baz']; render(<Checkbox>{children}</Checkbox>);
expect(screen.getByText(children)).toHaveAttribute('class', 'form-check-label');
expect.assertions(labels.length);
labels.forEach((children) => {
const wrapped = createComponent({ children });
const label = wrapped.find('label');
expect(label.text()).toEqual(children);
});
}); });
it('changes checked status on input change', () => { it.each([[true], [false]])('changes checked status on input change', (checked) => {
const onChange = jest.fn(); const onChange = jest.fn();
const e = Mock.of<ChangeEvent<HTMLInputElement>>({ target: { checked: false } }); render(<Checkbox onChange={onChange} checked={checked}>Foo</Checkbox>);
const wrapped = createComponent({ checked: true, onChange });
const input = wrapped.find('input');
(input.prop('onChange') as Function)(e); expect(onChange).not.toHaveBeenCalled();
fireEvent.click(screen.getByLabelText('Foo'));
expect(onChange).toHaveBeenCalledWith(false, e); expect(onChange).toHaveBeenCalledWith(!checked, expect.anything());
}); });
it('allows setting inline rendering', () => { it.each([[true], [false]])('allows setting inline rendering', (inline) => {
const wrapped = createComponent({ inline: true }); const { container } = render(<Checkbox inline={inline} />);
const control = wrapped.find('.form-check');
expect(control.prop('style')).toEqual({ display: 'inline-block' }); if (inline) {
expect(container.firstChild).toHaveAttribute('style', 'display: inline-block;');
} else {
expect(container.firstChild).not.toHaveAttribute('style');
}
}); });
}); });