]>
Commit | Line | Data |
---|---|---|
a6978323 M |
1 | import ReactDOM from 'react-dom'; |
2 | import React from 'react'; | |
3 | import TimePicker from '../src/TimePicker'; | |
4 | ||
3ab3a128 | 5 | import TestUtils from 'react-dom/test-utils'; |
e9060dda | 6 | const Simulate = TestUtils.Simulate; |
a6978323 M |
7 | import expect from 'expect.js'; |
8 | import async from 'async'; | |
4984ed85 | 9 | import moment from 'moment'; |
e9060dda | 10 | |
11 | describe('TimePicker', () => { | |
12 | let container; | |
a6978323 M |
13 | |
14 | function renderPicker(props) { | |
e9060dda | 15 | const showSecond = true; |
4984ed85 | 16 | const format = ('HH:mm:ss'); |
02d1b455 | 17 | |
a6978323 M |
18 | return ReactDOM.render( |
19 | <TimePicker | |
4984ed85 | 20 | format={format} |
a6978323 | 21 | showSecond={showSecond} |
4984ed85 | 22 | defaultValue={moment('12:57:58', format)} |
a6978323 | 23 | {...props} |
02d1b455 M |
24 | />, container); |
25 | } | |
26 | ||
27 | function renderPickerWithoutSeconds(props) { | |
e9060dda | 28 | const showSecond = false; |
4984ed85 | 29 | const format = ('HH:mm'); |
02d1b455 M |
30 | |
31 | return ReactDOM.render( | |
32 | <TimePicker | |
4984ed85 | 33 | format={format} |
02d1b455 | 34 | showSecond={showSecond} |
4984ed85 | 35 | defaultValue={moment('08:24', format)} |
02d1b455 M |
36 | {...props} |
37 | />, container); | |
a6978323 M |
38 | } |
39 | ||
e9060dda | 40 | beforeEach(() => { |
02d1b455 M |
41 | container = document.createElement('div'); |
42 | document.body.appendChild(container); | |
a6978323 M |
43 | }); |
44 | ||
e9060dda | 45 | afterEach(() => { |
02d1b455 M |
46 | ReactDOM.unmountComponentAtNode(container); |
47 | document.body.removeChild(container); | |
a6978323 M |
48 | }); |
49 | ||
e9060dda | 50 | describe('render panel to body', () => { |
51 | it('popup correctly', (done) => { | |
52 | let change; | |
53 | const picker = renderPicker({ | |
54 | onChange(v) { | |
a6978323 | 55 | change = v; |
e9060dda | 56 | }, |
a6978323 M |
57 | }); |
58 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 59 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
60 | 'rc-time-picker-input')[0]; | |
61 | expect((input).value).to.be('12:57:58'); | |
e9060dda | 62 | async.series([(next) => { |
a6978323 M |
63 | Simulate.click(input); |
64 | setTimeout(next, 100); | |
e9060dda | 65 | }, (next) => { |
4984ed85 | 66 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
67 | 'rc-time-picker-panel-inner')[0]).to.be.ok(); | |
a6978323 | 68 | expect(picker.state.open).to.be(true); |
e9060dda | 69 | const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; |
a6978323 M |
70 | Simulate.click(hour); |
71 | setTimeout(next, 100); | |
e9060dda | 72 | }, (next) => { |
a6978323 | 73 | expect(change).to.be.ok(); |
4984ed85 | 74 | expect(change.hour()).to.be(1); |
75 | expect(change.minute()).to.be(57); | |
76 | expect(change.second()).to.be(58); | |
77 | expect((input).value).to.be('01:57:58'); | |
a6978323 M |
78 | expect(picker.state.open).to.be.ok(); |
79 | next(); | |
e9060dda | 80 | }], () => { |
a6978323 M |
81 | done(); |
82 | }); | |
83 | }); | |
84 | ||
e9060dda | 85 | it('destroy correctly', (done) => { |
86 | const picker = renderPicker(); | |
a6978323 | 87 | expect(picker.state.open).not.to.be.ok(); |
4984ed85 | 88 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
89 | 'rc-time-picker-input')[0]; | |
e9060dda | 90 | async.series([(next) => { |
a6978323 M |
91 | Simulate.click(input); |
92 | setTimeout(next, 100); | |
e9060dda | 93 | }, (next) => { |
4984ed85 | 94 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, |
033931f9 | 95 | 'rc-time-picker-panel-inner')[0]).to.be.ok(); |
a6978323 M |
96 | expect(picker.state.open).to.be(true); |
97 | if (document.querySelectorAll) { | |
98 | expect(document.querySelectorAll('.rc-time-picker').length).not.to.be(0); | |
99 | } | |
4984ed85 | 100 | expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, |
101 | 'li')[0]).to.be.ok(); | |
02d1b455 | 102 | ReactDOM.unmountComponentAtNode(container); |
a6978323 | 103 | setTimeout(next, 100); |
e9060dda | 104 | }, (next) => { |
a6978323 M |
105 | if (document.querySelectorAll) { |
106 | expect(document.querySelectorAll('.rc-time-picker').length).to.be(0); | |
107 | } | |
108 | expect(picker.panelInstance).not.to.be.ok(); | |
109 | next(); | |
e9060dda | 110 | }], () => { |
a6978323 M |
111 | done(); |
112 | }); | |
113 | }); | |
e3583f75 | 114 | |
115 | it('support name', () => { | |
116 | const picker = renderPicker({ | |
117 | name: 'time-picker-form-name', | |
118 | }); | |
119 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
120 | 'rc-time-picker-input')[0]; | |
121 | expect(input.name).to.be('time-picker-form-name'); | |
122 | }); | |
123 | ||
124 | it('support focus', () => { | |
125 | const picker = renderPicker({ | |
126 | name: 'time-picker-form-name', | |
127 | }); | |
128 | expect(picker.focus).to.be.a('function'); | |
129 | }); | |
130 | ||
131 | it('should be controlled by open', () => { | |
132 | const picker = renderPicker({ | |
133 | open: false, | |
134 | }); | |
135 | expect(picker.state.open).not.to.be.ok(); | |
136 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
137 | 'rc-time-picker-input')[0]; | |
138 | Simulate.click(input); | |
139 | expect(picker.state.open).not.to.be.ok(); | |
140 | }); | |
a6978323 M |
141 | }); |
142 | ||
e9060dda | 143 | describe('render panel to body (without seconds)', () => { |
144 | it('popup correctly', (done) => { | |
145 | let change; | |
146 | const picker = renderPickerWithoutSeconds({ | |
147 | onChange(v) { | |
02d1b455 | 148 | change = v; |
e9060dda | 149 | }, |
02d1b455 M |
150 | }); |
151 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 152 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
153 | 'rc-time-picker-input')[0]; | |
154 | expect((input).value).to.be('08:24'); | |
e9060dda | 155 | async.series([(next) => { |
02d1b455 M |
156 | Simulate.click(input); |
157 | setTimeout(next, 100); | |
e9060dda | 158 | }, (next) => { |
4984ed85 | 159 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
160 | 'rc-time-picker-panel-inner')[0]).to.be.ok(); | |
02d1b455 | 161 | expect(picker.state.open).to.be(true); |
e9060dda | 162 | const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; |
02d1b455 M |
163 | Simulate.click(hour); |
164 | setTimeout(next, 100); | |
e9060dda | 165 | }, (next) => { |
02d1b455 | 166 | expect(change).to.be.ok(); |
4984ed85 | 167 | expect(change.hour()).to.be(1); |
168 | expect(change.minute()).to.be(24); | |
169 | expect((input).value).to.be('01:24'); | |
02d1b455 M |
170 | expect(picker.state.open).to.be.ok(); |
171 | next(); | |
e9060dda | 172 | }], () => { |
02d1b455 M |
173 | done(); |
174 | }); | |
175 | }); | |
176 | }); | |
4f26f23b AS |
177 | |
178 | describe('render panel to body 12pm mode', () => { | |
179 | it('popup correctly', (done) => { | |
180 | let change; | |
181 | const picker = renderPickerWithoutSeconds({ | |
182 | use12Hours: true, | |
183 | value: null, | |
184 | onChange(v) { | |
185 | change = v; | |
186 | }, | |
187 | }); | |
188 | expect(picker.state.open).not.to.be.ok(); | |
189 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
190 | 'rc-time-picker-input')[0]; | |
191 | expect((input).value).to.be(''); | |
192 | async.series([(next) => { | |
193 | Simulate.click(input); | |
194 | setTimeout(next, 100); | |
195 | }, (next) => { | |
196 | expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
197 | 'rc-time-picker-panel-inner')[0]).to.be.ok(); | |
198 | expect(picker.state.open).to.be(true); | |
199 | const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; | |
200 | Simulate.click(hour); | |
201 | setTimeout(next, 100); | |
202 | }, (next) => { | |
203 | expect(change).to.be.ok(); | |
204 | expect(picker.state.open).to.be.ok(); | |
205 | next(); | |
206 | }], () => { | |
207 | done(); | |
208 | }); | |
209 | }); | |
210 | }); | |
e30387ab CS |
211 | |
212 | describe('other operations', () => { | |
213 | it('focus/blur correctly', (done) => { | |
214 | let focus = false; | |
215 | let blur = false; | |
216 | ||
217 | const picker = renderPicker({ | |
218 | onFocus: () => { | |
219 | focus = true; | |
220 | }, | |
221 | onBlur: () => { | |
222 | blur = true; | |
223 | }, | |
224 | }); | |
225 | expect(picker.state.open).not.to.be.ok(); | |
226 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
227 | 'rc-time-picker-input')[0]; | |
228 | ||
229 | async.series([(next) => { | |
230 | Simulate.focus(input); | |
231 | setTimeout(next, 100); | |
232 | }, (next) => { | |
233 | expect(picker.state.open).to.be(false); | |
234 | ||
235 | Simulate.blur(input); | |
236 | setTimeout(next, 100); | |
237 | }, (next) => { | |
238 | expect(focus).to.be(true); | |
239 | expect(blur).to.be(true); | |
240 | ||
241 | next(); | |
242 | }], () => { | |
243 | done(); | |
244 | }); | |
245 | }); | |
246 | }); | |
a6978323 | 247 | }); |