]> git.immae.eu Git - github/fretlink/time-picker.git/blame - tests/Select.spec.jsx
select text when focusing time input
[github/fretlink/time-picker.git] / tests / Select.spec.jsx
CommitLineData
02d1b455
M
1import ReactDOM from 'react-dom';
2import React from 'react';
3import TimePicker from '../src/TimePicker';
3ab3a128 4import TestUtils from 'react-dom/test-utils';
e9060dda 5const Simulate = TestUtils.Simulate;
02d1b455
M
6import expect from 'expect.js';
7import async from 'async';
4984ed85 8import moment from 'moment';
e9060dda 9
10describe('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});