1 import ReactDOM from 'react-dom';
2 import React from 'react';
3 import TimePicker from '../src/TimePicker';
4 import TestUtils from 'react-dom/test-utils';
5 const Simulate = TestUtils.Simulate;
6 import expect from 'expect.js';
7 import async from 'async';
8 import moment from 'moment';
10 const map = (arr, fn) => Array.prototype.map.call(arr, fn);
12 describe('Select', () => {
15 function renderPicker(props) {
16 const showSecond = true;
17 const format = 'HH:mm:ss';
19 return ReactDOM.render(
22 showSecond={showSecond}
23 defaultValue={moment('01:02:04', format)}
29 container = document.createElement('div');
30 document.body.appendChild(container);
34 ReactDOM.unmountComponentAtNode(container);
35 document.body.removeChild(container);
38 describe('select panel', () => {
39 it('select panel reacts to mouseenter and mouseleave correctly', (done) => {
40 const picker = renderPicker();
41 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
42 'rc-time-picker-input')[0];
43 async.series([(next) => {
44 Simulate.click(input);
45 setTimeout(next, 100);
47 const re = /(^|\s+)rc-time-picker-panel-select-active(\s+|$)/;
48 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
49 'rc-time-picker-panel-select')[0];
51 expect(re.test(selector.className)).to.be(false);
53 Simulate.mouseEnter(selector);
54 expect(re.test(selector.className)).to.be(true);
56 Simulate.mouseLeave(selector);
57 expect(re.test(selector.className)).to.be(false);
65 it('shows only numbers according to step props', (done) => {
66 const picker = renderPicker({
71 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
72 'rc-time-picker-input')[0];
73 async.series([(next) => {
74 Simulate.click(input);
75 setTimeout(next, 100);
77 const selectors = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
78 'rc-time-picker-panel-select');
80 const hourSelector = selectors[0];
81 const minuteSelector = selectors[1];
82 const secondSelector = selectors[2];
84 const hours = map(hourSelector.getElementsByTagName('li'), (li) => li.innerHTML);
85 expect(hours).to.eql(['00', '05', '10', '15', '20']);
87 const minutes = map(minuteSelector.getElementsByTagName('li'), (li) => li.innerHTML);
88 expect(minutes).to.eql(['00', '15', '30', '45']);
90 const seconds = map(secondSelector.getElementsByTagName('li'), (li) => li.innerHTML);
91 expect(seconds).to.eql(['00', '21', '42']);
98 describe('select number', () => {
99 it('select number correctly', (done) => {
100 const picker = renderPicker();
101 expect(picker.state.open).not.to.be.ok();
102 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
103 'rc-time-picker-input')[0];
105 async.series([(next) => {
106 expect(picker.state.open).to.be(false);
108 Simulate.click(input);
109 setTimeout(next, 100);
111 expect(picker.state.open).to.be(true);
112 selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
113 'rc-time-picker-panel-select');
115 setTimeout(next, 100);
117 expect(selector.length).to.be(3);
126 describe('select to change value', () => {
127 it('hour correctly', (done) => {
129 const picker = renderPicker({
134 expect(picker.state.open).not.to.be.ok();
135 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
136 'rc-time-picker-input')[0];
138 async.series([(next) => {
139 expect(picker.state.open).to.be(false);
141 Simulate.click(input);
142 setTimeout(next, 100);
144 expect(picker.state.open).to.be(true);
145 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
146 'rc-time-picker-panel-input')[0];
147 expect(header).to.be.ok();
148 expect((header).value).to.be('01:02:04');
149 expect((input).value).to.be('01:02:04');
151 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
152 'rc-time-picker-panel-select')[0];
153 const option = selector.getElementsByTagName('li')[19];
154 Simulate.click(option);
155 setTimeout(next, 100);
157 expect(change).to.be.ok();
158 expect(change.hour()).to.be(19);
159 expect((header).value).to.be('19:02:04');
160 expect((input).value).to.be('19:02:04');
161 expect(picker.state.open).to.be.ok();
169 it('minute correctly', (done) => {
171 const picker = renderPicker({
176 expect(picker.state.open).not.to.be.ok();
177 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
178 'rc-time-picker-input')[0];
180 async.series([(next) => {
181 expect(picker.state.open).to.be(false);
183 Simulate.click(input);
184 setTimeout(next, 100);
186 expect(picker.state.open).to.be(true);
187 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
188 'rc-time-picker-panel-input')[0];
189 expect(header).to.be.ok();
190 expect((header).value).to.be('01:02:04');
191 expect((input).value).to.be('01:02:04');
193 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
194 'rc-time-picker-panel-select')[1];
195 const option = selector.getElementsByTagName('li')[19];
196 Simulate.click(option);
197 setTimeout(next, 100);
199 expect(change).to.be.ok();
200 expect(change.minute()).to.be(19);
201 expect((header).value).to.be('01:19:04');
202 expect((input).value).to.be('01:19:04');
203 expect(picker.state.open).to.be.ok();
211 it('second correctly', (done) => {
213 const picker = renderPicker({
218 expect(picker.state.open).not.to.be.ok();
219 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
220 'rc-time-picker-input')[0];
222 async.series([(next) => {
223 expect(picker.state.open).to.be(false);
225 Simulate.click(input);
226 setTimeout(next, 100);
228 expect(picker.state.open).to.be(true);
229 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
230 'rc-time-picker-panel-input')[0];
231 expect(header).to.be.ok();
232 expect((header).value).to.be('01:02:04');
233 expect((input).value).to.be('01:02:04');
235 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
236 'rc-time-picker-panel-select')[2];
237 const option = selector.getElementsByTagName('li')[19];
238 Simulate.click(option);
239 setTimeout(next, 100);
241 expect(change).to.be.ok();
242 expect(change.second()).to.be(19);
243 expect((header).value).to.be('01:02:19');
244 expect((input).value).to.be('01:02:19');
245 expect(picker.state.open).to.be.ok();
253 it('disabled correctly', (done) => {
255 const picker = renderPicker({
262 disabledSeconds(h, m) {
266 expect(picker.state.open).not.to.be.ok();
267 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
268 'rc-time-picker-input')[0];
270 async.series([(next) => {
271 expect(picker.state.open).to.be(false);
273 Simulate.click(input);
274 setTimeout(next, 100);
276 expect(picker.state.open).to.be(true);
277 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
278 'rc-time-picker-panel-input')[0];
279 expect(header).to.be.ok();
280 expect((header).value).to.be('01:02:04');
281 expect((input).value).to.be('01:02:04');
283 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
284 'rc-time-picker-panel-select')[1];
285 const option = selector.getElementsByTagName('li')[1];
286 Simulate.click(option);
287 setTimeout(next, 100);
289 expect(change).not.to.be.ok();
290 expect((header).value).to.be('01:02:04');
291 expect((input).value).to.be('01:02:04');
292 expect(picker.state.open).to.be.ok();
294 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
295 'rc-time-picker-panel-select')[2];
296 const option = selector.getElementsByTagName('li')[3];
297 Simulate.click(option);
298 setTimeout(next, 100);
300 expect(change).not.to.be.ok();
301 expect((header).value).to.be('01:02:04');
302 expect((input).value).to.be('01:02:04');
303 expect(picker.state.open).to.be.ok();
305 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
306 'rc-time-picker-panel-select')[1];
307 const option = selector.getElementsByTagName('li')[7];
308 Simulate.click(option);
309 setTimeout(next, 100);
311 expect(change).to.be.ok();
312 expect(change.minute()).to.be(7);
313 expect((header).value).to.be('01:07:04');
314 expect((input).value).to.be('01:07:04');
315 expect(picker.state.open).to.be.ok();
323 it('hidden correctly', (done) => {
325 const picker = renderPicker({
330 return [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23];
332 hideDisabledOptions: true,
334 expect(picker.state.open).not.to.be.ok();
335 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
337 async.series([(next) => {
338 expect(picker.state.open).to.be(false);
340 Simulate.click(input);
341 setTimeout(next, 100);
343 expect(picker.state.open).to.be(true);
344 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
345 'rc-time-picker-panel-input')[0];
346 expect(header).to.be.ok();
347 expect((header).value).to.be('01:02:04');
348 expect((input).value).to.be('01:02:04');
350 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
351 'rc-time-picker-panel-select')[0];
352 const option = selector.getElementsByTagName('li')[3];
353 Simulate.click(option);
354 setTimeout(next, 100);
356 expect(change).to.be.ok();
357 expect(change.hour()).to.be(6);
358 expect((header).value).to.be('06:02:04');
359 expect((input).value).to.be('06:02:04');
360 expect(picker.state.open).to.be.ok();
362 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
363 'rc-time-picker-panel-select')[0];
364 const option = selector.getElementsByTagName('li')[4];
365 Simulate.click(option);
366 setTimeout(next, 100);
368 expect(change).to.be.ok();
369 expect(change.hour()).to.be(8);
370 expect((header).value).to.be('08:02:04');
371 expect((input).value).to.be('08:02:04');
372 expect(picker.state.open).to.be.ok();
382 describe('select in 12 hours mode', () => {
383 it('renders correctly', (done) => {
384 const picker = renderPicker({
386 defaultValue: moment().hour(14).minute(0).second(0),
390 expect(picker.state.open).not.to.be.ok();
391 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
392 'rc-time-picker-input')[0];
394 async.series([(next) => {
395 expect(picker.state.open).to.be(false);
397 Simulate.click(input);
398 setTimeout(next, 100);
400 expect(picker.state.open).to.be(true);
401 selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
402 'rc-time-picker-panel-select');
403 expect((input).value).to.be('2:00 pm');
405 setTimeout(next, 100);
407 expect(selector.length).to.be(3);
416 it('renders 12am correctly', (done) => {
417 const picker = renderPicker({
419 defaultValue: moment().hour(0).minute(0).second(0),
423 expect(picker.state.open).not.to.be.ok();
424 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
425 'rc-time-picker-input')[0];
427 async.series([(next) => {
428 expect(picker.state.open).to.be(false);
430 Simulate.click(input);
431 setTimeout(next, 100);
433 expect(picker.state.open).to.be(true);
434 selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
435 'rc-time-picker-panel-select');
436 setTimeout(next, 100);
438 expect(selector.length).to.be(3);
447 it('renders 5am correctly', (done) => {
448 const picker = renderPicker({
450 defaultValue: moment().hour(0).minute(0).second(0),
454 expect(picker.state.open).not.to.be.ok();
455 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
456 'rc-time-picker-input')[0];
458 async.series([(next) => {
459 expect(picker.state.open).to.be(false);
461 Simulate.click(input);
462 setTimeout(next, 100);
464 expect(picker.state.open).to.be(true);
465 selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
466 'rc-time-picker-panel-select')[0];
467 expect((input).value).to.be('12:00 am');
468 const option = selector.getElementsByTagName('li')[3];
469 Simulate.click(option);
470 setTimeout(next, 100);
472 expect((input).value).to.be('3:00 am');
480 it('renders 12am/pm correctly', (done) => {
481 const picker = renderPicker({
483 defaultValue: moment().hour(0).minute(0).second(0),
487 expect(picker.state.open).not.to.be.ok();
488 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
489 'rc-time-picker-input')[0];
491 async.series([(next) => {
492 expect(picker.state.open).to.be(false);
494 Simulate.click(input);
495 setTimeout(next, 100);
497 expect(picker.state.open).to.be(true);
498 selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
499 'rc-time-picker-panel-select')[2];
500 expect((input).value).to.be('12:00 am');
501 const option = selector.getElementsByTagName('li')[1];
502 Simulate.click(option);
503 setTimeout(next, 200);
505 expect((input).value).to.be('12:00 pm');
508 Simulate.click(selector.getElementsByTagName('li')[0]);
509 setTimeout(next, 200);
511 expect((input).value).to.be('12:00 am');
518 it('renders uppercase AM correctly', (done) => {
519 const picker = renderPicker({
521 defaultValue: moment().hour(0).minute(0).second(0),
525 expect(picker.state.open).not.to.be.ok();
526 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
527 'rc-time-picker-input')[0];
529 async.series([(next) => {
530 expect(picker.state.open).to.be(false);
532 Simulate.click(input);
533 setTimeout(next, 100);
535 expect(picker.state.open).to.be(true);
536 selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
537 'rc-time-picker-panel-select')[2];
538 expect((input).value).to.be('12:00 AM');
539 const option = selector.getElementsByTagName('li')[1];
540 Simulate.click(option);
541 setTimeout(next, 200);
543 expect((input).value).to.be('12:00 PM');
546 Simulate.click(selector.getElementsByTagName('li')[0]);
547 setTimeout(next, 200);
549 expect((input).value).to.be('12:00 AM');
556 it('disabled correctly', done => {
558 const picker = renderPicker({
565 return [0, 2, 6, 18, 12];
567 defaultValue: moment()
573 expect(picker.state.open).not.to.be.ok();
574 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
579 expect(picker.state.open).to.be(false);
581 Simulate.click(input);
582 setTimeout(next, 100);
585 expect(picker.state.open).to.be(true);
586 header = TestUtils.scryRenderedDOMComponentsWithClass(
587 picker.panelInstance,
588 'rc-time-picker-panel-input',
590 expect(header).to.be.ok();
591 expect(header.value).to.be('12:00 am');
592 expect(input.value).to.be('12:00 am');
594 const selector = TestUtils.scryRenderedDOMComponentsWithClass(
595 picker.panelInstance,
596 'rc-time-picker-panel-select',
598 const option = selector.getElementsByTagName('li')[2];
599 Simulate.click(option);
600 setTimeout(next, 100);
603 expect(change).not.to.be.ok();
604 expect(header.value).to.be('12:00 am');
605 expect(input.value).to.be('12:00 am');
606 expect(picker.state.open).to.be.ok();
608 const selector = TestUtils.scryRenderedDOMComponentsWithClass(
609 picker.panelInstance,
610 'rc-time-picker-panel-select',
612 const option = selector.getElementsByTagName('li')[5];
613 Simulate.click(option);
614 setTimeout(next, 100);
617 expect(change).to.be.ok();
618 expect(change.hour()).to.be(5);
619 expect(header.value).to.be('5:00 am');
620 expect(input.value).to.be('5:00 am');
621 expect(picker.state.open).to.be.ok();
623 const selector = TestUtils.scryRenderedDOMComponentsWithClass(
624 picker.panelInstance,
625 'rc-time-picker-panel-select',
627 Simulate.click(selector.getElementsByTagName('li')[1]);
629 setTimeout(next, 200);
633 expect(change).not.to.be.ok();
634 expect(header.value).to.be('5:00 pm');
635 expect(input.value).to.be('5:00 pm');
636 expect(picker.state.open).to.be.ok();
638 const selector = TestUtils.scryRenderedDOMComponentsWithClass(
639 picker.panelInstance,
640 'rc-time-picker-panel-select',
642 const option = selector.getElementsByTagName('li')[0];
643 Simulate.click(option);
644 setTimeout(next, 100);
647 expect(change).not.to.be.ok();
648 expect(header.value).to.be('5:00 pm');
649 expect(input.value).to.be('5:00 pm');
650 expect(picker.state.open).to.be.ok();
652 const selector = TestUtils.scryRenderedDOMComponentsWithClass(
653 picker.panelInstance,
654 'rc-time-picker-panel-select',
656 const option = selector.getElementsByTagName('li')[5];
657 Simulate.click(option);
658 setTimeout(next, 100);
661 expect(change).to.be.ok();
662 expect(change.hour()).to.be(17);
663 expect(header.value).to.be('5:00 pm');
664 expect(input.value).to.be('5:00 pm');
665 expect(picker.state.open).to.be.ok();