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