[Summary view] [Print] [Text view]

   1  module('Keyboard Navigation 2012', {
   2      setup: function(){
   3          /*
   4              Tests start with picker on March 31, 2012.  Fun facts:
   5  
   6              * February 1, 2012 was on a Wednesday
   7              * February 29, 2012 was on a Wednesday
   8              * March 1, 2012 was on a Thursday
   9              * March 31, 2012 was on a Saturday
  10          */
  11          this.input = $('<input type="text" value="31-03-2012">')
  12                          .appendTo('#qunit-fixture')
  13                          .datepicker({format: "dd-mm-yyyy"})
  14                          .focus(); // Activate for visibility checks
  15          this.dp = this.input.data('datepicker')
  16          this.picker = this.dp.picker;
  17      },
  18      teardown: function(){
  19          this.picker.remove();
  20      }
  21  });
  22  
  23  
  24  test('by day (right/left arrows)', function(){
  25      var target;
  26  
  27      equal(this.dp.viewMode, 0);
  28      target = this.picker.find('.datepicker-days thead th.switch');
  29      equal(target.text(), 'March 2012', 'Title is "March 2012"');
  30  
  31      // Navigation: -1 day, left arrow key
  32      this.input.trigger({
  33          type: 'keydown',
  34          keyCode: 37
  35      });
  36      // Both updated on keyboard navigation
  37      datesEqual(this.dp.viewDate, new Date(2012, 2, 30));
  38      datesEqual(this.dp.date, new Date(2012, 2, 30));
  39      // Month not changed
  40      target = this.picker.find('.datepicker-days thead th.switch');
  41      equal(target.text(), 'March 2012', 'Title is "March 2012"');
  42  
  43      // Navigation: +1 day, right arrow key
  44      for (var i=0; i<2; i++)
  45          this.input.trigger({
  46              type: 'keydown',
  47              keyCode: 39
  48          });
  49      datesEqual(this.dp.viewDate, new Date(2012, 3, 1));
  50      datesEqual(this.dp.date, new Date(2012, 3, 1));
  51      // Month changed: April 1 (this is not a joke!)
  52      target = this.picker.find('.datepicker-days thead th.switch');
  53      equal(target.text(), 'April 2012', 'Title is "April 2012"');
  54  });
  55  
  56  test('by week (up/down arrows)', function(){
  57      var target;
  58  
  59      equal(this.dp.viewMode, 0);
  60      target = this.picker.find('.datepicker-days thead th.switch');
  61      equal(target.text(), 'March 2012', 'Title is "March 2012"');
  62  
  63      // Navigation: -1 week, up arrow key
  64      this.input.trigger({
  65          type: 'keydown',
  66          keyCode: 38
  67      });
  68      // Both updated on keyboard navigation
  69      datesEqual(this.dp.viewDate, new Date(2012, 2, 24));
  70      datesEqual(this.dp.date, new Date(2012, 2, 24));
  71      // Month not changed
  72      target = this.picker.find('.datepicker-days thead th.switch');
  73      equal(target.text(), 'March 2012', 'Title is "March 2012"');
  74  
  75      // Navigation: +1 week, down arrow key
  76      for (var i=0; i<2; i++)
  77          this.input.trigger({
  78              type: 'keydown',
  79              keyCode: 40
  80          });
  81      datesEqual(this.dp.viewDate, new Date(2012, 3, 7));
  82      datesEqual(this.dp.date, new Date(2012, 3, 7));
  83      target = this.picker.find('.datepicker-days thead th.switch');
  84      equal(target.text(), 'April 2012', 'Title is "April 2012"');
  85  });
  86  
  87  test('by month, v1 (shift + left/right arrows)', function(){
  88      var target;
  89  
  90      equal(this.dp.viewMode, 0);
  91      target = this.picker.find('.datepicker-days thead th.switch');
  92      equal(target.text(), 'March 2012', 'Title is "March 2012"');
  93  
  94      // Navigation: -1 month, shift + left arrow key
  95      this.input.trigger({
  96          type: 'keydown',
  97          keyCode: 37,
  98          shiftKey: true
  99      });
 100      // Both updated on keyboard navigation, w/ graceful date ends
 101      datesEqual(this.dp.viewDate, new Date(2012, 1, 29));
 102      datesEqual(this.dp.date, new Date(2012, 1, 29));
 103      // Month not changed
 104      target = this.picker.find('.datepicker-days thead th.switch');
 105      equal(target.text(), 'February 2012', 'Title is "February 2012"');
 106  
 107      // Navigation: +1 month, shift + right arrow key
 108      for (var i=0; i<2; i++)
 109          this.input.trigger({
 110              type: 'keydown',
 111              keyCode: 39,
 112              shiftKey: true
 113          });
 114      datesEqual(this.dp.viewDate, new Date(2012, 3, 29));
 115      datesEqual(this.dp.date, new Date(2012, 3, 29));
 116      target = this.picker.find('.datepicker-days thead th.switch');
 117      equal(target.text(), 'April 2012', 'Title is "April 2012"');
 118  });
 119  
 120  test('by month, v2 (shift + up/down arrows)', function(){
 121      var target;
 122  
 123      equal(this.dp.viewMode, 0);
 124      target = this.picker.find('.datepicker-days thead th.switch');
 125      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 126  
 127      // Navigation: -1 month, shift + up arrow key
 128      this.input.trigger({
 129          type: 'keydown',
 130          keyCode: 38,
 131          shiftKey: true
 132      });
 133      // Both updated on keyboard navigation, w/ graceful date ends
 134      datesEqual(this.dp.viewDate, new Date(2012, 1, 29));
 135      datesEqual(this.dp.date, new Date(2012, 1, 29));
 136      // Month not changed
 137      target = this.picker.find('.datepicker-days thead th.switch');
 138      equal(target.text(), 'February 2012', 'Title is "February 2012"');
 139  
 140      // Navigation: +1 month, shift + down arrow key
 141      for (var i=0; i<2; i++)
 142          this.input.trigger({
 143              type: 'keydown',
 144              keyCode: 40,
 145              shiftKey: true
 146          });
 147      datesEqual(this.dp.viewDate, new Date(2012, 3, 29));
 148      datesEqual(this.dp.date, new Date(2012, 3, 29));
 149      target = this.picker.find('.datepicker-days thead th.switch');
 150      equal(target.text(), 'April 2012', 'Title is "April 2012"');
 151  });
 152  
 153  test('by year, v1 (ctrl + left/right arrows)', function(){
 154      var target;
 155  
 156      equal(this.dp.viewMode, 0);
 157      target = this.picker.find('.datepicker-days thead th.switch');
 158      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 159  
 160      // Navigation: -1 year, ctrl + left arrow key
 161      this.input.trigger({
 162          type: 'keydown',
 163          keyCode: 37,
 164          ctrlKey: true
 165      });
 166      // Both updated on keyboard navigation
 167      datesEqual(this.dp.viewDate, new Date(2011, 2, 31));
 168      datesEqual(this.dp.date, new Date(2011, 2, 31));
 169      // Month not changed
 170      target = this.picker.find('.datepicker-days thead th.switch');
 171      equal(target.text(), 'March 2011', 'Title is "March 2011"');
 172  
 173      // Navigation: +1 year, ctrl + right arrow key
 174      for (var i=0; i<2; i++)
 175          this.input.trigger({
 176              type: 'keydown',
 177              keyCode: 39,
 178              ctrlKey: true
 179          });
 180      datesEqual(this.dp.viewDate, new Date(2013, 2, 31));
 181      datesEqual(this.dp.date, new Date(2013, 2, 31));
 182      target = this.picker.find('.datepicker-days thead th.switch');
 183      equal(target.text(), 'March 2013', 'Title is "March 2013"');
 184  });
 185  
 186  test('by year, v2 (ctrl + up/down arrows)', function(){
 187      var target;
 188  
 189      equal(this.dp.viewMode, 0);
 190      target = this.picker.find('.datepicker-days thead th.switch');
 191      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 192  
 193      // Navigation: -1 year, ctrl + up arrow key
 194      this.input.trigger({
 195          type: 'keydown',
 196          keyCode: 38,
 197          ctrlKey: true
 198      });
 199      // Both updated on keyboard navigation
 200      datesEqual(this.dp.viewDate, new Date(2011, 2, 31));
 201      datesEqual(this.dp.date, new Date(2011, 2, 31));
 202      // Month not changed
 203      target = this.picker.find('.datepicker-days thead th.switch');
 204      equal(target.text(), 'March 2011', 'Title is "March 2011"');
 205  
 206      // Navigation: +1 year, ctrl + down arrow key
 207      for (var i=0; i<2; i++)
 208          this.input.trigger({
 209              type: 'keydown',
 210              keyCode: 40,
 211              ctrlKey: true
 212          });
 213      datesEqual(this.dp.viewDate, new Date(2013, 2, 31));
 214      datesEqual(this.dp.date, new Date(2013, 2, 31));
 215      target = this.picker.find('.datepicker-days thead th.switch');
 216      equal(target.text(), 'March 2013', 'Title is "March 2013"');
 217  });
 218  
 219  test('by year, v3 (ctrl + shift + left/right arrows)', function(){
 220      var target;
 221  
 222      equal(this.dp.viewMode, 0);
 223      target = this.picker.find('.datepicker-days thead th.switch');
 224      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 225  
 226      // Navigation: -1 year, ctrl + left arrow key
 227      this.input.trigger({
 228          type: 'keydown',
 229          keyCode: 37,
 230          ctrlKey: true,
 231          shiftKey: true
 232      });
 233      // Both updated on keyboard navigation
 234      datesEqual(this.dp.viewDate, new Date(2011, 2, 31));
 235      datesEqual(this.dp.date, new Date(2011, 2, 31));
 236      // Month not changed
 237      target = this.picker.find('.datepicker-days thead th.switch');
 238      equal(target.text(), 'March 2011', 'Title is "March 2011"');
 239  
 240      // Navigation: +1 year, ctrl + right arrow key
 241      for (var i=0; i<2; i++)
 242          this.input.trigger({
 243              type: 'keydown',
 244              keyCode: 39,
 245              ctrlKey: true,
 246              shiftKey: true
 247          });
 248      datesEqual(this.dp.viewDate, new Date(2013, 2, 31));
 249      datesEqual(this.dp.date, new Date(2013, 2, 31));
 250      target = this.picker.find('.datepicker-days thead th.switch');
 251      equal(target.text(), 'March 2013', 'Title is "March 2013"');
 252  });
 253  
 254  test('by year, v4 (ctrl + shift + up/down arrows)', function(){
 255      var target;
 256  
 257      equal(this.dp.viewMode, 0);
 258      target = this.picker.find('.datepicker-days thead th.switch');
 259      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 260  
 261      // Navigation: -1 year, ctrl + up arrow key
 262      this.input.trigger({
 263          type: 'keydown',
 264          keyCode: 38,
 265          ctrlKey: true,
 266          shiftKey: true
 267      });
 268      // Both updated on keyboard navigation
 269      datesEqual(this.dp.viewDate, new Date(2011, 2, 31));
 270      datesEqual(this.dp.date, new Date(2011, 2, 31));
 271      // Month not changed
 272      target = this.picker.find('.datepicker-days thead th.switch');
 273      equal(target.text(), 'March 2011', 'Title is "March 2011"');
 274  
 275      // Navigation: +1 year, ctrl + down arrow key
 276      for (var i=0; i<2; i++)
 277          this.input.trigger({
 278              type: 'keydown',
 279              keyCode: 40,
 280              ctrlKey: true,
 281              shiftKey: true
 282          });
 283      datesEqual(this.dp.viewDate, new Date(2013, 2, 31));
 284      datesEqual(this.dp.date, new Date(2013, 2, 31));
 285      target = this.picker.find('.datepicker-days thead th.switch');
 286      equal(target.text(), 'March 2013', 'Title is "March 2013"');
 287  });
 288  
 289  test('by year, from leap day', function(){
 290      var target;
 291  
 292      equal(this.dp.viewMode, 0);
 293      target = this.picker.find('.datepicker-days thead th.switch');
 294  
 295      this.input.val('29-02-2012').datepicker('update');
 296      datesEqual(this.dp.viewDate, new Date(2012, 1, 29));
 297      datesEqual(this.dp.date, new Date(2012, 1, 29));
 298      equal(target.text(), 'February 2012', 'Title is "February 2012"');
 299  
 300      // Navigation: -1 year
 301      this.input.trigger({
 302          type: 'keydown',
 303          keyCode: 37,
 304          ctrlKey: true
 305      });
 306      // Both updated on keyboard navigation; graceful month-end
 307      datesEqual(this.dp.viewDate, new Date(2011, 1, 28));
 308      datesEqual(this.dp.date, new Date(2011, 1, 28));
 309      // Month not changed
 310      target = this.picker.find('.datepicker-days thead th.switch');
 311      equal(target.text(), 'February 2011', 'Title is "February 2011"');
 312  
 313      // Navigation: +1 year, back to leap year
 314      this.input.trigger({
 315          type: 'keydown',
 316          keyCode: 39,
 317          ctrlKey: true
 318      });
 319      // Both updated on keyboard navigation; graceful month-end
 320      datesEqual(this.dp.viewDate, new Date(2012, 1, 28));
 321      datesEqual(this.dp.date, new Date(2012, 1, 28));
 322      target = this.picker.find('.datepicker-days thead th.switch');
 323      equal(target.text(), 'February 2012', 'Title is "February 2012"');
 324  
 325      // Navigation: +1 year
 326      this.input.trigger({
 327          type: 'keydown',
 328          keyCode: 39,
 329          ctrlKey: true
 330      });
 331      // Both updated on keyboard navigation; graceful month-end
 332      datesEqual(this.dp.viewDate, new Date(2013, 1, 28));
 333      datesEqual(this.dp.date, new Date(2013, 1, 28));
 334      target = this.picker.find('.datepicker-days thead th.switch');
 335      equal(target.text(), 'February 2013', 'Title is "February 2013"');
 336  });
 337  
 338  test('Selection (enter)', function(){
 339      var target;
 340  
 341      equal(this.dp.viewMode, 0);
 342      target = this.picker.find('.datepicker-days thead th.switch');
 343      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 344  
 345      // Navigation: -1 day, left arrow key
 346      this.input.trigger({
 347          type: 'keydown',
 348          keyCode: 37
 349      });
 350      // Both updated on keyboard navigation
 351      datesEqual(this.dp.viewDate, new Date(2012, 2, 30));
 352      datesEqual(this.dp.date, new Date(2012, 2, 30));
 353      // Month not changed
 354      target = this.picker.find('.datepicker-days thead th.switch');
 355      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 356  
 357      // Selection: Enter
 358      this.input.trigger({
 359          type: 'keydown',
 360          keyCode: 13
 361      });
 362      // Both updated on keyboard navigation
 363      datesEqual(this.dp.viewDate, new Date(2012, 2, 30));
 364      datesEqual(this.dp.date, new Date(2012, 2, 30));
 365      // Month not changed
 366      target = this.picker.find('.datepicker-days thead th.switch');
 367      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 368  
 369      ok(this.picker.is(':not(:visible)'), 'Picker is hidden');
 370  });
 371  
 372  test('Toggle hide/show (escape); navigation while hidden is suppressed', function(){
 373      var target;
 374  
 375      equal(this.dp.viewMode, 0);
 376      target = this.picker.find('.datepicker-days thead th.switch');
 377      equal(target.text(), 'March 2012', 'Title is "March 2012"');
 378  
 379      ok(this.picker.is(':visible'), 'Picker is visible');
 380  
 381      // Hide
 382      this.input.trigger({
 383          type: 'keydown',
 384          keyCode: 27
 385      });
 386  
 387      ok(this.picker.is(':not(:visible)'), 'Picker is hidden');
 388      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
 389      datesEqual(this.dp.date, new Date(2012, 2, 31));
 390  
 391      // left arrow key, *doesn't* navigate
 392      this.input.trigger({
 393          type: 'keydown',
 394          keyCode: 37
 395      });
 396  
 397      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
 398      datesEqual(this.dp.date, new Date(2012, 2, 31));
 399  
 400      // Show
 401      this.input.trigger({
 402          type: 'keydown',
 403          keyCode: 27
 404      });
 405  
 406      ok(this.picker.is(':visible'), 'Picker is visible');
 407      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
 408      datesEqual(this.dp.date, new Date(2012, 2, 31));
 409  });
 410  
 411  test('Blur hides picker', function(){
 412      var target;
 413  
 414      ok(this.picker.is(':visible'), 'Picker is visible');
 415      this.input.blur();
 416      ok(this.picker.is(':not(:visible)'), 'Picker is hidden');
 417  });