reactstrap/src/__tests__/Col.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 { Col } from '../';

describe('Col', () => {
  it('should render default .col markup', () => {
    const wrapper = shallow(<Col />);

    expect(wrapper.html()).toBe('<div class="col"></div>');
  });

  it('should render children', () => {
    const wrapper = shallow(<Col>Children</Col>);

    expect(wrapper.text()).toBe('Children');
  });

  it('should pass additional classNames', () => {
    const wrapper = shallow(<Col className="extra" />);

    expect(wrapper.hasClass('extra')).toBe(true);
    expect(wrapper.hasClass('col')).toBe(true);
  });

  it('should allow custom columns to be defined', () => {
    const wrapper = shallow(<Col widths={['base', 'jumbo']} base="4" jumbo="6" />);

    expect(wrapper.hasClass('col-4')).toBe(true);
    expect(wrapper.hasClass('col-jumbo-6')).toBe(true);
    expect(wrapper.hasClass('col')).toBe(false);
  });

  it('should allow custom columns to be defined with objects', () => {
    const wrapper = shallow(<Col widths={['base', 'jumbo', 'wtf']} wtf={{ size: 1, order: 2, offset: 4 }} />);

    expect(wrapper.hasClass('col-wtf-1')).toBe(true);
    expect(wrapper.hasClass('order-wtf-2')).toBe(true);
    expect(wrapper.hasClass('offset-wtf-4')).toBe(true);
    expect(wrapper.hasClass('col')).toBe(false);
  });

  it('should pass col size specific classes as Strings', () => {
    const wrapper = shallow(<Col sm="6" />);

    expect(wrapper.hasClass('col-sm-6')).toBe(true);
    expect(wrapper.hasClass('col')).toBe(false);
  });

  it('should pass col size specific classes as Numbers', () => {
    const wrapper = shallow(<Col sm={6} />);

    expect(wrapper.hasClass('col-sm-6')).toBe(true);
    expect(wrapper.hasClass('col')).toBe(false);
  });

  it('should pass col size as flex with values "auto" or without value', () => {
    const wrapper = shallow(<Col xs="auto" sm />);

    expect(wrapper.hasClass('col')).toBe(false);
    expect(wrapper.hasClass('col-auto')).toBe(true);
    expect(wrapper.hasClass('col-sm')).toBe(true);
  });

  it('should pass col size specific classes via Objects', () => {
    const wrapper = shallow(<Col sm={{ size: 6, order: 2, offset: 2 }} />);

    expect(wrapper.hasClass('col-sm-6')).toBe(true);
    expect(wrapper.hasClass('col')).toBe(false);
    expect(wrapper.hasClass('order-sm-2')).toBe(true);
    expect(wrapper.hasClass('offset-sm-2')).toBe(true);
  });

  it('should pass col size specific classes via Objects including 0', () => {
    const wrapper = shallow(<Col sm={{ size: 6, order: 0, offset: 0 }} />);

    expect(wrapper.hasClass('col-sm-6')).toBe(true);
    expect(wrapper.hasClass('col')).toBe(false);
    expect(wrapper.hasClass('order-sm-0')).toBe(true);
    expect(wrapper.hasClass('offset-sm-0')).toBe(true);
  });

  it('should pass col size when passing via object with size "auto"', () => {
    const wrapper = shallow(<Col
      sm={{ size: 'auto', offset: 2 }}
    />);

    expect(wrapper.hasClass('col')).toBe(false);
    expect(wrapper.hasClass('col-sm-auto')).toBe(true);
  });

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

    expect(wrapper.text()).toBe('Yo!');
    expect(wrapper.type()).toBe('main');
    expect(wrapper.hasClass('col')).toBe(true);
  });
});