tests/additional-unit-tests/datetimepicker/datetimepicker-tests.js

   1 /*jslint browser: true*/
   2 /*global $, jQuery, test, equal, ok, asyncTest, Globalize, start, stop, deepEqual, range*/
   3 $(document).ready( function () {
   4
   5         module( "Date Time Picker" );
   6
   7         var datetime,
   8                 date,
   9                 time,
  10                 custom,
  11                 make2digit,
  12                 isLeapYear,
  13                 getDay,
  14                 getCurDate,
  15                 objDatetime,
  16                 objDate,
  17                 objTime,
  18                 objCustom,
  19                 markup,
  20                 datetime2 ,
  21                 date2,
  22                 time2 ,
  23                 custom2 ,
  24                 objDatetime2,
  25                 objDate2 ,
  26                 objTime2,
  27                 objCustom2;
  28
  29         // trigger pagecreate
  30         $( "#page-1" ).page();
  31
  32         datetime = $( "#datetime" )[0];
  33         date = $( "#date" )[0];
  34         time = $( "#time" )[0];
  35         custom = $( "#custom" )[0];
  36
  37         make2digit = function (arr) {
  38                 var i, ret;
  39                 for ( i = 0;  i < arr.length;  i++ ) {
  40                         arr[i] = arr[i].toString();
  41                         ret = arr[i].toString(10);
  42                         if ( arr[i] < 10 ) {
  43                                 arr[i] = "0" + arr[i];
  44                         }
  45                 }
  46                 return arr;
  47         } ;
  48
  49         isLeapYear = function ( year ) {
  50                 return year % 4 ? 0 : ( year % 100 ? 1 : ( year % 400 ? 0 : 1 ) );
  51         } ;
  52
  53         getDay = function () {
  54                 var date = new Date( "May 2 18:30:00 2012" ),
  55                         daysInMonth = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ],
  56                         day = daysInMonth[ date.getMonth() ];
  57                 if ( day == 28 ) {
  58                         day += isLeapYear( date.getFullYear() );
  59                 }
  60                 return day;
  61         } ;
  62
  63         getCurDate = function () {
  64                 var date = new Date( "May 2 18:30:00 2012" );
  65                 return date.getDate();
  66         } ;
  67
  68         //Dymanically creating datetimepicker
  69         objDatetime = $(datetime).data( "datetimepicker" );
  70         objDate = $(date).data( "datetimepicker" );
  71         objTime = $(time).data( "datetimepicker" );
  72         objCustom = $(custom).data( "datetimepicker" );
  73         markup = '<ul data-role="listview" id="datetimeList2">' +
  74                                                 '<li class="ui-li-2line-sub-main">' +
  75                                                         '<span class="ui-li-text-main">' +
  76                                                                 '<input type="datetime" id="datetime2" />' +
  77                                                         '</span>' +
  78                                                         '<span class="ui-li-text-sub">DateTimePicker</span>' +
  79                                                 '</li>' +
  80                                                 '<li class="ui-li-2line-sub-main">' +
  81                                                         '<span class="ui-li-text-main">' +
  82                                                                 '<input type="date" id="date2"/>' +
  83                                                         '</span>' +
  84                                                         '<span class="ui-li-text-sub">DatePicker</span>' +
  85                                                 '</li>' +
  86                                                 '<li class="ui-li-2line-sub-main">' +
  87                                                         '<span class="ui-li-text-main">' +
  88                                                                 '<input type="time" id="time2"/>' +
  89                                                         '</span>' +
  90                                                         '<span class="ui-li-text-sub">TimePicker</span>' +
  91                                                 '</li>' +
  92                                                 '<li class="ui-li-2line-sub-main">' +
  93                                                         '<span class="ui-li-text-main">' +
  94                                                                 '<input type="datetime" id="custom2" data-format="MMM dd yyyy hh:mm tt" value="2012-06-30T00:00:00+00:00" />' +
  95                                                         '</span>' +
  96                                                         '<span class="ui-li-text-sub">DateTimePicker</span>' +
  97                                                 '</li>' +
  98                                         '</ul>';
  99
 100         // trigger pagecreate
 101         $( "#page-1" ).page();
 102         $('#page-1').find( ":jqmData(role=content)" ).append(markup);
 103         $('#page-1').find( ":jqmData(role=content)" ).trigger('create');
 104
 105         datetime2 = $( "#datetime2" )[0];
 106         date2 = $( "#date2" )[0];
 107         time2 = $( "#time2" )[0];
 108         custom2 = $( "#custom2" )[0];
 109
 110         objDatetime2 = $(datetime2).data( "datetimepicker" );
 111         objDate2 = $(date2).data( "datetimepicker" );
 112         objTime2 = $(time2).data( "datetimepicker" );
 113         objCustom2 = $(custom2).data( "datetimepicker" );
 114         /* End of dynamic creation*/
 115
 116         asyncTest( "Auto-initialization", function () {
 117                 ok( objDatetime, "should Date/Time instace created" );
 118                 ok( objDate, "should Date instance created" );
 119                 ok( objTime, "should Time instance created" );
 120                 ok( objCustom, "should Custom format instance created" );
 121                 start();
 122         });
 123
 124         asyncTest( "Options", function () {
 125                 equal( objDatetime.options.type, "datetime", "should 'datetime' type created." );
 126                 equal( objDate.options.type, "date", "should 'date' type created." );
 127                 equal( objTime.options.type, "time", "should 'time' type created." );
 128                 equal( objCustom.options.type, "datetime", "should custom format created as 'datetime' type." );
 129                 equal( objCustom.options.format, "MMM dd yyyy hh:mm tt", "should accept custom format string." );
 130                 equal( objCustom.options.date.toString(), new Date( "Jun 30 00:00:00 UTC+0000 2012" ).toString(), "should accept preset date." );
 131                 start();
 132         });
 133
 134         asyncTest( "Private Methods", function () {
 135                 var months, updateFieldTest ;
 136                 ok( ( function () {
 137                         var year = 0,
 138                                 expect = false,
 139                                 actual = false;
 140
 141                         try {
 142                                 for ( year = 1;  year < 2100;  year++ ) {
 143                                         expect = new Date( year, 1, 29 ).getDate() == 29;
 144                                         actual = objDatetime._isLeapYear( year );
 145                                         if ( expect != actual ) {
 146                                                 throw year + " is wrong";
 147                                         }
 148                                 }
 149                         } catch ( exception ) {
 150                                 console.log( exception );
 151                                 return false;
 152                         }
 153                         return true;
 154                 }()), "should be able to check leap year" );
 155
 156                 updateFieldTest = function ( format, value, obj, expect ) {
 157                         var target = $('<div data-pat=' + format + '></div>');
 158                         obj._updateField( target, value );
 159
 160                         return target.text();
 161                 } ;
 162
 163                 deepEqual(
 164                         [
 165                                 updateFieldTest( "h", 0, objTime2 ),
 166                                 updateFieldTest( "hh", 1, objTime2 ),
 167                                 updateFieldTest( "H", 13 , objTime2),
 168                                 updateFieldTest( "HH", 9, objTime2 ),
 169                                 updateFieldTest( "m", 9, objTime2 ),
 170                                 updateFieldTest( "mm", 9 , objTime2),
 171                                 updateFieldTest( "s", 1, objTime2 ),
 172                                 updateFieldTest( "ss", 10 , objTime2),
 173                                 updateFieldTest( "MMM", 3 , objTime2),
 174                                 updateFieldTest( "MMMM", 3, objTime2 ),
 175                                 updateFieldTest( "yy", 95, objTime2 ),
 176                                 updateFieldTest( "yyyy", 95, objTime2 )
 177                         ],
 178                         [
 179                                 "12", "01", "13", "09", "9", "09", "1" , "10", Globalize.culture().calendar.months.namesAbbr[2], Globalize.culture().calendar.months.names[2], "95", "0095"
 180                         ],
 181                         "should update field to given value with format"
 182                 );
 183
 184                 deepEqual(
 185                         [
 186                                 updateFieldTest( "h", 0, objDate2),
 187                                 updateFieldTest( "hh", 1, objDate2 ),
 188                                 updateFieldTest( "H", 13 , objDate2),
 189                                 updateFieldTest( "HH", 9, objDate2 ),
 190                                 updateFieldTest( "m", 9, objDate2 ),
 191                                 updateFieldTest( "mm", 9, objDate2 ),
 192                                 updateFieldTest( "s", 1, objDate2 ),
 193                                 updateFieldTest( "ss", 10 , objDate2),
 194                                 updateFieldTest( "MMM", 3 , objDate2),
 195                                 updateFieldTest( "MMMM", 3 , objDate2),
 196                                 updateFieldTest( "yy", 9, objDate2 ),
 197                                 updateFieldTest( "yyyy", 9, objDate2 )
 198                         ],
 199                         [
 200                                 "12", "01", "13", "09", "9", "09", "1" , "10", Globalize.culture().calendar.months.namesAbbr[2], Globalize.culture().calendar.months.names[2], "09", "0009"
 201                         ],
 202                         "should update field to given value with format"
 203                 );
 204
 205                 ok( ( function () {
 206                         var beforeNoon = objTime.options.date.getHours() < 12;
 207                         objTime._switchAmPm();
 208                         return beforeNoon != objTime.options.date.getHours() < 12;
 209                 }()), "should change AM/PM by AMPM button" );
 210
 211                 deepEqual( [ "MMMM", " ", "dd", " ", "yyyy", " ", "hh", ":", "mm", " ", "dummy space" ],
 212                         objTime._parsePattern( "MMMM dd yyyy hh:mm 'dummy space'" ), "should parse DTF string as array" );
 213
 214                 objDatetime.options.date = new Date( "May 2 18:30:00 2012" );
 215
 216                 months = Globalize.culture().calendar.months.namesAbbr.slice();
 217                 if ( months.length > 12 ) {
 218                         months.length = 12;
 219                 }
 220
 221
 222                 deepEqual(
 223                         [
 224                                 {
 225                                         values : make2digit( range( 1, getDay() )),
 226                                         data : range( 1, getDay() ),
 227                                         current : getCurDate() - 1,
 228                                         numItems : getDay()
 229                                 },
 230                                 {
 231                                         values : make2digit (range( 0, 59 )),
 232                                         data : range(0, 59),
 233                                         numItems : 60,
 234                                         current : 0
 235                                 },
 236                                 {
 237                                         values : range( 1900, 2100 ),
 238                                         data : range( 1900, 2100 ),
 239                                         numItems : 201,
 240                                         current : 112
 241                                 },
 242                                 { // hour h 6
 243                                         values : [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ],
 244                                         data : [ 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 12 ],
 245                                         numItems : 12,
 246                                         current : 5
 247                                 },
 248                                 { // hour H 6
 249                                         values : range( 0, 23 ),
 250                                         data : range( 0, 23 ),
 251                                         numItems : 24,
 252                                         current : 18
 253                                 },
 254                                 {
 255                                         values : months,
 256                                         data : range( 1, 12 ),
 257                                         numItems : 12,
 258                                         current : 4
 259                                 },
 260
 261                         ],
 262                         [
 263                                 objDatetime._populateDataSelector( "day", "dd", objDatetime ),
 264                                 objDatetime._populateDataSelector( "sec", "ss", objDatetime ),
 265                                 objDatetime._populateDataSelector( "year", "YYYY", objDatetime ),
 266                                 objDatetime._populateDataSelector( "hour", "hh", objDatetime ),
 267                                 objDatetime._populateDataSelector( "hour", "H", objDatetime ),
 268                                 objDatetime._populateDataSelector( "month", "MMM", objDatetime ),
 269
 270                         ],
 271                         "should populate data selector by given field and pattern"
 272                 );
 273
 274                 /*date Value Api*/
 275                 objDate.value( "Jan 1 09:00:00 2012" );
 276                 equal(objDate.value( ) , "2012-01-01" , "Set and get value for date" );
 277
 278                 /*date Value Api*/
 279                 objTime.value( "Jan 1 09:00:00 2012" );
 280                 equal(objTime.value( ) , "09:00:00" , "Set and get value for time" );
 281                 start();
 282         });
 283
 284         asyncTest( "Public Methods", function () {
 285                 objDatetime.value.call( objDatetime, "Jan 1 09:00:00 2012" );
 286                 equal( "2012-01-01T09:00:00", objDatetime.value(), "should set and get value by API" );
 287                 var format = "yyyy MM dd hh mm";
 288                 objDatetime._setFormat( format );
 289                 equal( objDatetime.option( "format" ), format, "should set type and format" );
 290                 start();
 291         });
 292
 293         asyncTest( "Events", function () {
 294                 var str = "May 2 18:00:00 2012";
 295
 296                 $(datetime).bind( "date-changed", function (e, date) {
 297                         equal( objDatetime.value(), "2012-05-02T18:00:00", "Should invoke event when date changed" );
 298                         start();
 299                 });
 300
 301                 objDatetime.value( str );
 302         });
 303
 304
 305         asyncTest( "Auto-initialization Dynamic", function () {
 306                 ok( objDatetime2, "should Date/Time instace created" );
 307                 ok( objDate2, "should Date instance created" );
 308                 ok( objTime2, "should Time instance created" );
 309                 ok( objCustom2, "should Custom format instance created" );
 310                 start();
 311         });
 312
 313         asyncTest( "Options Dynamic", function () {
 314                 equal( objDatetime2.options.type, "datetime", "should 'datetime' type created." );
 315                 equal( objDate2.options.type, "date", "should 'date' type created." );
 316                 equal( objTime2.options.type, "time", "should 'time' type created." );
 317                 equal( objCustom2.options.type, "datetime", "should custom format created as 'datetime' type." );
 318                 equal( objCustom2.options.format, "MMM dd yyyy hh:mm tt", "should accept custom format string." );
 319                 equal( objCustom2.options.date.toString(), new Date( "Jun 30 00:00:00 UTC+0000 2012" ).toString(), "should accept preset date." );
 320
 321                 start();
 322         });
 323
 324         asyncTest( "Private Methods Dynamic", function () {
 325                 var months, updateFieldTest ;
 326                 ok( ( function () {
 327                         var year = 0,
 328                                 expect = false,
 329                                 actual = false;
 330
 331                         try {
 332                                 for ( year = 1;  year < 2100;  year++ ) {
 333                                         expect = new Date( year, 1, 29 ).getDate() == 29;
 334                                         actual = objDatetime2._isLeapYear( year );
 335                                         if ( expect != actual ) {
 336                                                 throw year + " is wrong";
 337                                         }
 338                                 }
 339                         } catch ( exception ) {
 340                                 console.log( exception );
 341                                 return false;
 342                         }
 343                         return true;
 344                 }()), "should be able to check leap year" );
 345
 346                 updateFieldTest = function ( format, value, obj, expect ) {
 347                         var target = $('<div data-pat=' + format + '></div>');
 348                         obj._updateField( target, value );
 349
 350                         return target.text();
 351                 } ;
 352
 353                 deepEqual(
 354                         [
 355                                 updateFieldTest( "h", 0, objTime2 ),
 356                                 updateFieldTest( "hh", 1, objTime2 ),
 357                                 updateFieldTest( "H", 13 , objTime2),
 358                                 updateFieldTest( "HH", 9, objTime2 ),
 359                                 updateFieldTest( "m", 9, objTime2 ),
 360                                 updateFieldTest( "mm", 9 , objTime2),
 361                                 updateFieldTest( "s", 1, objTime2 ),
 362                                 updateFieldTest( "ss", 10 , objTime2),
 363                                 updateFieldTest( "MMM", 3 , objTime2),
 364                                 updateFieldTest( "MMMM", 3, objTime2 ),
 365                                 updateFieldTest( "yy", 95, objTime2 ),
 366                                 updateFieldTest( "yyyy", 95, objTime2 )
 367                         ],
 368                         [
 369                                 "12", "01", "13", "09", "9", "09", "1" , "10", Globalize.culture().calendar.months.namesAbbr[2], Globalize.culture().calendar.months.names[2], "95", "0095"
 370                         ],
 371                         "should update field to given value with format"
 372                 );
 373
 374                 deepEqual(
 375                         [
 376                                 updateFieldTest( "h", 0, objDate2),
 377                                 updateFieldTest( "hh", 1, objDate2 ),
 378                                 updateFieldTest( "H", 13 , objDate2),
 379                                 updateFieldTest( "HH", 9, objDate2 ),
 380                                 updateFieldTest( "m", 9, objDate2 ),
 381                                 updateFieldTest( "mm", 9, objDate2 ),
 382                                 updateFieldTest( "s", 1, objDate2 ),
 383                                 updateFieldTest( "ss", 10 , objDate2),
 384                                 updateFieldTest( "MMM", 3 , objDate2),
 385                                 updateFieldTest( "MMMM", 3 , objDate2),
 386                                 updateFieldTest( "yy", 9, objDate2 ),
 387                                 updateFieldTest( "yyyy", 9, objDate2 )
 388                         ],
 389                         [
 390                                 "12", "01", "13", "09", "9", "09", "1" , "10", Globalize.culture().calendar.months.namesAbbr[2], Globalize.culture().calendar.months.names[2], "09", "0009"
 391                         ],
 392                         "should update field to given value with format"
 393                 );
 394
 395                 ok( ( function () {
 396                         var beforeNoon = objTime2.options.date.getHours() < 12;
 397                         objTime2._switchAmPm();
 398                         return beforeNoon != objTime2.options.date.getHours() < 12;
 399                 }()), "should change AM/PM by AMPM button" );
 400
 401                 deepEqual(
 402                         [ "MMMM", " ", "dd", " ", "yyyy", " ", "hh", ":", "mm", " ", "dummy space" ],
 403                         objTime2._parsePattern( "MMMM dd yyyy hh:mm 'dummy space'" ),
 404                         "should parse DTF string as array"
 405                 );
 406
 407                 objDatetime2.options.date = new Date( "May 2 18:30:00 2012" );
 408
 409                 months = Globalize.culture().calendar.months.namesAbbr.slice();
 410                 if ( months.length > 12 ) {
 411                         months.length = 12;
 412                 }
 413
 414                 deepEqual(
 415                         [
 416                                 {
 417                                         values : make2digit( range( 1, getDay() )),
 418                                         data : range( 1, getDay() ),
 419                                         current : getCurDate() - 1,
 420                                         numItems : getDay()
 421                                 },
 422                                 {
 423                                         values : make2digit (range( 0, 59 )),
 424                                         data : range(0, 59),
 425                                         numItems : 60,
 426                                         current : 0
 427                                 },
 428                                 {
 429                                         values : range( 1900, 2100 ),
 430                                         data : range( 1900, 2100 ),
 431                                         numItems : 201,
 432                                         current : 112
 433                                 },
 434                                 { // hour h 6
 435                                         values : [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ],
 436                                         data : [ 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 12 ],
 437                                         numItems : 12,
 438                                         current : 5
 439                                 },
 440                                 { // hour H 6
 441                                         values : range( 0, 23 ),
 442                                         data : range( 0, 23 ),
 443                                         numItems : 24,
 444                                         current : 18
 445                                 },
 446                                 {
 447                                         values : months,
 448                                         data : range( 1, 12 ),
 449                                         numItems : 12,
 450                                         current : 4
 451                                 },
 452
 453                         ],
 454                         [
 455                                 objDatetime2._populateDataSelector( "day", "dd", objDatetime2 ),
 456                                 objDatetime2._populateDataSelector( "sec", "ss", objDatetime2 ),
 457                                 objDatetime2._populateDataSelector( "year", "YYYY", objDatetime2 ),
 458                                 objDatetime2._populateDataSelector( "hour", "hh", objDatetime2 ),
 459                                 objDatetime2._populateDataSelector( "hour", "H", objDatetime2 ),
 460                                 objDatetime2._populateDataSelector( "month", "MMM", objDatetime2 ),
 461
 462                         ],
 463                         "should populate data selector by given field and pattern"
 464                 );
 465
 466                 /*date Value Api*/
 467                 objDate2.value( "Jan 1 09:00:00 2012" );
 468                 equal(objDate2.value( ) , "2012-01-01" , "Set and get value for date" );
 469
 470                 /*date Value Api*/
 471                 objTime2.value( "Jan 1 09:00:00 2012" );
 472                 equal(objTime2.value( ) , "09:00:00" , "Set and get value for time" );
 473
 474                 start();
 475         });
 476
 477         asyncTest( "Public Methods Dynamic", function () {
 478                 objDatetime2.value.call( objDatetime2, "Jan 1 09:00:00 2012" );
 479                 equal( "2012-01-01T09:00:00", objDatetime2.value(), "should set and get value by API" );
 480                 var format = "yyyy MM dd hh mm";
 481                 objDatetime2._setFormat( format );
 482                 equal( objDatetime2.option( "format" ), format, "should set type and format" );
 483                 start();
 484         });
 485
 486         asyncTest( "Events Dynamic", function () {
 487                 var str = "May 2 18:00:00 2012";
 488                 $(datetime2).bind( "date-changed", function (e, date) {
 489                         equal( objDatetime2.value(), "2012-05-02T18:00:00", "Should invoke event when date changed" );
 490                         start();
 491                 });
 492
 493                 objDatetime2.value( str );
 494         });
 495
 496
 497 });