[Summary view] [Print] [Text view]

   1  module('Mouse 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  test('Selecting date resets viewDate and date', function(){
  24      var target;
  25  
  26      // Rendered correctly
  27      equal(this.dp.viewMode, 0);
  28      target = this.picker.find('.datepicker-days tbody td:nth(7)');
  29      equal(target.text(), '4'); // Should be Mar 4
  30  
  31      // Updated internally on click
  32      target.click();
  33      datesEqual(this.dp.viewDate, new Date(2012, 2, 4))
  34      datesEqual(this.dp.date, new Date(2012, 2, 4))
  35  
  36      // Re-rendered on click
  37      target = this.picker.find('.datepicker-days tbody td:first');
  38      equal(target.text(), '26'); // Should be Feb 29
  39  });
  40  
  41  test('Navigating next/prev by month', function(){
  42      var target;
  43  
  44      equal(this.dp.viewMode, 0);
  45      target = this.picker.find('.datepicker-days thead th.prev');
  46      ok(target.is(':visible'), 'Month:prev nav is visible');
  47  
  48      // Updated internally on click
  49      target.click();
  50      // Should handle month-length changes gracefully
  51      datesEqual(this.dp.viewDate, new Date(2012, 1, 29));
  52      datesEqual(this.dp.date, new Date(2012, 2, 31));
  53  
  54      // Re-rendered on click
  55      target = this.picker.find('.datepicker-days tbody td:first');
  56      equal(target.text(), '29'); // Should be Jan 29
  57  
  58      target = this.picker.find('.datepicker-days thead th.next');
  59      ok(target.is(':visible'), 'Month:next nav is visible');
  60  
  61      // Updated internally on click
  62      target.click().click();
  63      // Graceful moonth-end handling carries over
  64      datesEqual(this.dp.viewDate, new Date(2012, 3, 29));
  65      datesEqual(this.dp.date, new Date(2012, 2, 31));
  66  
  67      // Re-rendered on click
  68      target = this.picker.find('.datepicker-days tbody td:first');
  69      equal(target.text(), '25'); // Should be Mar 25
  70      // (includes "old" days at start of month, even if that's all the first week-row consists of)
  71  });
  72  
  73  test('Navigating to/from year view', function(){
  74      var target;
  75  
  76      equal(this.dp.viewMode, 0);
  77      target = this.picker.find('.datepicker-days thead th.switch');
  78      ok(target.is(':visible'), 'View switcher is visible');
  79  
  80      target.click();
  81      ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
  82      equal(this.dp.viewMode, 1);
  83      // Not modified when switching modes
  84      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
  85      datesEqual(this.dp.date, new Date(2012, 2, 31));
  86  
  87      // Change months to test internal state
  88      target = this.picker.find('.datepicker-months tbody span:contains(Apr)');
  89      target.click();
  90      equal(this.dp.viewMode, 0);
  91      // Only viewDate modified
  92      datesEqual(this.dp.viewDate, new Date(2012, 3, 30)); // Apr 30
  93      datesEqual(this.dp.date, new Date(2012, 2, 31));
  94  });
  95  
  96  test('Navigating to/from decade view', function(){
  97      var target;
  98  
  99      equal(this.dp.viewMode, 0);
 100      target = this.picker.find('.datepicker-days thead th.switch');
 101      ok(target.is(':visible'), 'View switcher is visible');
 102  
 103      target.click();
 104      ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
 105      equal(this.dp.viewMode, 1);
 106      // Not modified when switching modes
 107      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
 108      datesEqual(this.dp.date, new Date(2012, 2, 31));
 109  
 110      target = this.picker.find('.datepicker-months thead th.switch');
 111      ok(target.is(':visible'), 'View switcher is visible');
 112  
 113      target.click();
 114      ok(this.picker.find('.datepicker-years').is(':visible'), 'Year picker is visible');
 115      equal(this.dp.viewMode, 2);
 116      // Not modified when switching modes
 117      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
 118      datesEqual(this.dp.date, new Date(2012, 2, 31));
 119  
 120      // Change years to test internal state changes
 121      target = this.picker.find('.datepicker-years tbody span:contains(2011)');
 122      target.click();
 123      equal(this.dp.viewMode, 1);
 124      // Only viewDate modified
 125      datesEqual(this.dp.viewDate, new Date(2011, 2, 31));
 126      datesEqual(this.dp.date, new Date(2012, 2, 31));
 127  
 128      target = this.picker.find('.datepicker-months tbody span:contains(Apr)');
 129      target.click();
 130      equal(this.dp.viewMode, 0);
 131      // Only viewDate modified
 132      datesEqual(this.dp.viewDate, new Date(2011, 3, 30));
 133      datesEqual(this.dp.date, new Date(2012, 2, 31));
 134  });
 135  
 136  test('Navigating prev/next in year view', function(){
 137      var target;
 138  
 139      equal(this.dp.viewMode, 0);
 140      target = this.picker.find('.datepicker-days thead th.switch');
 141      ok(target.is(':visible'), 'View switcher is visible');
 142  
 143      target.click();
 144      ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
 145      equal(this.dp.viewMode, 1);
 146      equal(this.picker.find('.datepicker-months thead th.switch').text(), '2012');
 147      // Not modified when switching modes
 148      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
 149      datesEqual(this.dp.date, new Date(2012, 2, 31));
 150  
 151      // Go to next year (2013)
 152      target = this.picker.find('.datepicker-months thead th.next');
 153      target.click();
 154      equal(this.picker.find('.datepicker-months thead th.switch').text(), '2013');
 155      // Only viewDate modified
 156      datesEqual(this.dp.viewDate, new Date(2013, 2, 31));
 157      datesEqual(this.dp.date, new Date(2012, 2, 31));
 158  
 159      // Go to prev year (x2 == 2011)
 160      target = this.picker.find('.datepicker-months thead th.prev');
 161      target.click().click();
 162      equal(this.picker.find('.datepicker-months thead th.switch').text(), '2011');
 163      // Only viewDate modified
 164      datesEqual(this.dp.viewDate, new Date(2011, 2, 31));
 165      datesEqual(this.dp.date, new Date(2012, 2, 31));
 166  });
 167  
 168  test('Navigating prev/next in decade view', function(){
 169      var target;
 170  
 171      equal(this.dp.viewMode, 0);
 172      target = this.picker.find('.datepicker-days thead th.switch');
 173      ok(target.is(':visible'), 'View switcher is visible');
 174  
 175      target.click();
 176      ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
 177      equal(this.dp.viewMode, 1);
 178      // Not modified when switching modes
 179      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
 180      datesEqual(this.dp.date, new Date(2012, 2, 31));
 181  
 182      target = this.picker.find('.datepicker-months thead th.switch');
 183      ok(target.is(':visible'), 'View switcher is visible');
 184  
 185      target.click();
 186      ok(this.picker.find('.datepicker-years').is(':visible'), 'Year picker is visible');
 187      equal(this.dp.viewMode, 2);
 188      equal(this.picker.find('.datepicker-years thead th.switch').text(), '2010-2019');
 189      // Not modified when switching modes
 190      datesEqual(this.dp.viewDate, new Date(2012, 2, 31));
 191      datesEqual(this.dp.date, new Date(2012, 2, 31));
 192  
 193      // Go to next decade (2020-29)
 194      target = this.picker.find('.datepicker-years thead th.next');
 195      target.click();
 196      equal(this.picker.find('.datepicker-years thead th.switch').text(), '2020-2029');
 197      // Only viewDate modified
 198      datesEqual(this.dp.viewDate, new Date(2022, 2, 31));
 199      datesEqual(this.dp.date, new Date(2012, 2, 31));
 200  
 201      // Go to prev year (x2 == 2000-09)
 202      target = this.picker.find('.datepicker-years thead th.prev');
 203      target.click().click();
 204      equal(this.picker.find('.datepicker-years thead th.switch').text(), '2000-2009');
 205      // Only viewDate modified
 206      datesEqual(this.dp.viewDate, new Date(2002, 2, 31));
 207      datesEqual(this.dp.date, new Date(2012, 2, 31));
 208  });
 209  
 210  test('Selecting date from previous month resets viewDate and date, changing month displayed', function(){
 211      var target;
 212  
 213      // Rendered correctly
 214      equal(this.dp.viewMode, 0);
 215      target = this.picker.find('.datepicker-days tbody td:first');
 216      equal(target.text(), '26'); // Should be Feb 26
 217      equal(this.picker.find('.datepicker-days thead th.switch').text(), 'March 2012');
 218  
 219      // Updated internally on click
 220      target.click();
 221      equal(this.picker.find('.datepicker-days thead th.switch').text(), 'February 2012');
 222      datesEqual(this.dp.viewDate, new Date(2012, 1, 26))
 223      datesEqual(this.dp.date, new Date(2012, 1, 26))
 224  
 225      // Re-rendered on click
 226      target = this.picker.find('.datepicker-days tbody td:first');
 227      equal(target.text(), '29'); // Should be Jan 29
 228  });
 229  
 230  test('Selecting date from next month resets viewDate and date, changing month displayed', function(){
 231      var target;
 232  
 233      this.input.val('01-04-2012');
 234      this.dp.update();
 235  
 236      // Rendered correctly
 237      equal(this.dp.viewMode, 0);
 238      target = this.picker.find('.datepicker-days tbody td:last');
 239      equal(target.text(), '5'); // Should be May 5
 240      equal(this.picker.find('.datepicker-days thead th.switch').text(), 'April 2012');
 241  
 242      // Updated internally on click
 243      target.click();
 244      equal(this.picker.find('.datepicker-days thead th.switch').text(), 'May 2012');
 245      datesEqual(this.dp.viewDate, new Date(2012, 4, 5))
 246      datesEqual(this.dp.date, new Date(2012, 4, 5))
 247  
 248      // Re-rendered on click
 249      target = this.picker.find('.datepicker-days tbody td:first');
 250      equal(target.text(), '29'); // Should be Apr 29
 251  });