view | history | commit | commitdiff
marquex
2015-10-14 692390104a4e1409fb99a1be69026af876ecac06
commit | author | age
0d9dc7 1 // Create the dom before requiring react
M 2 var DOM = require( './testdom');
3 DOM();
4
516b36 5
M 6 // Needs to be global to work in Travis CI
59314a 7 React = require('react/addons');
15436d 8
M 9 var ReactAddons = require('react/addons'),
0d9dc7 10     Utils = React.addons.TestUtils,
b4f456 11     Datetime = require('../DateTime'),
0d9dc7 12     assert = require('assert'),
M 13     moment = require('moment')
14 ;
15
516b36 16 var createDatetime = function( props ){
0d9dc7 17     document.body.innerHTML = '';
M 18
516b36 19     React.render(
M 20         React.createElement( Datetime, props ),
0d9dc7 21         document.body
M 22     );
23
24     return document.body.children[0];
25 };
26
59314a 27 var trigger = function( name, element ){
M 28     var ev = document.createEvent("MouseEvents");
29    ev.initEvent(name, true, true);
30    element.dispatchEvent( ev );
31 };
32
33 var ev = React.addons.TestUtils.Simulate;
34 var dt = {
35     dt: function(){
36         return document.body.children[0];
37     },
38     view: function(){
39         return this.dt().children[1].children[0];
40     },
41     input: function(){
42         return this.dt().children[0];
43     },
44     switcher: function(){
45         return document.querySelector('.switch');
46     },
47     timeSwitcher: function(){
48         return document.querySelector('.timeToggle');
49     },
50     year: function( n ){
51         var years = document.querySelectorAll('.year');
52         return years[ n || 0 ];
53     },
54     month: function( n ){
55         var months = document.querySelectorAll('.month');
56         return months[ n || 0 ];
57     },
58     day: function( n ){
59         return document.querySelector('.day[data-value="' + n + '"]');
60     },
61     next: function(){
62         return document.querySelector('.next button');
63     },
64     prev: function(){
65         return document.querySelector('.prev button');
66     },
67     timeUp: function( n ){
68         return document.querySelectorAll('.rdtCounter')[ n ].children[0];
69     },
70     timeDown: function( n ){
71         return document.querySelectorAll('.rdtCounter')[ n ].children[2];
72     },
73     hour: function(){
74         return document.querySelectorAll('.rdtCount')[0];
75     },
76     minute: function(){
77         return document.querySelectorAll('.rdtCount')[1];
78     },
79     second: function(){
80         return document.querySelectorAll('.rdtCount')[2];
81     },
82     milli: function(){
83         return document.querySelector('.rdtMilli input');
84     }
85 };
86
87 var date = new Date( 2000, 0, 15, 2, 2, 2, 2 ),
0d9dc7 88     mDate = moment( date ),
M 89     strDate = mDate.format('L') + ' ' + mDate.format('LT')
90 ;
91
92 describe( 'Datetime', function(){
93     it( 'Create Datetime', function(){
516b36 94         var component = createDatetime({});
0d9dc7 95         assert( component );
M 96         assert.equal( component.children.length, 2 );
97         assert.equal( component.children[0].tagName , 'INPUT' );
98         assert.equal( component.children[1].tagName , 'DIV' );
99     });
100
101     it( 'input=false', function(){
516b36 102         var component = createDatetime({ input: false });
0d9dc7 103         assert( component );
M 104         assert.equal( component.children.length, 1 );
105         assert.equal( component.children[0].tagName , 'DIV' );
106     });
107
108     it( 'Date value', function(){
516b36 109         var component = createDatetime({ value: date }),
0d9dc7 110             input = component.children[0]
M 111         ;
112         assert.equal( input.value, strDate );
113     });
114
115     it( 'Moment value', function(){
516b36 116         var component = createDatetime({ value: mDate }),
0d9dc7 117             input = component.children[0]
M 118         ;
119         assert.equal( input.value, strDate );
120     });
121
122     it( 'String value', function(){
516b36 123         var component = createDatetime({ value: strDate }),
0d9dc7 124             input = component.children[0]
M 125         ;
126         assert.equal( input.value, strDate );
127     });
128
129     it( 'Date defaultValue', function(){
516b36 130         var component = createDatetime({ defaultValue: date }),
0d9dc7 131             input = component.children[0]
M 132         ;
133         assert.equal( input.value, strDate );
134     });
135
136     it( 'Moment defaultValue', function(){
516b36 137         var component = createDatetime({ defaultValue: mDate }),
0d9dc7 138             input = component.children[0]
M 139         ;
140         assert.equal( input.value, strDate );
141     });
142
143     it( 'String defaultValue', function(){
516b36 144         var component = createDatetime({ defaultValue: strDate }),
0d9dc7 145             input = component.children[0]
M 146         ;
147         assert.equal( input.value, strDate );
148     });
149
150     it( 'dateFormat', function(){
516b36 151         var component = createDatetime({ value: date, dateFormat: 'M&D' }),
0d9dc7 152             input = component.children[0]
M 153         ;
154         assert.equal( input.value, mDate.format('M&D LT') );
155     });
156
157     it( 'dateFormat=false', function(){
516b36 158         var component = createDatetime({ value: date, dateFormat: false }),
0d9dc7 159             input = component.children[0],
59314a 160             view = dt.view()
0d9dc7 161         ;
M 162         assert.equal( input.value, mDate.format('LT') );
163         // The view must be the timepicker
164         assert.equal( view.className, 'rdtTime' );
165         // There must not be a date toggle
166         assert.equal( view.querySelectorAll('thead').length, 0);
167     });
168
169     it( 'timeFormat', function(){
170         var format = 'HH:mm:ss:SSS',
516b36 171             component = createDatetime({ value: date, timeFormat: format }),
0d9dc7 172             input = component.children[0]
M 173         ;
174         assert.equal( input.value, mDate.format('L ' + format) );
175     });
176
177     it( 'timeFormat=false', function(){
516b36 178         var component = createDatetime({ value: date, timeFormat: false }),
0d9dc7 179             input = component.children[0],
59314a 180             view = dt.view()
0d9dc7 181         ;
M 182         assert.equal( input.value, mDate.format('L') );
183         // The view must be the daypicker
184         assert.equal( view.className, 'rdtDays' );
185         // There must not be a time toggle
186         assert.equal( view.querySelectorAll('.timeToggle').length, 0);
187     });
188
189     it( 'viewMode=years', function(){
516b36 190         var component = createDatetime({ viewMode: 'years' }),
59314a 191             view = dt.view()
0d9dc7 192         ;
M 193
194         assert.equal( view.className, 'rdtYears' );
195     });
196
197     it( 'viewMode=months', function(){
516b36 198         var component = createDatetime({ viewMode: 'months' }),
59314a 199             view = dt.view()
0d9dc7 200         ;
M 201
202         assert.equal( view.className, 'rdtMonths' );
203     });
204
205     it( 'viewMode=time', function(){
516b36 206         var component = createDatetime({ viewMode: 'time' }),
59314a 207             view = dt.view()
0d9dc7 208         ;
M 209
210         assert.equal( view.className, 'rdtTime' );
211     });
212
213     it( 'className', function(){
516b36 214         var component = createDatetime({ className: 'custom' });
0d9dc7 215         assert.notEqual( component.className.indexOf('custom'), -1 );
M 216     });
217
218     it( 'inputProps', function(){
516b36 219         var component = createDatetime({ inputProps: { className: 'myInput', type: 'email' } }),
0d9dc7 220             input = component.children[0]
M 221         ;
222
223         assert.equal( input.className, 'myInput' );
224         assert.equal( input.type, 'email' );
225     });
226
227     it( 'renderDay', function(){
228         var props, currentDate, selectedDate,
516b36 229             component = createDatetime({ value: mDate, renderDay: function( p, current, selected ){
0d9dc7 230                 props = p;
M 231                 currentDate = current;
232                 selectedDate = selected;
233
234                 return React.DOM.td( props, 'day' );
235             }}),
59314a 236             view = dt.view()
0d9dc7 237         ;
M 238
239         // Last day should be 6th of february
240         assert.equal( currentDate.day(), 6 );
241         assert.equal( currentDate.month(), 1 );
242
243         // The date must be the same
244         assert.equal( selectedDate.isSame( mDate ), true );
245
246         // There should be a onClick function in the props
247         assert.equal( typeof props.onClick, 'function' );
248
249         // The cell text should be 'day'
250         assert.equal( view.querySelector('.day').innerHTML, 'day' );
251     });
252
253
254     it( 'renderMonth', function(){
255         var props, month, year, selectedDate,
516b36 256             component = createDatetime({ value: mDate, viewMode: 'months', renderMonth: function( p, m, y, selected ){
0d9dc7 257                 props = p;
M 258                 month = m;
259                 year = y;
260                 selectedDate = selected;
261
262                 return React.DOM.td( props, 'month' );
263             }}),
59314a 264             view = dt.view()
0d9dc7 265         ;
M 266
267         // The date must be the same
268         assert.equal( selectedDate.isSame( mDate ), true );
269
270         assert.equal( month, 11 );
271         assert.equal( year, 2000 );
272
273         // There should be a onClick function in the props
274         assert.equal( typeof props.onClick, 'function' );
275
276         // The cell text should be 'day'
277         assert.equal( view.querySelector('.month').innerHTML, 'month' );
278     });
279
280     it( 'renderYear', function(){
281         var props, year, selectedDate,
516b36 282             component = createDatetime({ value: mDate, viewMode: 'years', renderYear: function( p, y, selected ){
0d9dc7 283                 props = p;
M 284                 year = y;
285                 selectedDate = selected;
286
287                 return React.DOM.td( props, 'year' );
288             }}),
59314a 289             view = dt.view()
0d9dc7 290         ;
M 291
292         // The date must be the same
293         assert.equal( selectedDate.isSame( mDate ), true );
294
295         assert.equal( year, 2010 );
296
297         // There should be a onClick function in the props
298         assert.equal( typeof props.onClick, 'function' );
299
300         // The cell text should be 'day'
301         assert.equal( view.querySelector('.year').innerHTML, 'year' );
302     });
59314a 303
M 304     it( 'Time pickers depends on the time format', function() {
305         createDatetime({ viewMode: 'time', timeFormat: "HH:mm:ss:SSS"});
306         assert.equal( document.querySelectorAll('.rdtCounter').length, 4 );
307
308         createDatetime({ viewMode: 'time', timeFormat: "HH:mm:ss"});
309         assert.equal( document.querySelectorAll('.rdtCounter').length, 3 );
310
311         createDatetime({ viewMode: 'time', timeFormat: "HH:mm"});
312         assert.equal( document.querySelectorAll('.rdtCounter').length, 2 );
313
314         createDatetime({ viewMode: 'time', timeFormat: "HH"});
315         assert.equal( document.querySelectorAll('.rdtCounter').length, 1 );
316     });
317
318     it( 'viewChange', function() {
319         createDatetime({viewMode: 'time' });
320
321         assert.equal( dt.view().className, 'rdtTime' );
322         ev.click( dt.switcher() );
323         assert.equal( dt.view().className, 'rdtDays' );
324         ev.click( dt.switcher() );
325         assert.equal( dt.view().className, 'rdtMonths' );
326         ev.click( dt.switcher() );
327         assert.equal( dt.view().className, 'rdtYears' );
328     });
329
330     it( 'switch to time', function(){
331         createDatetime({});
332         assert.equal( dt.view().className, 'rdtDays' );
333         ev.click( dt.timeSwitcher() );
334         assert.equal( dt.view().className, 'rdtTime' );
335     })
336
337     it( 'selectYear', function(){
338         createDatetime({ viewMode: 'years', defaultValue: date });
339         assert.equal( dt.view().className, 'rdtYears' );
340         assert.equal( dt.switcher().innerHTML, '2000-2009' );
341
342         // First year is 1999
343         ev.click( dt.year() );
344         assert.equal( dt.view().className, 'rdtMonths' );
345         assert.equal( dt.switcher().innerHTML, '1999' );
346     });
347
348     it( 'increase decade', function(){
349         createDatetime({ viewMode: 'years', defaultValue: date });
350
351         assert.equal( dt.switcher().innerHTML, '2000-2009' );
352         ev.click( dt.next() );
353         assert.equal( dt.switcher().innerHTML, '2010-2019' );
354         ev.click( dt.next() );
355         assert.equal( dt.switcher().innerHTML, '2020-2029' );
356     });
357
358
359     it( 'decrease decade', function(){
360         createDatetime({ viewMode: 'years', defaultValue: date });
361
362         assert.equal( dt.switcher().innerHTML, '2000-2009' );
363         ev.click( dt.prev() );
364         assert.equal( dt.switcher().innerHTML, '1990-1999' );
365         ev.click( dt.prev() );
366         assert.equal( dt.switcher().innerHTML, '1980-1989' );
367     });
368
369     it( 'selectMonth', function(){
370         createDatetime({ viewMode: 'months', defaultValue: date });
371         assert.equal( dt.view().className, 'rdtMonths' );
372         assert.equal( dt.switcher().innerHTML, '2000' );
373
374         ev.click( dt.month(1) );
375         assert.equal( dt.view().className, 'rdtDays' );
376         assert.equal( dt.switcher().getAttribute('data-value'), "1" );
377     });
378
379     it( 'increase year', function(){
380         createDatetime({ viewMode: 'months', defaultValue: date });
381
382         assert.equal( dt.switcher().getAttribute('data-value'), '2000' );
383         ev.click( dt.next() );
384         assert.equal( dt.switcher().getAttribute('data-value'), '2001' );
385         ev.click( dt.next() );
386         assert.equal( dt.switcher().getAttribute('data-value'), '2002' );
387     });
388
389
390     it( 'decrease year', function(){
391         createDatetime({ viewMode: 'months', defaultValue: date });
392
393         assert.equal( dt.switcher().getAttribute('data-value'), '2000' );
394         ev.click( dt.prev() );
395         assert.equal( dt.switcher().getAttribute('data-value'), '1999' );
396         ev.click( dt.prev() );
397         assert.equal( dt.switcher().getAttribute('data-value'), '1998' );
398     });
399
400     it( 'increase month', function(){
401         createDatetime({ defaultValue: date });
402
403         assert.equal( dt.switcher().getAttribute('data-value'), '0' );
404         ev.click( dt.next() );
405         assert.equal( dt.switcher().getAttribute('data-value'), '1' );
406         ev.click( dt.next() );
407         assert.equal( dt.switcher().getAttribute('data-value'), '2' );
408     });
409
410     it( 'decrease month', function(){
411         createDatetime({ defaultValue: date });
412
413         assert.equal( dt.switcher().getAttribute('data-value'), '0' );
414         ev.click( dt.prev() );
415         assert.equal( dt.switcher().getAttribute('data-value'), '11' );
416         ev.click( dt.prev() );
417         assert.equal( dt.switcher().getAttribute('data-value'), '10' );
418     });
419
420     it( 'open picker', function(){
421         createDatetime({});
422         assert.equal(dt.dt().className.indexOf('rdtOpen'), -1);
423         ev.focus( dt.input() );
424         assert.notEqual(dt.dt().className.indexOf('rdtOpen'), -1);
425     });
426
427     it( 'onSelect', function( done ){
428         createDatetime({ defaultValue: date, onChange: function( selected ){
429             assert.equal( selected.date(), 2 );
430             assert.equal( selected.month(), mDate.month() );
431             assert.equal( selected.year(), mDate.year() );
432             done();
433         }});
434
435         ev.click( dt.day( 2 ) );
436     });
437
438     it( 'multiple onSelect', function( done ){
439         var i = 0;
440         createDatetime({ defaultValue: date, onChange: function( selected ){
441             i++;
442             if( i > 2 ){
443                 assert.equal( selected.date(), 4 );
444                 assert.equal( selected.month(), mDate.month() );
445                 assert.equal( selected.year(), mDate.year() );
446                 done();
447             }
448         }});
449
450         ev.click( dt.day( 2 ) );
451         ev.click( dt.day( 3 ) );
452         ev.click( dt.day( 4 ) );
453     });
454
455     it( 'onBlur', function(){
456         createDatetime({ value: date, onBlur: function( selected ){
457             assert.equal( dt.dt().className.indexOf( 'rdtOpen' ), -1 );
458             assert.equal( selected.date(), mDate.date() );
459             assert.equal( selected.month(), mDate.month() );
460             assert.equal( selected.year(), mDate.year() );
461             done();
462         }});
463
464         assert.equal( dt.dt().className.indexOf( 'rdtOpen' ), -1 );
465         ev.focus( dt.input() );
466         assert.notEqual( dt.dt().className.indexOf( 'rdtOpen' ), -1 );
467         trigger( 'click', document.body );
468     });
469
470     it( 'increase time', function( done ){
471         var i = 0;
472         createDatetime({ timeFormat: "HH:mm:ss:SSS", viewMode: 'time', defaultValue: date, onChange: function( selected ){
473             i++;
474             if( i > 2 ){
475                 assert.equal( selected.hour(), 3 );
476                 assert.equal( selected.minute(), 3 );
477                 assert.equal( selected.second(), 3 );
478                 done();
479             }
480         }});
481
482         trigger( 'mousedown', dt.timeUp( 0 ) );
483         trigger('mouseup', document.body );
484         assert.equal( dt.hour().innerHTML, 3 );
485         trigger( 'mousedown', dt.timeUp( 1 ) );
486         trigger( 'mouseup', dt.timeUp( 1 ) );
487         assert.equal( dt.minute().innerHTML, 3 );
488         trigger( 'mousedown', dt.timeUp( 2 ) );
489         trigger( 'mouseup', dt.timeUp( 2 ) );
490         assert.equal( dt.second().innerHTML, 3 );
491     });
492
493     it( 'decrease time', function( done ){
494         var i = 0;
495         createDatetime({ timeFormat: "HH:mm:ss:SSS", viewMode: 'time', defaultValue: date, onChange: function( selected ){
496             i++;
497             if( i > 2 ){
498                 assert.equal( selected.hour(), 1 );
499                 assert.equal( selected.minute(), 1 );
500                 assert.equal( selected.second(), 1 );
501                 done();
502             }
503         }});
504
505         trigger('mousedown', dt.timeDown( 0 ) );
506         trigger('mouseup', dt.timeDown( 0 ) );
507         assert.equal( dt.hour().innerHTML, 1 );
508         trigger('mousedown', dt.timeDown( 1 ) );
509         trigger('mouseup', dt.timeDown( 1 ) );
510         assert.equal( dt.minute().innerHTML, 1 );
511         trigger('mousedown', dt.timeDown( 2 ) );
512         trigger('mouseup', dt.timeDown( 2 ) );
513         assert.equal( dt.second().innerHTML, 1 );
514     });
515
516     it( 'long increase time', function( done ){
517         var i = 0;
518         createDatetime({ timeFormat: "HH:mm:ss:SSS", viewMode: 'time', defaultValue: date});
519
520         trigger( 'mousedown', dt.timeUp( 0 ) );
521         setTimeout( function(){
522             trigger('mouseup', document.body );
523             assert.notEqual( dt.hour().innerHTML, 2 );
524             assert.notEqual( dt.hour().innerHTML, 3 );
525             done();
526         }, 700 );
527     });
528
529     it( 'long decrease time', function( done ){
530         var i = 0;
531         createDatetime({ timeFormat: "HH:mm:ss:SSS", viewMode: 'time', defaultValue: date});
532
533         trigger( 'mousedown', dt.timeDown( 0 ) );
534         setTimeout( function(){
535             trigger('mouseup', document.body );
536             assert.notEqual( dt.hour().innerHTML, 1 );
537             assert.notEqual( dt.hour().innerHTML, 0 );
538             done();
539         }, 700 );
540     });
62fd2f 541
M 542     it( 'invalid input value', function( done ){
543         createDatetime({ defaultValue: 'luis', onChange: function( updated ){
544             assert.equal( mDate.format('L LT'), updated.format('L LT') );
545             done();
546         }});
547
548         assert.equal( dt.input().value, 'luis' );
549         dt.input().value = strDate;
550         Utils.Simulate.change( dt.input() );
551     });
552
553     it( 'delete input value', function( done ){
554         createDatetime({ defaultValue: date, onChange: function( date ){
555             assert.equal( date, '' );
556             done();
557         }});
558         dt.input().value = '';
559         Utils.Simulate.change( dt.input() );
560     });
0eb226 561
NB 562     it( 'strictParsing=true', function( done ){
563         var invalidStrDate = strDate + 'x';
564         createDatetime({ defaultValue: '', strictParsing: true, onChange: function( updated ){
565             assert.equal( updated, invalidStrDate);
566             done();
567         }});
568
569         dt.input().value = invalidStrDate;
570         Utils.Simulate.change( dt.input() );
571     });
572
573     it( 'strictParsing=false', function( done ){
574         var invalidStrDate = strDate + 'x';
575         createDatetime({ defaultValue: '', strictParsing: false, onChange: function( updated ){
576             assert.equal( mDate.format('L LT'), updated.format('L LT') );
577             done();
578         }});
579
580         dt.input().value = invalidStrDate;
581         Utils.Simulate.change( dt.input() );
582     });
0d9dc7 583 });
M 584