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