/admin-dashboard/assets/bootstrap-datetimepicker/tests/suites/mouse_navigation/2012.js

https://gitlab.com/emad.rashad/mls-grading · JavaScript · 251 lines · 165 code · 43 blank · 43 comment · 0 complexity · 6f27f49782302ba910a435d283560089 MD5 · raw file

  1. module('Mouse Navigation 2012', {
  2. setup: function(){
  3. /*
  4. Tests start with picker on March 31, 2012. Fun facts:
  5. * February 1, 2012 was on a Wednesday
  6. * February 29, 2012 was on a Wednesday
  7. * March 1, 2012 was on a Thursday
  8. * March 31, 2012 was on a Saturday
  9. */
  10. this.input = $('<input type="text" value="31-03-2012">')
  11. .appendTo('#qunit-fixture')
  12. .datetimepicker({format: "dd-mm-yyyy", viewSelect: 2})
  13. .focus(); // Activate for visibility checks
  14. this.dp = this.input.data('datetimepicker')
  15. this.picker = this.dp.picker;
  16. },
  17. teardown: function(){
  18. this.picker.remove();
  19. }
  20. });
  21. test('Selecting date resets viewDate and date', function(){
  22. var target;
  23. // Rendered correctly
  24. equal(this.dp.viewMode, 2);
  25. target = this.picker.find('.datetimepicker-days tbody td:nth(7)');
  26. equal(target.text(), '4'); // Should be Mar 4
  27. // Updated internally on click
  28. target.click();
  29. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 4))
  30. datesEqual(this.dp.date, UTCDate(2012, 2, 4))
  31. // Re-rendered on click
  32. target = this.picker.find('.datetimepicker-days tbody td:first');
  33. equal(target.text(), '26'); // Should be Feb 29
  34. });
  35. test('Navigating next/prev by month', function(){
  36. var target;
  37. equal(this.dp.viewMode, 2);
  38. target = this.picker.find('.datetimepicker-days thead th.prev');
  39. ok(target.is(':visible'), 'Month:prev nav is visible');
  40. // Updated internally on click
  41. target.click();
  42. // Should handle month-length changes gracefully
  43. datesEqual(this.dp.viewDate, UTCDate(2012, 1, 29));
  44. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  45. // Re-rendered on click
  46. target = this.picker.find('.datetimepicker-days tbody td:first');
  47. equal(target.text(), '29'); // Should be Jan 29
  48. target = this.picker.find('.datetimepicker-days thead th.next');
  49. ok(target.is(':visible'), 'Month:next nav is visible');
  50. // Updated internally on click
  51. target.click().click();
  52. // Graceful moonth-end handling carries over
  53. datesEqual(this.dp.viewDate, UTCDate(2012, 3, 29));
  54. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  55. // Re-rendered on click
  56. target = this.picker.find('.datetimepicker-days tbody td:first');
  57. equal(target.text(), '25'); // Should be Mar 25
  58. // (includes "old" days at start of month, even if that's all the first week-row consists of)
  59. });
  60. test('Navigating to/from year view', function(){
  61. var target;
  62. equal(this.dp.viewMode, 2);
  63. target = this.picker.find('.datetimepicker-days thead th.switch');
  64. ok(target.is(':visible'), 'View switcher is visible');
  65. target.click();
  66. ok(this.picker.find('.datetimepicker-months').is(':visible'), 'Month picker is visible');
  67. equal(this.dp.viewMode, 3);
  68. // Not modified when switching modes
  69. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 31));
  70. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  71. // Change months to test internal state
  72. target = this.picker.find('.datetimepicker-months tbody span:contains(Apr)');
  73. target.click();
  74. equal(this.dp.viewMode, 2);
  75. // Only viewDate modified
  76. datesEqual(this.dp.viewDate, UTCDate(2012, 3, 1)); // Apr 30
  77. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  78. });
  79. test('Navigating to/from decade view', function(){
  80. var target;
  81. equal(this.dp.viewMode, 2);
  82. target = this.picker.find('.datetimepicker-days thead th.switch');
  83. ok(target.is(':visible'), 'View switcher is visible');
  84. target.click();
  85. ok(this.picker.find('.datetimepicker-months').is(':visible'), 'Month picker is visible');
  86. equal(this.dp.viewMode, 3);
  87. // Not modified when switching modes
  88. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 31));
  89. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  90. target = this.picker.find('.datetimepicker-months thead th.switch');
  91. ok(target.is(':visible'), 'View switcher is visible');
  92. target.click();
  93. ok(this.picker.find('.datetimepicker-years').is(':visible'), 'Year picker is visible');
  94. equal(this.dp.viewMode, 4);
  95. // Not modified when switching modes
  96. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 31));
  97. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  98. // Change years to test internal state changes
  99. target = this.picker.find('.datetimepicker-years tbody span:contains(2011)');
  100. target.click();
  101. equal(this.dp.viewMode, 3);
  102. // Only viewDate modified
  103. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 1));
  104. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  105. target = this.picker.find('.datetimepicker-months tbody span:contains(Apr)');
  106. target.click();
  107. equal(this.dp.viewMode, 2);
  108. // Only viewDate modified
  109. datesEqual(this.dp.viewDate, UTCDate(2011, 3, 1));
  110. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  111. });
  112. test('Navigating prev/next in year view', function(){
  113. var target;
  114. equal(this.dp.viewMode, 2);
  115. target = this.picker.find('.datetimepicker-days thead th.switch');
  116. ok(target.is(':visible'), 'View switcher is visible');
  117. target.click();
  118. ok(this.picker.find('.datetimepicker-months').is(':visible'), 'Month picker is visible');
  119. equal(this.dp.viewMode, 3);
  120. equal(this.picker.find('.datetimepicker-months thead th.switch').text(), '2012');
  121. // Not modified when switching modes
  122. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 31));
  123. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  124. // Go to next year (2013)
  125. target = this.picker.find('.datetimepicker-months thead th.next');
  126. target.click();
  127. equal(this.picker.find('.datetimepicker-months thead th.switch').text(), '2013');
  128. // Only viewDate modified
  129. datesEqual(this.dp.viewDate, UTCDate(2013, 2, 31));
  130. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  131. // Go to prev year (x2 == 2011)
  132. target = this.picker.find('.datetimepicker-months thead th.prev');
  133. target.click().click();
  134. equal(this.picker.find('.datetimepicker-months thead th.switch').text(), '2011');
  135. // Only viewDate modified
  136. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 31));
  137. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  138. });
  139. test('Navigating prev/next in decade view', function(){
  140. var target;
  141. equal(this.dp.viewMode, 2);
  142. target = this.picker.find('.datetimepicker-days thead th.switch');
  143. ok(target.is(':visible'), 'View switcher is visible');
  144. target.click();
  145. ok(this.picker.find('.datetimepicker-months').is(':visible'), 'Month picker is visible');
  146. equal(this.dp.viewMode, 3);
  147. // Not modified when switching modes
  148. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 31));
  149. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  150. target = this.picker.find('.datetimepicker-months thead th.switch');
  151. ok(target.is(':visible'), 'View switcher is visible');
  152. target.click();
  153. ok(this.picker.find('.datetimepicker-years').is(':visible'), 'Year picker is visible');
  154. equal(this.dp.viewMode, 4);
  155. equal(this.picker.find('.datetimepicker-years thead th.switch').text(), '2010-2019');
  156. // Not modified when switching modes
  157. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 31));
  158. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  159. // Go to next decade (2020-29)
  160. target = this.picker.find('.datetimepicker-years thead th.next');
  161. target.click();
  162. equal(this.picker.find('.datetimepicker-years thead th.switch').text(), '2020-2029');
  163. // Only viewDate modified
  164. datesEqual(this.dp.viewDate, UTCDate(2022, 2, 31));
  165. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  166. // Go to prev year (x2 == 2000-09)
  167. target = this.picker.find('.datetimepicker-years thead th.prev');
  168. target.click().click();
  169. equal(this.picker.find('.datetimepicker-years thead th.switch').text(), '2000-2009');
  170. // Only viewDate modified
  171. datesEqual(this.dp.viewDate, UTCDate(2002, 2, 31));
  172. datesEqual(this.dp.date, UTCDate(2012, 2, 31));
  173. });
  174. test('Selecting date from previous month resets viewDate and date, changing month displayed', function(){
  175. var target;
  176. // Rendered correctly
  177. equal(this.dp.viewMode, 2);
  178. target = this.picker.find('.datetimepicker-days tbody td:first');
  179. equal(target.text(), '26'); // Should be Feb 26
  180. equal(this.picker.find('.datetimepicker-days thead th.switch').text(), 'March 2012');
  181. // Updated internally on click
  182. target.click();
  183. equal(this.picker.find('.datetimepicker-days thead th.switch').text(), 'February 2012');
  184. datesEqual(this.dp.viewDate, UTCDate(2012, 1, 26))
  185. datesEqual(this.dp.date, UTCDate(2012, 1, 26))
  186. // Re-rendered on click
  187. target = this.picker.find('.datetimepicker-days tbody td:first');
  188. equal(target.text(), '29'); // Should be Jan 29
  189. });
  190. test('Selecting date from next month resets viewDate and date, changing month displayed', function(){
  191. var target;
  192. this.input.val('01-04-2012');
  193. this.dp.update();
  194. // Rendered correctly
  195. equal(this.dp.viewMode, 2);
  196. target = this.picker.find('.datetimepicker-days tbody td:last');
  197. equal(target.text(), '5'); // Should be May 5
  198. equal(this.picker.find('.datetimepicker-days thead th.switch').text(), 'April 2012');
  199. // Updated internally on click
  200. target.click();
  201. equal(this.picker.find('.datetimepicker-days thead th.switch').text(), 'May 2012');
  202. datesEqual(this.dp.viewDate, UTCDate(2012, 4, 5))
  203. datesEqual(this.dp.date, UTCDate(2012, 4, 5))
  204. // Re-rendered on click
  205. target = this.picker.find('.datetimepicker-days tbody td:first');
  206. equal(target.text(), '29'); // Should be Apr 29
  207. });