component.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. module('Component', {
  2. setup: function(){
  3. this.component = $('<div class="input-append date" id="datepicker">'+
  4. '<input size="16" type="text" value="12-02-2012" readonly>'+
  5. '<span class="add-on"><i class="icon-th"></i></span>'+
  6. '</div>')
  7. .appendTo('#qunit-fixture')
  8. .datepicker({format: "dd-mm-yyyy"});
  9. this.input = this.component.find('input');
  10. this.addon = this.component.find('.add-on');
  11. this.dp = this.component.data('datepicker');
  12. this.picker = this.dp.picker;
  13. },
  14. teardown: function(){
  15. this.picker.remove();
  16. }
  17. });
  18. test('Component gets date/viewDate from input value', function(){
  19. datesEqual(this.dp.getUTCDate(), UTCDate(2012, 1, 12));
  20. datesEqual(this.dp.viewDate, UTCDate(2012, 1, 12));
  21. });
  22. test('Activation by component', function(){
  23. ok(!this.picker.is(':visible'));
  24. this.addon.click();
  25. ok(this.picker.is(':visible'));
  26. });
  27. test('Dont activation (by disabled) by component', function(){
  28. ok(!this.picker.is(':visible'));
  29. this.input.prop('disabled', true);
  30. this.addon.click();
  31. ok(!this.picker.is(':visible'));
  32. this.input.prop('disabled', false);
  33. });
  34. test('simple keyboard nav test', function(){
  35. var target;
  36. // Keyboard nav only works with non-readonly inputs
  37. this.input.removeAttr('readonly');
  38. equal(this.dp.viewMode, 0);
  39. target = this.picker.find('.datepicker-days thead th.datepicker-switch');
  40. equal(target.text(), 'February 2012', 'Title is "February 2012"');
  41. datesEqual(this.dp.getUTCDate(), UTCDate(2012, 1, 12));
  42. datesEqual(this.dp.viewDate, UTCDate(2012, 1, 12));
  43. // Focus/open
  44. this.addon.click();
  45. // Navigation: -1 day, left arrow key
  46. this.input.trigger({
  47. type: 'keydown',
  48. keyCode: 37
  49. });
  50. datesEqual(this.dp.viewDate, UTCDate(2012, 1, 11));
  51. datesEqual(this.dp.getUTCDate(), UTCDate(2012, 1, 12));
  52. datesEqual(this.dp.focusDate, UTCDate(2012, 1, 11));
  53. // Month not changed
  54. target = this.picker.find('.datepicker-days thead th.datepicker-switch');
  55. equal(target.text(), 'February 2012', 'Title is "February 2012"');
  56. // Navigation: +1 month, shift + right arrow key
  57. this.input.trigger({
  58. type: 'keydown',
  59. keyCode: 39,
  60. shiftKey: true
  61. });
  62. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 11));
  63. datesEqual(this.dp.getUTCDate(), UTCDate(2012, 1, 12));
  64. datesEqual(this.dp.focusDate, UTCDate(2012, 2, 11));
  65. target = this.picker.find('.datepicker-days thead th.datepicker-switch');
  66. equal(target.text(), 'March 2012', 'Title is "March 2012"');
  67. // Navigation: -1 year, ctrl + left arrow key
  68. this.input.trigger({
  69. type: 'keydown',
  70. keyCode: 37,
  71. ctrlKey: true
  72. });
  73. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 11));
  74. datesEqual(this.dp.getUTCDate(), UTCDate(2012, 1, 12));
  75. datesEqual(this.dp.focusDate, UTCDate(2011, 2, 11));
  76. target = this.picker.find('.datepicker-days thead th.datepicker-switch');
  77. equal(target.text(), 'March 2011', 'Title is "March 2011"');
  78. });
  79. test('setValue', function(){
  80. this.dp.dates.replace(UTCDate(2012, 2, 13));
  81. this.dp.setValue();
  82. datesEqual(this.dp.dates[0], UTCDate(2012, 2, 13));
  83. equal(this.input.val(), '13-03-2012');
  84. });
  85. test('update', function(){
  86. this.input.val('13-03-2012');
  87. this.dp.update();
  88. equal(this.dp.dates.length, 1);
  89. datesEqual(this.dp.dates[0], UTCDate(2012, 2, 13));
  90. });
  91. test('Navigating to/from decade view', function(){
  92. var target;
  93. this.addon.click();
  94. this.input.val('31-03-2012');
  95. this.dp.update();
  96. equal(this.dp.viewMode, 0);
  97. target = this.picker.find('.datepicker-days thead th.datepicker-switch');
  98. ok(target.is(':visible'), 'View switcher is visible');
  99. target.click();
  100. ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
  101. equal(this.dp.viewMode, 1);
  102. // Not modified when switching modes
  103. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 31));
  104. datesEqual(this.dp.dates[0], UTCDate(2012, 2, 31));
  105. target = this.picker.find('.datepicker-months thead th.datepicker-switch');
  106. ok(target.is(':visible'), 'View switcher is visible');
  107. target.click();
  108. ok(this.picker.find('.datepicker-years').is(':visible'), 'Year picker is visible');
  109. equal(this.dp.viewMode, 2);
  110. // Not modified when switching modes
  111. datesEqual(this.dp.viewDate, UTCDate(2012, 2, 31));
  112. datesEqual(this.dp.dates[0], UTCDate(2012, 2, 31));
  113. // Change years to test internal state changes
  114. target = this.picker.find('.datepicker-years tbody span:contains(2011)');
  115. target.click();
  116. equal(this.dp.viewMode, 1);
  117. // Only viewDate modified
  118. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 1));
  119. datesEqual(this.dp.dates[0], UTCDate(2012, 2, 31));
  120. target = this.picker.find('.datepicker-months tbody span:contains(Apr)');
  121. target.click();
  122. equal(this.dp.viewMode, 0);
  123. // Only viewDate modified
  124. datesEqual(this.dp.viewDate, UTCDate(2011, 3, 1));
  125. datesEqual(this.dp.dates[0], UTCDate(2012, 2, 31));
  126. });
  127. test('Selecting date resets viewDate and date', function(){
  128. var target;
  129. this.addon.click();
  130. this.input.val('31-03-2012');
  131. this.dp.update();
  132. // Rendered correctly
  133. equal(this.dp.viewMode, 0);
  134. target = this.picker.find('.datepicker-days tbody td:first');
  135. equal(target.text(), '26'); // Should be Feb 26
  136. // Updated internally on click
  137. target.click();
  138. datesEqual(this.dp.viewDate, UTCDate(2012, 1, 26));
  139. datesEqual(this.dp.dates[0], UTCDate(2012, 1, 26));
  140. // Re-rendered on click
  141. target = this.picker.find('.datepicker-days tbody td:first');
  142. equal(target.text(), '29'); // Should be Jan 29
  143. });
  144. test('"destroy" removes associated HTML', function(){
  145. var datepickerDivSelector = '.datepicker';
  146. $('#datepicker').datepicker('show');
  147. //there should be one datepicker initiated so that means one hidden .datepicker div
  148. equal($(datepickerDivSelector).length, 1);
  149. this.component.datepicker('destroy');
  150. equal($(datepickerDivSelector).length, 0);//hidden HTML should be gone
  151. });
  152. test('"remove" is an alias for "destroy"', function(){
  153. var called, originalDestroy = this.dp.destroy;
  154. this.dp.destroy = function () {
  155. called = true;
  156. return originalDestroy.apply(this, arguments);
  157. };
  158. this.dp.remove();
  159. ok(called);
  160. });
  161. test('Does not block events', function(){
  162. var clicks = 0;
  163. function handler(){
  164. clicks++;
  165. }
  166. $('#qunit-fixture').on('click', '.add-on', handler);
  167. this.addon.click();
  168. equal(clicks, 1);
  169. $('#qunit-fixture').off('click', '.add-on', handler);
  170. });
  171. test('date and viewDate must be between startDate and endDate when setStartDate called', function() {
  172. this.dp.setDate(new Date(2013, 1, 1));
  173. datesEqual(this.dp.dates[0], UTCDate(2013, 1, 1));
  174. datesEqual(this.dp.viewDate, UTCDate(2013, 1, 1));
  175. this.dp.setStartDate(new Date(2013, 5, 6));
  176. datesEqual(this.dp.viewDate, UTCDate(2013, 5, 6));
  177. equal(this.dp.dates.length, 0);
  178. });
  179. test('date and viewDate must be between startDate and endDate when setEndDate called', function() {
  180. this.dp.setDate(new Date(2013, 11, 1));
  181. datesEqual(this.dp.dates[0], UTCDate(2013, 11, 1));
  182. datesEqual(this.dp.viewDate, UTCDate(2013, 11, 1));
  183. this.dp.setEndDate(new Date(2013, 5, 6));
  184. datesEqual(this.dp.viewDate, UTCDate(2013, 5, 6));
  185. equal(this.dp.dates.length, 0);
  186. });
  187. test('picker should render fine when `$.fn.show` and `$.fn.hide` are overridden', patch_show_hide(function () {
  188. var viewModes = $.fn.datepicker.DPGlobal.viewModes,
  189. minViewMode = this.dp.o.minViewMode,
  190. maxViewMode = this.dp.o.maxViewMode,
  191. childDivs = this.picker.children('div');
  192. this.dp.setViewMode(minViewMode);
  193. // Overwritten `$.fn.hide` method adds the `foo` class to its matched elements
  194. var curDivShowing = childDivs.filter('.datepicker-' + viewModes[minViewMode].clsName);
  195. ok(!curDivShowing.hasClass('foo'), 'Shown div does not have overridden `$.fn.hide` side-effects');
  196. // Check that other classes do have `foo` class
  197. var divNotShown;
  198. for (var curViewMode = minViewMode + 1; curViewMode <= maxViewMode; curViewMode++) {
  199. divNotShown = childDivs.filter('.datepicker-' + viewModes[curViewMode].clsName);
  200. ok(divNotShown.hasClass('foo'), 'Other divs do have overridden `$.fn.hide` side-effects');
  201. }
  202. }));
  203. test('Focused ceil for decade/century/millenium views', function(){
  204. var input = $('<input />')
  205. .appendTo('#qunit-fixture')
  206. .datepicker({
  207. startView: 2,
  208. defaultViewDate: {
  209. year: 2115
  210. }
  211. }),
  212. dp = input.data('datepicker'),
  213. picker = dp.picker,
  214. target;
  215. input.focus();
  216. target = picker.find('.datepicker-years tbody .focused');
  217. ok(target.text() === '2115', 'Year cell is focused');
  218. picker.find('.datepicker-years thead th.datepicker-switch').click();
  219. target = picker.find('.datepicker-decades tbody .focused');
  220. ok(target.text() === '2110', 'Decade cell is focused');
  221. picker.find('.datepicker-decades thead th.datepicker-switch').click();
  222. target = picker.find('.datepicker-centuries tbody .focused');
  223. ok(target.text() === '2100', 'Century cell is focused');
  224. });