dateEditor.spec.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. describe('DateEditor', () => {
  2. var id = 'testContainer';
  3. beforeEach(function() {
  4. this.$container = $(`<div id="${id}"></div>`).appendTo('body');
  5. });
  6. afterEach(function() {
  7. if (this.$container) {
  8. destroy();
  9. this.$container.remove();
  10. }
  11. });
  12. function getDates() {
  13. return [
  14. ['01/14/2006'],
  15. ['12/01/2008'],
  16. ['11/19/2011'],
  17. ['02/02/2004'],
  18. ['07/24/2011']
  19. ];
  20. }
  21. it('should display Pikday calendar', () => {
  22. handsontable({
  23. data: getDates(),
  24. columns: [
  25. {
  26. type: 'date'
  27. }
  28. ]
  29. });
  30. expect($('.pika-single').is(':visible')).toBe(false);
  31. selectCell(0, 0);
  32. keyDown('enter');
  33. expect($('.pika-single').is(':visible')).toBe(true);
  34. });
  35. it('should pass date picker config object to Pikday', () => {
  36. var onOpenSpy = jasmine.createSpy('open');
  37. var onCloseSpy = jasmine.createSpy('close');
  38. var hot = handsontable({
  39. data: getDates(),
  40. columns: [
  41. {
  42. type: 'date',
  43. datePickerConfig: {
  44. firstDay: 1,
  45. field: 'field', // read only - shouldn't overwrite
  46. trigger: 'trigger', // read only - shouldn't overwrite
  47. container: 'container', // read only - shouldn't overwrite
  48. bound: true, // read only - shouldn't overwrite
  49. i18n: {
  50. previousMonth: 'Poprzedni',
  51. nextMonth: 'Następny',
  52. months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  53. weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  54. weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  55. },
  56. onOpen: onOpenSpy,
  57. onClose: onCloseSpy
  58. }
  59. }
  60. ]
  61. });
  62. selectCell(0, 0);
  63. keyDown('enter');
  64. keyDown('esc');
  65. var config = hot.getActiveEditor().$datePicker.config();
  66. expect(config.field instanceof HTMLElement).toBe(true);
  67. expect(config.trigger instanceof HTMLElement).toBe(true);
  68. expect(config.container instanceof HTMLElement).toBe(true);
  69. expect(config.bound).toBe(false);
  70. expect(config.firstDay).toBe(1);
  71. expect(config.i18n.previousMonth).toBe('Poprzedni');
  72. expect(config.i18n.nextMonth).toBe('Następny');
  73. expect(onOpenSpy).toHaveBeenCalled();
  74. expect(onCloseSpy).toHaveBeenCalled();
  75. });
  76. it('should remove any HTML connected with Pikaday Calendar', () => {
  77. handsontable({
  78. data: getDates(),
  79. columns: [
  80. {
  81. type: 'date'
  82. }
  83. ]
  84. });
  85. expect($('.pika-single').length).toBe(0);
  86. selectCell(0, 0);
  87. keyDown('enter');
  88. expect($('.pika-single').length).toBe(1);
  89. destroy();
  90. expect($('.pika-single').length).toBe(0);
  91. });
  92. it('should select date corresponding to cell value', () => {
  93. handsontable({
  94. data: getDates(),
  95. columns: [
  96. {
  97. type: 'date',
  98. dateFormat: 'MM/DD/YYYY'
  99. }
  100. ]
  101. });
  102. selectCell(0, 0);
  103. keyDown('enter');
  104. var date = new Date(getDates()[0][0]);
  105. expect($('.pika-single').find('.pika-select-year').find(':selected').val()).toMatch(date.getFullYear().toString());
  106. expect($('.pika-single').find('.pika-select-month').find(':selected').val()).toMatch(date.getMonth().toString());
  107. expect($('.pika-single').find('.pika-table .is-selected').text()).toMatch(date.getDate().toString());
  108. });
  109. it('should save new date after clicked on calendar', (done) => {
  110. handsontable({
  111. data: getDates(),
  112. columns: [
  113. {
  114. type: 'date',
  115. dateFormat: 'MM/DD/YYYY'
  116. }
  117. ]
  118. });
  119. selectCell(0, 0);
  120. expect(getDataAtCell(0, 0)).toMatch('01/14/2006');
  121. keyDown('enter');
  122. mouseDown($('.pika-single').find('.pika-table tbody tr:eq(0) td:eq(0) button'));
  123. setTimeout(() => {
  124. expect(getDataAtCell(0, 0)).toMatch('01/01/2006');
  125. done();
  126. }, 150);
  127. });
  128. it('should display fill handle after selected date on calendar', (done) => {
  129. handsontable({
  130. data: getDates(),
  131. columns: [
  132. {
  133. type: 'date',
  134. dateFormat: 'MM/DD/YYYY'
  135. }
  136. ]
  137. });
  138. selectCell(0, 0);
  139. expect(getDataAtCell(0, 0)).toMatch('01/14/2006');
  140. keyDown('enter');
  141. mouseDown($('.pika-single').find('.pika-table tbody tr:eq(0) td:eq(0) button'));
  142. setTimeout(() => {
  143. expect(getDataAtCell(0, 0)).toMatch('01/01/2006');
  144. expect($('.htBorders .current.corner').is(':visible')).toBe(true);
  145. done();
  146. }, 150);
  147. });
  148. it('should setup in settings and display defaultDate on calendar', (done) => {
  149. handsontable({
  150. data: getDates(),
  151. minSpareRows: 1,
  152. columns: [
  153. {
  154. type: 'date',
  155. dateFormat: 'MM/DD/YYYY',
  156. defaultDate: '01/01/1900'
  157. }
  158. ]
  159. });
  160. selectCell(5, 0);
  161. expect(getDataAtCell(5, 0)).toBe(null);
  162. keyDown('enter');
  163. var date = new Date('01/01/1900');
  164. expect($('.pika-single').find('.pika-select-year').find(':selected').val()).toMatch(date.getFullYear().toString());
  165. expect($('.pika-single').find('.pika-select-month').find(':selected').val()).toMatch(date.getMonth().toString());
  166. expect($('.pika-single').find('.pika-table .is-selected').text()).toMatch(date.getDate().toString());
  167. keyDown('enter');
  168. setTimeout(() => {
  169. expect(getDataAtCell(5, 0)).toMatch('01/01/1900');
  170. done();
  171. }, 150);
  172. });
  173. it('should close calendar after picking new date', () => {
  174. handsontable({
  175. data: getDates(),
  176. columns: [
  177. {
  178. type: 'date',
  179. dateFormat: 'MM/DD/YYYY'
  180. }
  181. ]
  182. });
  183. selectCell(0, 0);
  184. keyDown('enter');
  185. expect($('.pika-single').is(':visible')).toBe(true);
  186. mouseDown($('.pika-single').find('.pika-table tbody tr:eq(0) td:eq(0) button'));
  187. expect($('.pika-single').is(':visible')).toBe(false);
  188. });
  189. it('should enable to input any value in textarea', (done) => {
  190. var hot = handsontable({
  191. data: getDates(),
  192. columns: [
  193. {
  194. type: 'date'
  195. }
  196. ]
  197. });
  198. selectCell(0, 0);
  199. var editor = hot.getActiveEditor();
  200. editor.beginEditing();
  201. expect(editor.isOpened()).toBe(true);
  202. editor.TEXTAREA.value = 'foo';
  203. keyDownUp('o'.charCodeAt(0));
  204. expect(editor.getValue()).toEqual('foo');
  205. editor.finishEditing();
  206. setTimeout(() => {
  207. expect(getDataAtCell(0, 0)).toEqual('foo');
  208. done();
  209. }, 30);
  210. });
  211. it('should restore original when edited and pressed ESC ', (done) => {
  212. var hot = handsontable({
  213. data: getDates(),
  214. columns: [
  215. {
  216. type: 'date'
  217. }
  218. ]
  219. });
  220. selectCell(0, 0);
  221. var editor = hot.getActiveEditor();
  222. editor.beginEditing();
  223. expect(editor.isOpened()).toBe(true);
  224. editor.TEXTAREA.value = 'foo';
  225. expect(editor.getValue()).toEqual('foo');
  226. keyDownUp(Handsontable.helper.KEY_CODES.ESCAPE); // cancel editing
  227. editor.finishEditing();
  228. setTimeout(() => {
  229. expect(getDataAtCell(0, 0)).toEqual('01/14/2006');
  230. done();
  231. }, 30);
  232. });
  233. it('should display a calendar based on a current date, even if a date in a wrong format was entered previously', (done) => {
  234. const hot = handsontable({
  235. data: Handsontable.helper.createSpreadsheetData(5, 2),
  236. columns: [
  237. {type: 'date'},
  238. {type: 'date', dateFormat: 'YYYY-MM-DD'}
  239. ],
  240. minSpareRows: 1
  241. });
  242. setDataAtCell(4, 1, '15-11-11');
  243. setTimeout(() => {
  244. selectCell(5, 1);
  245. keyDown('enter');
  246. expect($('.pika-single').is(':visible')).toBe(true);
  247. mouseDown($('.pika-single').find('.pika-table tbody tr:eq(3) td:eq(3) button'));
  248. }, 150);
  249. setTimeout(() => {
  250. let resultDate = getDataAtCell(5, 1);
  251. expect(moment(resultDate).year()).toEqual(moment().year());
  252. expect(moment(resultDate).month()).toEqual(moment().month());
  253. done();
  254. }, 300);
  255. });
  256. it('should display Pikaday Calendar bottom of the selected cell', () => {
  257. var hot = handsontable({
  258. data: Handsontable.helper.createSpreadsheetData(5, 2),
  259. columns: [
  260. {type: 'date'},
  261. {type: 'date'}
  262. ]
  263. }),
  264. cellOffset,
  265. datePickerOffset;
  266. selectCell(1, 1);
  267. keyDown('enter');
  268. cellOffset = $(hot.getActiveEditor().TD).offset();
  269. datePickerOffset = $('.pika-single').offset();
  270. // 23 is a height of the editor cell
  271. expect(cellOffset.top + 23).toBeCloseTo(datePickerOffset.top, 0);
  272. expect(cellOffset.left).toBeCloseTo(datePickerOffset.left, 0);
  273. });
  274. it('should display Pikaday Calendar bottom of the selected cell when table have scrolls', () => {
  275. var container = $('#testContainer');
  276. container[0].style.height = '300px';
  277. container[0].style.width = '200px';
  278. container[0].style.overflow = 'hidden';
  279. var hot = handsontable({
  280. data: Handsontable.helper.createSpreadsheetData(30, 10),
  281. colWidths: 60,
  282. columns: [
  283. {type: 'date'},
  284. {type: 'date'},
  285. {type: 'date'},
  286. {type: 'date'},
  287. {type: 'date'},
  288. {type: 'date'},
  289. {type: 'date'}
  290. ]
  291. }),
  292. cellOffset,
  293. datePickerOffset;
  294. selectCell(20, 6);
  295. keyDown('enter');
  296. cellOffset = $(hot.getActiveEditor().TD).offset();
  297. datePickerOffset = $('.pika-single').offset();
  298. expect(cellOffset.top + 23).toBeCloseTo(datePickerOffset.top, 0);
  299. expect(cellOffset.left).toBeCloseTo(datePickerOffset.left, 0);
  300. });
  301. it('should not modify the edited date and time, when opening the editor', () => {
  302. var hot = handsontable({
  303. data: [['02/02/2015 8:00 AM']],
  304. columns: [
  305. {
  306. type: 'date',
  307. dateFormat: 'MM/DD/YYYY h:mm A',
  308. correctFormat: true,
  309. defaultDate: '01/01/1900',
  310. allowEmpty: false,
  311. }
  312. ]
  313. }),
  314. editor,
  315. cellValue;
  316. // setDataAtCell(0, 0, '02/02/2015 8:00 AM');
  317. cellValue = getDataAtCell(0, 0);
  318. selectCell(0, 0);
  319. keyDown('enter');
  320. editor = hot.getActiveEditor();
  321. expect(editor.TEXTAREA.value).toEqual(cellValue);
  322. });
  323. });