-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
Collapse.spec.js
125 lines (106 loc) · 3.78 KB
/
Collapse.spec.js
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React from 'react';
import { shallow, mount } from 'enzyme';
import { Collapse } from '../';
describe('Collapse', () => {
let isOpen;
let wrapper;
const toggle = () => {
isOpen = !isOpen;
if (wrapper != null) {
wrapper.setProps({ isOpen });
}
};
beforeEach(() => {
isOpen = false;
jest.useFakeTimers();
});
afterEach(() => {
// fast forward time for collapse to fade out
jest.runTimersToTime(400);
jest.clearAllTimers();
});
it('should render children', () => {
wrapper = mount(<Collapse><p>hello</p></Collapse>);
expect(wrapper.find('p').text()).toBe('hello');
});
it('should have default isOpen value', () => {
wrapper = shallow(<Collapse />);
expect(wrapper.instance().props.isOpen).toEqual(false);
});
it('should render with class "collapse"', () => {
wrapper = mount(<Collapse />);
expect(wrapper.find('div').hasClass('collapse')).toEqual(true);
});
it('should render with class "navbar-collapse" if it has prop navbar', () => {
wrapper = mount(<Collapse navbar />);
expect(wrapper.find('div').hasClass('navbar-collapse')).toEqual(true);
});
it('should render with class "show" when isOpen is true', () => {
wrapper = mount(<Collapse isOpen />);
expect(wrapper.find('div').hasClass('show')).toEqual(true);
});
it('should set height to null when isOpen is true', () => {
wrapper = shallow(<Collapse isOpen />);
expect(wrapper.state('height')).toBe(null);
});
it('should not set height when isOpen is false', () => {
wrapper = shallow(<Collapse isOpen={false} />);
expect(wrapper.state('height')).toBe(null);
});
it('should forward all styles', () => {
wrapper = mount(<Collapse isOpen style={{ backgroundColor: 'black' }} />);
expect(wrapper.find('div').prop('style').backgroundColor).toBe('black');
});
it('should forward all callbacks', () => {
const callbacks = {
onEnter: jest.fn(),
onEntering: jest.fn(),
onEntered: jest.fn(),
onExit: jest.fn(),
onExiting: jest.fn(),
onExited: jest.fn(),
};
wrapper = mount(<Collapse isOpen={isOpen} {...callbacks} />);
toggle();
expect(callbacks.onEnter).toHaveBeenCalled();
expect(callbacks.onEntering).toHaveBeenCalled();
expect(callbacks.onEntered).not.toHaveBeenCalled();
jest.runTimersToTime(350);
expect(callbacks.onEntered).toHaveBeenCalled();
expect(callbacks.onExit).not.toHaveBeenCalled();
toggle();
expect(callbacks.onExit).toHaveBeenCalled();
expect(callbacks.onExiting).toHaveBeenCalled();
expect(callbacks.onExited).not.toHaveBeenCalled();
jest.runTimersToTime(350);
expect(callbacks.onExiting).toHaveBeenCalled();
expect(callbacks.onExited).toHaveBeenCalled();
wrapper.unmount();
});
it('should apply correct bootstrap classes', () => {
wrapper = mount(<Collapse isOpen={isOpen} />);
toggle();
expect(wrapper.update().find('div').prop('className')).toBe('collapsing');
jest.runTimersToTime(350);
expect(wrapper.update().find('div').prop('className')).toBe('collapse show');
toggle();
expect(wrapper.update().find('div').prop('className')).toBe('collapsing');
jest.runTimersToTime(350);
expect(wrapper.update().find('div').prop('className')).toBe('collapse');
wrapper.unmount();
});
it('should set inline style to 0 when isOpen change to false', () => {
isOpen = true;
wrapper = mount(<Collapse isOpen={isOpen} />);
toggle();
expect(wrapper.state('height')).toBe(0);
wrapper.unmount();
});
it('should remove inline style when isOpen change to true after transition', () => {
wrapper = mount(<Collapse isOpen={isOpen} />);
toggle();
jest.runTimersToTime(380);
expect(wrapper.state('height')).toBe(null);
wrapper.unmount();
});
});