prometheus

1
import * as React from 'react';
2
import { shallow } from 'enzyme';
3
import Checkbox from './Checkbox';
4
import { FormGroup, Label, Input } from 'reactstrap';
5

6
const MockCmp: React.FC = () => <div className="mock" />;
7

8
describe('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