]>
Commit | Line | Data |
---|---|---|
02d1b455 M |
1 | import ReactDOM from 'react-dom'; |
2 | import React from 'react'; | |
3 | import TimePicker from '../src/TimePicker'; | |
3ab3a128 | 4 | import TestUtils from 'react-dom/test-utils'; |
e9060dda | 5 | const Simulate = TestUtils.Simulate; |
02d1b455 M |
6 | import expect from 'expect.js'; |
7 | import async from 'async'; | |
4984ed85 | 8 | import moment from 'moment'; |
e9060dda | 9 | |
10 | describe('Select', () => { | |
11 | let container; | |
02d1b455 M |
12 | |
13 | function renderPicker(props) { | |
e9060dda | 14 | const showSecond = true; |
4984ed85 | 15 | const format = 'HH:mm:ss'; |
02d1b455 M |
16 | |
17 | return ReactDOM.render( | |
18 | <TimePicker | |
4984ed85 | 19 | format={format} |
02d1b455 | 20 | showSecond={showSecond} |
4984ed85 | 21 | defaultValue={moment('01:02:04', format)} |
02d1b455 M |
22 | {...props} |
23 | />, container); | |
24 | } | |
25 | ||
e9060dda | 26 | beforeEach(() => { |
02d1b455 M |
27 | container = document.createElement('div'); |
28 | document.body.appendChild(container); | |
29 | }); | |
30 | ||
e9060dda | 31 | afterEach(() => { |
02d1b455 M |
32 | ReactDOM.unmountComponentAtNode(container); |
33 | document.body.removeChild(container); | |
34 | }); | |
35 | ||
17444974 | 36 | describe('select panel', () => { |
37 | it('select panel reacts to mouseenter and mouseleave correctly', (done) => { | |
38 | const picker = renderPicker(); | |
39 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
40 | 'rc-time-picker-input')[0]; | |
41 | async.series([(next) => { | |
42 | Simulate.click(input); | |
43 | setTimeout(next, 100); | |
44 | }, (next) => { | |
45 | const re = /(^|\s+)rc-time-picker-panel-select-active(\s+|$)/; | |
46 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
47 | 'rc-time-picker-panel-select')[0]; | |
48 | ||
49 | expect(re.test(selector.className)).to.be(false); | |
50 | ||
51 | Simulate.mouseEnter(selector); | |
52 | expect(re.test(selector.className)).to.be(true); | |
53 | ||
54 | Simulate.mouseLeave(selector); | |
55 | expect(re.test(selector.className)).to.be(false); | |
56 | ||
57 | next(); | |
58 | }], () => { | |
59 | done(); | |
60 | }); | |
61 | }); | |
62 | }); | |
63 | ||
e9060dda | 64 | describe('select number', () => { |
65 | it('select number correctly', (done) => { | |
66 | const picker = renderPicker(); | |
02d1b455 | 67 | expect(picker.state.open).not.to.be.ok(); |
4984ed85 | 68 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
69 | 'rc-time-picker-input')[0]; | |
e9060dda | 70 | let selector; |
71 | async.series([(next) => { | |
02d1b455 M |
72 | expect(picker.state.open).to.be(false); |
73 | ||
74 | Simulate.click(input); | |
75 | setTimeout(next, 100); | |
e9060dda | 76 | }, (next) => { |
02d1b455 | 77 | expect(picker.state.open).to.be(true); |
4984ed85 | 78 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
79 | 'rc-time-picker-panel-select'); | |
02d1b455 M |
80 | |
81 | setTimeout(next, 100); | |
e9060dda | 82 | }, (next) => { |
02d1b455 M |
83 | expect(selector.length).to.be(3); |
84 | ||
85 | next(); | |
e9060dda | 86 | }], () => { |
02d1b455 M |
87 | done(); |
88 | }); | |
89 | }); | |
02d1b455 M |
90 | }); |
91 | ||
e9060dda | 92 | describe('select to change value', () => { |
93 | it('hour correctly', (done) => { | |
94 | let change; | |
95 | const picker = renderPicker({ | |
96 | onChange(v) { | |
02d1b455 | 97 | change = v; |
e9060dda | 98 | }, |
02d1b455 M |
99 | }); |
100 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 101 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
102 | 'rc-time-picker-input')[0]; | |
e9060dda | 103 | let header; |
104 | async.series([(next) => { | |
02d1b455 M |
105 | expect(picker.state.open).to.be(false); |
106 | ||
107 | Simulate.click(input); | |
108 | setTimeout(next, 100); | |
e9060dda | 109 | }, (next) => { |
02d1b455 | 110 | expect(picker.state.open).to.be(true); |
4984ed85 | 111 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
112 | 'rc-time-picker-panel-input')[0]; | |
02d1b455 | 113 | expect(header).to.be.ok(); |
4984ed85 | 114 | expect((header).value).to.be('01:02:04'); |
115 | expect((input).value).to.be('01:02:04'); | |
02d1b455 | 116 | |
4984ed85 | 117 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
118 | 'rc-time-picker-panel-select')[0]; | |
0e62bf0b | 119 | const option = selector.getElementsByTagName('li')[19]; |
02d1b455 M |
120 | Simulate.click(option); |
121 | setTimeout(next, 100); | |
e9060dda | 122 | }, (next) => { |
02d1b455 | 123 | expect(change).to.be.ok(); |
4984ed85 | 124 | expect(change.hour()).to.be(19); |
125 | expect((header).value).to.be('19:02:04'); | |
126 | expect((input).value).to.be('19:02:04'); | |
02d1b455 M |
127 | expect(picker.state.open).to.be.ok(); |
128 | ||
129 | next(); | |
e9060dda | 130 | }], () => { |
02d1b455 M |
131 | done(); |
132 | }); | |
133 | }); | |
134 | ||
e9060dda | 135 | it('minute correctly', (done) => { |
136 | let change; | |
137 | const picker = renderPicker({ | |
138 | onChange(v) { | |
02d1b455 | 139 | change = v; |
e9060dda | 140 | }, |
02d1b455 M |
141 | }); |
142 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 143 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
144 | 'rc-time-picker-input')[0]; | |
e9060dda | 145 | let header; |
146 | async.series([(next) => { | |
02d1b455 M |
147 | expect(picker.state.open).to.be(false); |
148 | ||
149 | Simulate.click(input); | |
150 | setTimeout(next, 100); | |
e9060dda | 151 | }, (next) => { |
02d1b455 | 152 | expect(picker.state.open).to.be(true); |
4984ed85 | 153 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
154 | 'rc-time-picker-panel-input')[0]; | |
02d1b455 | 155 | expect(header).to.be.ok(); |
4984ed85 | 156 | expect((header).value).to.be('01:02:04'); |
157 | expect((input).value).to.be('01:02:04'); | |
02d1b455 | 158 | |
4984ed85 | 159 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
160 | 'rc-time-picker-panel-select')[1]; | |
0e62bf0b | 161 | const option = selector.getElementsByTagName('li')[19]; |
02d1b455 M |
162 | Simulate.click(option); |
163 | setTimeout(next, 100); | |
e9060dda | 164 | }, (next) => { |
02d1b455 | 165 | expect(change).to.be.ok(); |
4984ed85 | 166 | expect(change.minute()).to.be(19); |
167 | expect((header).value).to.be('01:19:04'); | |
168 | expect((input).value).to.be('01:19:04'); | |
02d1b455 M |
169 | expect(picker.state.open).to.be.ok(); |
170 | ||
171 | next(); | |
e9060dda | 172 | }], () => { |
02d1b455 M |
173 | done(); |
174 | }); | |
175 | }); | |
176 | ||
e9060dda | 177 | it('second correctly', (done) => { |
178 | let change; | |
179 | const picker = renderPicker({ | |
180 | onChange(v) { | |
02d1b455 | 181 | change = v; |
e9060dda | 182 | }, |
02d1b455 M |
183 | }); |
184 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 185 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
186 | 'rc-time-picker-input')[0]; | |
e9060dda | 187 | let header; |
188 | async.series([(next) => { | |
02d1b455 M |
189 | expect(picker.state.open).to.be(false); |
190 | ||
191 | Simulate.click(input); | |
192 | setTimeout(next, 100); | |
e9060dda | 193 | }, (next) => { |
02d1b455 | 194 | expect(picker.state.open).to.be(true); |
4984ed85 | 195 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
196 | 'rc-time-picker-panel-input')[0]; | |
02d1b455 | 197 | expect(header).to.be.ok(); |
4984ed85 | 198 | expect((header).value).to.be('01:02:04'); |
199 | expect((input).value).to.be('01:02:04'); | |
02d1b455 | 200 | |
4984ed85 | 201 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
202 | 'rc-time-picker-panel-select')[2]; | |
0e62bf0b | 203 | const option = selector.getElementsByTagName('li')[19]; |
02d1b455 M |
204 | Simulate.click(option); |
205 | setTimeout(next, 100); | |
e9060dda | 206 | }, (next) => { |
02d1b455 | 207 | expect(change).to.be.ok(); |
4984ed85 | 208 | expect(change.second()).to.be(19); |
209 | expect((header).value).to.be('01:02:19'); | |
210 | expect((input).value).to.be('01:02:19'); | |
02d1b455 M |
211 | expect(picker.state.open).to.be.ok(); |
212 | ||
213 | next(); | |
e9060dda | 214 | }], () => { |
02d1b455 M |
215 | done(); |
216 | }); | |
217 | }); | |
0e62bf0b M |
218 | |
219 | it('disabled correctly', (done) => { | |
220 | let change; | |
221 | const picker = renderPicker({ | |
222 | onChange(v) { | |
223 | change = v; | |
224 | }, | |
71bd9bc1 M |
225 | disabledMinutes(h) { |
226 | return [h]; | |
227 | }, | |
228 | disabledSeconds(h, m) { | |
229 | return [h + m % 60]; | |
230 | }, | |
0e62bf0b M |
231 | }); |
232 | expect(picker.state.open).not.to.be.ok(); | |
4984ed85 | 233 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, |
234 | 'rc-time-picker-input')[0]; | |
0e62bf0b M |
235 | let header; |
236 | async.series([(next) => { | |
237 | expect(picker.state.open).to.be(false); | |
238 | ||
239 | Simulate.click(input); | |
240 | setTimeout(next, 100); | |
241 | }, (next) => { | |
242 | expect(picker.state.open).to.be(true); | |
4984ed85 | 243 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
244 | 'rc-time-picker-panel-input')[0]; | |
0e62bf0b | 245 | expect(header).to.be.ok(); |
4984ed85 | 246 | expect((header).value).to.be('01:02:04'); |
247 | expect((input).value).to.be('01:02:04'); | |
0e62bf0b | 248 | |
4984ed85 | 249 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
250 | 'rc-time-picker-panel-select')[1]; | |
71bd9bc1 | 251 | const option = selector.getElementsByTagName('li')[1]; |
0e62bf0b M |
252 | Simulate.click(option); |
253 | setTimeout(next, 100); | |
254 | }, (next) => { | |
255 | expect(change).not.to.be.ok(); | |
4984ed85 | 256 | expect((header).value).to.be('01:02:04'); |
257 | expect((input).value).to.be('01:02:04'); | |
71bd9bc1 M |
258 | expect(picker.state.open).to.be.ok(); |
259 | ||
4984ed85 | 260 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
261 | 'rc-time-picker-panel-select')[2]; | |
71bd9bc1 M |
262 | const option = selector.getElementsByTagName('li')[3]; |
263 | Simulate.click(option); | |
264 | setTimeout(next, 100); | |
265 | }, (next) => { | |
266 | expect(change).not.to.be.ok(); | |
4984ed85 | 267 | expect((header).value).to.be('01:02:04'); |
268 | expect((input).value).to.be('01:02:04'); | |
0e62bf0b M |
269 | expect(picker.state.open).to.be.ok(); |
270 | ||
4984ed85 | 271 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
272 | 'rc-time-picker-panel-select')[1]; | |
0e62bf0b M |
273 | const option = selector.getElementsByTagName('li')[7]; |
274 | Simulate.click(option); | |
275 | setTimeout(next, 100); | |
276 | }, (next) => { | |
277 | expect(change).to.be.ok(); | |
4984ed85 | 278 | expect(change.minute()).to.be(7); |
279 | expect((header).value).to.be('01:07:04'); | |
280 | expect((input).value).to.be('01:07:04'); | |
0e62bf0b M |
281 | expect(picker.state.open).to.be.ok(); |
282 | ||
283 | next(); | |
284 | }], () => { | |
285 | done(); | |
286 | }); | |
287 | }); | |
288 | ||
289 | it('hidden correctly', (done) => { | |
290 | let change; | |
291 | const picker = renderPicker({ | |
292 | onChange(v) { | |
293 | change = v; | |
294 | }, | |
71bd9bc1 M |
295 | disabledHours() { |
296 | return [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23]; | |
297 | }, | |
298 | hideDisabledOptions: true, | |
0e62bf0b M |
299 | }); |
300 | expect(picker.state.open).not.to.be.ok(); | |
301 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; | |
302 | let header; | |
303 | async.series([(next) => { | |
304 | expect(picker.state.open).to.be(false); | |
305 | ||
306 | Simulate.click(input); | |
307 | setTimeout(next, 100); | |
308 | }, (next) => { | |
309 | expect(picker.state.open).to.be(true); | |
4984ed85 | 310 | header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
311 | 'rc-time-picker-panel-input')[0]; | |
0e62bf0b | 312 | expect(header).to.be.ok(); |
4984ed85 | 313 | expect((header).value).to.be('01:02:04'); |
314 | expect((input).value).to.be('01:02:04'); | |
0e62bf0b | 315 | |
4984ed85 | 316 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
317 | 'rc-time-picker-panel-select')[0]; | |
0e62bf0b M |
318 | const option = selector.getElementsByTagName('li')[3]; |
319 | Simulate.click(option); | |
320 | setTimeout(next, 100); | |
321 | }, (next) => { | |
322 | expect(change).to.be.ok(); | |
4984ed85 | 323 | expect(change.hour()).to.be(6); |
324 | expect((header).value).to.be('06:02:04'); | |
325 | expect((input).value).to.be('06:02:04'); | |
0e62bf0b M |
326 | expect(picker.state.open).to.be.ok(); |
327 | ||
4984ed85 | 328 | const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, |
329 | 'rc-time-picker-panel-select')[0]; | |
0e62bf0b M |
330 | const option = selector.getElementsByTagName('li')[4]; |
331 | Simulate.click(option); | |
332 | setTimeout(next, 100); | |
333 | }, (next) => { | |
334 | expect(change).to.be.ok(); | |
4984ed85 | 335 | expect(change.hour()).to.be(8); |
336 | expect((header).value).to.be('08:02:04'); | |
337 | expect((input).value).to.be('08:02:04'); | |
0e62bf0b M |
338 | expect(picker.state.open).to.be.ok(); |
339 | ||
340 | next(); | |
341 | }], () => { | |
342 | done(); | |
343 | }); | |
344 | }); | |
02d1b455 | 345 | }); |
dd2f6abd AS |
346 | |
347 | ||
348 | describe('select in 12 hours mode', () => { | |
349 | it('renders correctly', (done) => { | |
350 | const picker = renderPicker({ | |
351 | use12Hours: true, | |
352 | defaultValue: moment().hour(14).minute(0).second(0), | |
353 | showSecond: false, | |
354 | format: undefined, | |
355 | }); | |
356 | expect(picker.state.open).not.to.be.ok(); | |
357 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
358 | 'rc-time-picker-input')[0]; | |
359 | let selector; | |
360 | async.series([(next) => { | |
361 | expect(picker.state.open).to.be(false); | |
362 | ||
363 | Simulate.click(input); | |
364 | setTimeout(next, 100); | |
365 | }, (next) => { | |
366 | expect(picker.state.open).to.be(true); | |
367 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
368 | 'rc-time-picker-panel-select'); | |
369 | expect((input).value).to.be('2:00 pm'); | |
370 | ||
371 | setTimeout(next, 100); | |
372 | }, (next) => { | |
373 | expect(selector.length).to.be(3); | |
374 | ||
375 | next(); | |
376 | }], () => { | |
377 | done(); | |
378 | }); | |
379 | }); | |
380 | ||
381 | ||
382 | it('renders 12am correctly', (done) => { | |
383 | const picker = renderPicker({ | |
384 | use12Hours: true, | |
385 | defaultValue: moment().hour(0).minute(0).second(0), | |
386 | showSecond: false, | |
387 | format: undefined, | |
388 | }); | |
389 | expect(picker.state.open).not.to.be.ok(); | |
390 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
391 | 'rc-time-picker-input')[0]; | |
392 | let selector; | |
393 | async.series([(next) => { | |
394 | expect(picker.state.open).to.be(false); | |
395 | ||
396 | Simulate.click(input); | |
397 | setTimeout(next, 100); | |
398 | }, (next) => { | |
399 | expect(picker.state.open).to.be(true); | |
400 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
401 | 'rc-time-picker-panel-select'); | |
dd2f6abd AS |
402 | setTimeout(next, 100); |
403 | }, (next) => { | |
404 | expect(selector.length).to.be(3); | |
405 | ||
406 | next(); | |
407 | }], () => { | |
408 | done(); | |
409 | }); | |
410 | }); | |
35949690 AS |
411 | |
412 | ||
413 | it('renders 5am correctly', (done) => { | |
414 | const picker = renderPicker({ | |
415 | use12Hours: true, | |
416 | defaultValue: moment().hour(0).minute(0).second(0), | |
417 | showSecond: false, | |
418 | format: undefined, | |
419 | }); | |
420 | expect(picker.state.open).not.to.be.ok(); | |
421 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
422 | 'rc-time-picker-input')[0]; | |
423 | let selector; | |
424 | async.series([(next) => { | |
425 | expect(picker.state.open).to.be(false); | |
426 | ||
427 | Simulate.click(input); | |
428 | setTimeout(next, 100); | |
429 | }, (next) => { | |
430 | expect(picker.state.open).to.be(true); | |
431 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
432 | 'rc-time-picker-panel-select')[0]; | |
433 | expect((input).value).to.be('12:00 am'); | |
434 | const option = selector.getElementsByTagName('li')[3]; | |
435 | Simulate.click(option); | |
436 | setTimeout(next, 100); | |
437 | }, (next) => { | |
438 | expect((input).value).to.be('3:00 am'); | |
439 | next(); | |
440 | }], () => { | |
441 | done(); | |
442 | }); | |
443 | }); | |
0328afec AS |
444 | |
445 | ||
446 | it('renders 12am/pm correctly', (done) => { | |
447 | const picker = renderPicker({ | |
448 | use12Hours: true, | |
449 | defaultValue: moment().hour(0).minute(0).second(0), | |
450 | showSecond: false, | |
451 | format: undefined, | |
452 | }); | |
453 | expect(picker.state.open).not.to.be.ok(); | |
454 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
455 | 'rc-time-picker-input')[0]; | |
456 | let selector; | |
457 | async.series([(next) => { | |
458 | expect(picker.state.open).to.be(false); | |
459 | ||
460 | Simulate.click(input); | |
461 | setTimeout(next, 100); | |
462 | }, (next) => { | |
463 | expect(picker.state.open).to.be(true); | |
464 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
465 | 'rc-time-picker-panel-select')[2]; | |
466 | expect((input).value).to.be('12:00 am'); | |
467 | const option = selector.getElementsByTagName('li')[1]; | |
468 | Simulate.click(option); | |
79405d1b AS |
469 | setTimeout(next, 200); |
470 | }, (next) => { | |
471 | expect((input).value).to.be('12:00 pm'); | |
472 | next(); | |
473 | }, (next) => { | |
474 | Simulate.click(selector.getElementsByTagName('li')[0]); | |
475 | setTimeout(next, 200); | |
0328afec | 476 | }, (next) => { |
2a8cf5ae | 477 | expect((input).value).to.be('12:00 am'); |
0328afec AS |
478 | next(); |
479 | }], () => { | |
480 | done(); | |
481 | }); | |
482 | }); | |
369ffb9a | 483 | |
484 | it('renders uppercase AM correctly', (done) => { | |
485 | const picker = renderPicker({ | |
486 | use12Hours: true, | |
487 | defaultValue: moment().hour(0).minute(0).second(0), | |
488 | showSecond: false, | |
489 | format: 'h:mm A', | |
490 | }); | |
491 | expect(picker.state.open).not.to.be.ok(); | |
492 | const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, | |
493 | 'rc-time-picker-input')[0]; | |
494 | let selector; | |
495 | async.series([(next) => { | |
496 | expect(picker.state.open).to.be(false); | |
497 | ||
498 | Simulate.click(input); | |
499 | setTimeout(next, 100); | |
500 | }, (next) => { | |
501 | expect(picker.state.open).to.be(true); | |
502 | selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, | |
503 | 'rc-time-picker-panel-select')[2]; | |
504 | expect((input).value).to.be('12:00 AM'); | |
505 | const option = selector.getElementsByTagName('li')[1]; | |
506 | Simulate.click(option); | |
507 | setTimeout(next, 200); | |
508 | }, (next) => { | |
509 | expect((input).value).to.be('12:00 PM'); | |
510 | next(); | |
511 | }, (next) => { | |
512 | Simulate.click(selector.getElementsByTagName('li')[0]); | |
513 | setTimeout(next, 200); | |
514 | }, (next) => { | |
515 | expect((input).value).to.be('12:00 AM'); | |
516 | next(); | |
517 | }], () => { | |
518 | done(); | |
519 | }); | |
520 | }); | |
dd2f6abd | 521 | }); |
02d1b455 | 522 | }); |