reactstrap/src/__tests__/FormGroup.spec.js at 5.0.0 · JavaScriptsShare/reactstrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React from 'react';
import { shallow } from 'enzyme';
import { FormGroup } from '../';

describe('FormGroup', () => {
  it('should render with "form" tag by default', () => {
    const wrapper = shallow(<FormGroup>Yo!</FormGroup>);

    expect(wrapper.type()).toBe('div');
  });

  it('should render children', () => {
    const wrapper = shallow(<FormGroup>Yo!</FormGroup>);

    expect(wrapper.text()).toBe('Yo!');
  });

  it('should render with "form-group" class by default', () => {
    const wrapper = shallow(<FormGroup>Yo!</FormGroup>);

    expect(wrapper.hasClass('form-group')).toBe(true);
  });

  it('should not render with "form-check" nor "form-check-inline"  class by default', () => {
    const wrapper = shallow(<FormGroup>Yo!</FormGroup>);

    expect(wrapper.hasClass('form-check')).toBe(false);
    expect(wrapper.hasClass('form-check-inline')).toBe(false);
  });

  it('should render with "form-check" class when check prop is truthy', () => {
    const wrapper = shallow(<FormGroup check>Yo!</FormGroup>);

    expect(wrapper.hasClass('form-check')).toBe(true);
  });

  it('should not render with "form-check-inline" class when check prop is truthy and inline prop is falsy', () => {
    const wrapper = shallow(<FormGroup check>Yo!</FormGroup>);

    expect(wrapper.hasClass('form-check-inline')).toBe(false);
  });

  it('should render with "form-check" and "form-check-inline" classes when check prop and inline prop are both truthy', () => {
    const wrapper = shallow(<FormGroup check inline>Yo!</FormGroup>);

    expect(wrapper.hasClass('form-check')).toBe(true);
    expect(wrapper.hasClass('form-check-inline')).toBe(true);
  });

  it('should not render with "form-check-inline" class when check prop is falsy and inline prop is truthy', () => {
    const wrapper = shallow(<FormGroup inline>Yo!</FormGroup>);

    expect(wrapper.hasClass('form-check-inline')).toBe(false);
  });

  it('should not render with "form-group" class when check prop is truthy', () => {
    const wrapper = shallow(<FormGroup check>Yo!</FormGroup>);

    expect(wrapper.hasClass('form-group')).toBe(false);
  });

  it('should not render with "disabled" class when disabled prop is truthy but check is not', () => {
    const wrapper = shallow(<FormGroup disabled>Yo!</FormGroup>);

    expect(wrapper.hasClass('disabled')).toBe(false);
  });

  it('should render with "disabled" class when both check disabled props are truthy', () => {
    const wrapper = shallow(<FormGroup check disabled>Yo!</FormGroup>);

    expect(wrapper.hasClass('disabled')).toBe(true);
    expect(wrapper.hasClass('form-check')).toBe(true);
  });

  it('should render with "row" class when row prop is truthy', () => {
    const wrapper = shallow(<FormGroup row>Yo!</FormGroup>);

    expect(wrapper.hasClass('row')).toBe(true);
  });

  it('should not render with "row" class when row prop is not truthy', () => {
    const wrapper = shallow(<FormGroup>Yo!</FormGroup>);

    expect(wrapper.hasClass('row')).toBe(false);
  });

  it('should render additional classes', () => {
    const wrapper = shallow(<FormGroup className="other">Yo!</FormGroup>);

    expect(wrapper.hasClass('other')).toBe(true);
  });

  it('should render custom tag', () => {
    const wrapper = shallow(<FormGroup tag="main">Yo!</FormGroup>);

    expect(wrapper.type()).toBe('main');
  });
});