import React, { useState } from 'react'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render } from '../../../tests/utils'; import Collapse from '../../collapse'; import Input from '../../input'; import Table from '../../table'; import Checkbox from '../index'; import type { CheckboxValueType } from '../Group'; import type { CheckboxGroupProps } from '../index'; describe('CheckboxGroup', () => { mountTest(Checkbox.Group); rtlTest(Checkbox.Group); it('should work basically', () => { const onChange = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]); expect(onChange).toHaveBeenCalledWith(['Apple']); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]); expect(onChange).toHaveBeenCalledWith(['Apple', 'Pear']); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[2]); expect(onChange).toHaveBeenCalledWith(['Apple', 'Pear', 'Orange']); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]); expect(onChange).toHaveBeenCalledWith(['Apple', 'Orange']); }); it('does not trigger onChange callback of both Checkbox and CheckboxGroup when CheckboxGroup is disabled', () => { const onChangeGroup = jest.fn(); const options = [ { label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear' }, ]; const { container } = render( , ); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]); expect(onChangeGroup).not.toHaveBeenCalled(); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]); expect(onChangeGroup).not.toHaveBeenCalled(); }); it('does not prevent onChange callback from Checkbox when CheckboxGroup is not disabled', () => { const onChangeGroup = jest.fn(); const options = [ { label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange', disabled: true }, ]; const { container } = render(); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]); expect(onChangeGroup).toHaveBeenCalledWith(['Apple']); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]); expect(onChangeGroup).toHaveBeenCalledWith(['Apple']); }); it('all children should have a name property', () => { const { container } = render(); Array.from(container.querySelectorAll('input[type="checkbox"]')).forEach( (el) => { expect(el.getAttribute('name')).toEqual('checkboxgroup'); }, ); }); it('passes prefixCls down to checkbox', () => { const options = [ { label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange', style: { fontSize: 12 } }, ]; const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); it('should be controlled by value', () => { const options = [ { label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }, ]; const renderCheckbox = (props: CheckboxGroupProps) => ; const { container, rerender } = render(renderCheckbox({ options })); expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(0); rerender(renderCheckbox({ options, value: 'Apple' as unknown as CheckboxValueType[] })); expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(1); }); // https://github.com/ant-design/ant-design/issues/12642 it('should trigger onChange in sub Checkbox', () => { const onChange = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]); expect(onChange).toHaveBeenCalled(); expect(onChange.mock.calls[0][0].target.value).toEqual('my'); }); // https://github.com/ant-design/ant-design/issues/16376 it('onChange should filter removed value', () => { const onChange = jest.fn(); const { container, rerender } = render( , ); rerender( , ); fireEvent.click(container.querySelector('.ant-checkbox-input')!); expect(onChange).toHaveBeenCalledWith([2]); }); it('checkbox should register value again after value changed', () => { const onChange = jest.fn(); const { container, rerender } = render( , ); rerender( , ); expect(container.querySelector('.ant-checkbox-input')).toHaveAttribute('checked'); }); // https://github.com/ant-design/ant-design/issues/17297 it('onChange should keep the order of the original values', () => { const onChange = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]); expect(onChange).toHaveBeenCalledWith([1]); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]); expect(onChange).toHaveBeenCalledWith([1, 2]); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]); expect(onChange).toHaveBeenCalledWith([2]); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[0]); expect(onChange).toHaveBeenCalledWith([1, 2]); }); // https://github.com/ant-design/ant-design/issues/21134 it('should work when checkbox is wrapped by other components', () => { const { container } = render(
item
, ); fireEvent.click( container.querySelector('.ant-collapse-item')?.querySelector('.ant-collapse-header')!, ); fireEvent.click(container.querySelector('.ant-checkbox-input')!); expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(1); fireEvent.click(container.querySelector('.ant-checkbox-input')!); expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(0); }); it('skipGroup', () => { const onChange = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]); expect(onChange).not.toHaveBeenCalled(); }); it('Table rowSelection', () => { const onChange = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelectorAll('.ant-checkbox-input')[1]); expect(onChange).not.toHaveBeenCalled(); }); it('should get div ref', () => { const refCalls: HTMLDivElement[] = []; render( { refCalls.push(node!); }} />, ); const [mountCall] = refCalls; expect(mountCall.nodeName).toBe('DIV'); }); it('should support number option', () => { const onChange = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelector('.ant-checkbox-input')!); expect(onChange).toHaveBeenCalledWith([1]); }); it('should store latest checkbox value if changed', () => { const onChange = jest.fn(); const Demo: React.FC = () => { const [v, setV] = useState(''); React.useEffect(() => { setV('1'); }, []); return (
setV(e.target.value)} /> A
); }; const { container } = render(); fireEvent.click(container.querySelector('.ant-checkbox-input')!); expect(onChange).toHaveBeenCalledWith([]); fireEvent.click(container.querySelector('.ant-checkbox-input')!); expect(onChange).toHaveBeenCalledWith(['length1']); fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '' } }); fireEvent.click(container.querySelector('.ant-checkbox-input')!); expect(onChange).toHaveBeenCalledWith(['A']); }); });