1import * as React from 'react';
2import { shallow } from 'enzyme';
3import Checkbox from './Checkbox';
4import { FormGroup, Label, Input } from 'reactstrap';
5
6const MockCmp: React.FC = () => <div className="mock" />;
7
8describe('Checkbox', () => {
9  it('renders with subcomponents', () => {
10    const checkBox = shallow(<Checkbox />);
11    [FormGroup, Input, Label].forEach((component) => expect(checkBox.find(component)).toHaveLength(1));
12  });
13
14  it('passes down the correct FormGroup props', () => {
15    const checkBoxProps = { wrapperStyles: { color: 'orange' } };
16    const checkBox = shallow(<Checkbox {...checkBoxProps} />);
17    const formGroup = checkBox.find(FormGroup);
18    expect(Object.keys(formGroup.props())).toHaveLength(4);
19    expect(formGroup.prop('className')).toEqual('custom-control custom-checkbox');
20    expect(formGroup.prop('children')).toHaveLength(2);
21    expect(formGroup.prop('style')).toEqual({ color: 'orange' });
22    expect(formGroup.prop('tag')).toEqual('div');
23  });
24
25  it('passes down the correct FormGroup Input props', () => {
26    const results: string[] = [];
27    const checkBoxProps = {
28      onChange: (): void => {
29        results.push('clicked');
30      },
31    };
32    const checkBox = shallow(<Checkbox {...checkBoxProps} id="1" />);
33    const input = checkBox.find(Input);
34    expect(Object.keys(input.props())).toHaveLength(4);
35    expect(input.prop('className')).toEqual('custom-control-input');
36    expect(input.prop('id')).toMatch('1');
37    expect(input.prop('type')).toEqual('checkbox');
38    input.simulate('change');
39    expect(results).toHaveLength(1);
40    expect(results[0]).toEqual('clicked');
41  });
42
43  it('passes down the correct Label props', () => {
44    const checkBox = shallow(
45      <Checkbox id="1">
46        <MockCmp />
47      </Checkbox>
48    );
49    const label = checkBox.find(Label);
50    expect(Object.keys(label.props())).toHaveLength(6);
51    expect(label.prop('className')).toEqual('custom-control-label');
52    expect(label.find(MockCmp)).toHaveLength(1);
53    expect(label.prop('for')).toMatch('1');
54    expect(label.prop('style')).toEqual({ userSelect: 'none' });
55    expect(label.prop('tag')).toEqual('label');
56  });
57
58  it('shares checkbox `id` uuid with Input/Label subcomponents', () => {
59    const checkBox = shallow(<Checkbox id="2" />);
60    const input = checkBox.find(Input);
61    const label = checkBox.find(Label);
62    expect(label.prop('for')).toBeDefined();
63    expect(label.prop('for')).toEqual(input.prop('id'));
64  });
65});
66