github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/components/Checkbox.test.tsx (about)

     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  });