ae1906d5e04537b3eeaa53aceaccc938be38082bb381435d285666df05d9c3c943e4156f4e2ef67cfcda45305a701186fd05015c9d69052f26e8b35d7e68f1 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  1. 'use strict';
  2. describe('manualColumnMove', function () {
  3. var id = 'testContainer';
  4. beforeEach(function () {
  5. this.$container = $('<div id="' + id + '"></div>').appendTo('body');
  6. });
  7. afterEach(function () {
  8. if (this.$container) {
  9. destroy();
  10. this.$container.remove();
  11. }
  12. });
  13. describe('init', function () {
  14. it('should change column order at init', function () {
  15. handsontable({
  16. data: Handsontable.helper.createSpreadsheetData(10, 10),
  17. manualColumnMove: [1, 2, 0]
  18. });
  19. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('B1');
  20. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('C1');
  21. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('A1');
  22. });
  23. });
  24. describe('persistentState', function () {
  25. it('should load data from cache after initialization of new Handsontable instance', function (done) {
  26. var hot = handsontable({
  27. data: Handsontable.helper.createSpreadsheetData(10, 10),
  28. manualColumnMove: true,
  29. persistentState: true
  30. });
  31. var dataAt0x2Cell = getDataAtCell(0, 2);
  32. var manualColumnMovePlugin = hot.getPlugin('manualColumnMove');
  33. manualColumnMovePlugin.moveColumn(2, 0);
  34. manualColumnMovePlugin.persistentStateSave();
  35. hot.destroy();
  36. this.$container.remove();
  37. this.$container = $('<div id="' + id + '"></div>').appendTo('body');
  38. handsontable({
  39. data: Handsontable.helper.createSpreadsheetData(10, 10),
  40. manualColumnMove: true,
  41. persistentState: true
  42. });
  43. expect(getDataAtCell(0, 0)).toEqual(dataAt0x2Cell);
  44. done();
  45. });
  46. it('should work with updateSettings properly', function () {
  47. var hot = handsontable({
  48. data: Handsontable.helper.createSpreadsheetData(10, 10),
  49. manualColumnMove: true,
  50. persistentState: true
  51. });
  52. var dataAt0x2Cell = getDataAtCell(0, 2);
  53. var manualColumnMovePlugin = hot.getPlugin('manualColumnMove');
  54. manualColumnMovePlugin.moveColumn(2, 0);
  55. manualColumnMovePlugin.persistentStateSave();
  56. updateSettings({});
  57. expect(getDataAtCell(0, 0)).toEqual(dataAt0x2Cell);
  58. });
  59. });
  60. describe('updateSettings', function () {
  61. it('should be enabled after specifying it in updateSettings config', function () {
  62. handsontable({
  63. data: Handsontable.helper.createSpreadsheetData(10, 10),
  64. colHeaders: true
  65. });
  66. updateSettings({
  67. manualColumnMove: true
  68. });
  69. this.$container.find('thead tr:eq(0) th:eq(0)').simulate('mousedown');
  70. this.$container.find('thead tr:eq(0) th:eq(0)').simulate('mouseup');
  71. expect(this.$container.hasClass('after-selection--columns')).toBeGreaterThan(0);
  72. });
  73. it('should change the default column order with updateSettings', function () {
  74. handsontable({
  75. data: Handsontable.helper.createSpreadsheetData(10, 10),
  76. manualColumnMove: true
  77. });
  78. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  79. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  80. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  81. updateSettings({
  82. manualColumnMove: [2, 1, 0]
  83. });
  84. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('C1');
  85. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  86. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('A1');
  87. });
  88. it('should change column order with updateSettings', function () {
  89. handsontable({
  90. data: Handsontable.helper.createSpreadsheetData(10, 10),
  91. manualColumnMove: [1, 2, 0]
  92. });
  93. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('B1');
  94. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('C1');
  95. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('A1');
  96. updateSettings({
  97. manualColumnMove: [2, 1, 0]
  98. });
  99. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('C1');
  100. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  101. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('A1');
  102. });
  103. it('should update columnsMapper when updateSettings change numbers of columns', function () {
  104. var hot = handsontable({
  105. data: Handsontable.helper.createSpreadsheetData(10, 10),
  106. manualColumnMove: true
  107. });
  108. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  109. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  110. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  111. hot.getPlugin('manualColumnMove').moveColumn(2, 0);
  112. updateSettings({
  113. columns: [{ data: 2 }, { data: 0 }, { data: 1 }]
  114. });
  115. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('B1');
  116. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('C1');
  117. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('A1');
  118. });
  119. it('should reset column order with updateSettings when undefined is passed', function () {
  120. handsontable({
  121. data: Handsontable.helper.createSpreadsheetData(10, 10),
  122. manualColumnMove: [1, 2, 0]
  123. });
  124. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('B1');
  125. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('C1');
  126. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('A1');
  127. updateSettings({
  128. manualColumnMove: void 0
  129. });
  130. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  131. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  132. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  133. });
  134. });
  135. describe('loadData', function () {
  136. it('should increase numbers of columns if it is necessary', function () {
  137. var hot = handsontable({
  138. data: Handsontable.helper.createSpreadsheetData(5, 5),
  139. manualColumnMove: true
  140. });
  141. hot.loadData(Handsontable.helper.createSpreadsheetData(10, 10));
  142. expect(countRows()).toEqual(10);
  143. expect(hot.getPlugin('manualColumnMove').columnsMapper.__arrayMap.length).toEqual(10);
  144. });
  145. it('should decrease numbers of columns if it is necessary', function () {
  146. var hot = handsontable({
  147. data: Handsontable.helper.createSpreadsheetData(5, 5),
  148. manualColumnMove: true
  149. });
  150. hot.loadData(Handsontable.helper.createSpreadsheetData(2, 2));
  151. expect(countRows()).toEqual(2);
  152. expect(hot.getPlugin('manualColumnMove').columnsMapper.__arrayMap.length).toEqual(2);
  153. });
  154. });
  155. describe('moving', function () {
  156. it('should move column by API', function () {
  157. var hot = handsontable({
  158. data: Handsontable.helper.createSpreadsheetData(10, 10),
  159. colHeaders: true,
  160. manualColumnMove: true
  161. });
  162. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  163. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  164. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  165. hot.getPlugin('manualColumnMove').moveColumn(2, 0);
  166. hot.render();
  167. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('C1');
  168. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('A1');
  169. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('B1');
  170. });
  171. it('should move many columns by API', function () {
  172. var hot = handsontable({
  173. data: Handsontable.helper.createSpreadsheetData(10, 10),
  174. colHeaders: true,
  175. manualColumnMove: true
  176. });
  177. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  178. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  179. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  180. hot.getPlugin('manualColumnMove').moveColumns([7, 9, 8], 0);
  181. hot.render();
  182. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('H1');
  183. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('J1');
  184. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('I1');
  185. });
  186. it('should trigger an beforeColumnMove event before column move', function () {
  187. var beforeMoveColumnCallback = jasmine.createSpy('beforeMoveColumnCallback');
  188. var hot = handsontable({
  189. data: Handsontable.helper.createSpreadsheetData(10, 10),
  190. colHeaders: true,
  191. manualColumnMove: true,
  192. beforeColumnMove: beforeMoveColumnCallback
  193. });
  194. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  195. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  196. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  197. hot.getPlugin('manualColumnMove').moveColumns([8, 9, 7], 0);
  198. hot.render();
  199. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('I1');
  200. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('J1');
  201. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('H1');
  202. expect(beforeMoveColumnCallback).toHaveBeenCalledWith([8, 9, 7], 0, void 0, void 0, void 0, void 0);
  203. });
  204. it('should trigger an afterColumnMove event after column move', function () {
  205. var afterMoveColumnCallback = jasmine.createSpy('afterMoveColumnCallback');
  206. this.$container.height(150);
  207. var hot = handsontable({
  208. data: Handsontable.helper.createSpreadsheetData(10, 10),
  209. colHeaders: true,
  210. manualColumnMove: true,
  211. afterColumnMove: afterMoveColumnCallback
  212. });
  213. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  214. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  215. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  216. hot.getPlugin('manualColumnMove').moveColumns([8, 9, 7], 0);
  217. hot.render();
  218. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('I1');
  219. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('J1');
  220. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('H1');
  221. expect(afterMoveColumnCallback).toHaveBeenCalledWith([8, 9, 7], 0, void 0, void 0, void 0, void 0);
  222. });
  223. it('should move the second column to the first column', function () {
  224. var hot = handsontable({
  225. data: Handsontable.helper.createSpreadsheetData(10, 10),
  226. colHeaders: true,
  227. manualColumnMove: true
  228. });
  229. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  230. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  231. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  232. var $rowsHeaders = this.$container.find('.ht_clone_top tr th');
  233. $rowsHeaders.eq(1).simulate('mousedown');
  234. $rowsHeaders.eq(1).simulate('mouseup');
  235. $rowsHeaders.eq(1).simulate('mousedown');
  236. $rowsHeaders.eq(0).simulate('mouseover');
  237. $rowsHeaders.eq(0).simulate('mousemove');
  238. $rowsHeaders.eq(0).simulate('mouseup');
  239. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('B1');
  240. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('A1');
  241. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  242. });
  243. it('should move the second row to the third row', function () {
  244. handsontable({
  245. data: Handsontable.helper.createSpreadsheetData(10, 10),
  246. colHeaders: true,
  247. manualColumnMove: true
  248. });
  249. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  250. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  251. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  252. var $rowsHeaders = this.$container.find('.ht_clone_top tr th');
  253. $rowsHeaders.eq(1).simulate('mousedown');
  254. $rowsHeaders.eq(1).simulate('mouseup');
  255. $rowsHeaders.eq(1).simulate('mousedown');
  256. $rowsHeaders.eq(3).simulate('mouseover');
  257. $rowsHeaders.eq(3).simulate('mousemove');
  258. $rowsHeaders.eq(3).simulate('mouseup');
  259. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  260. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('C1');
  261. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('B1');
  262. });
  263. it('should properly scrolling viewport if mouse is over part-visible cell', function (done) {
  264. var hot = handsontable({
  265. data: Handsontable.helper.createSpreadsheetData(10, 20),
  266. colHeaders: true,
  267. rowHeaders: true,
  268. manualColumnMove: true,
  269. width: 600,
  270. height: 600,
  271. colWidths: 47
  272. });
  273. hot.selectCell(0, 19);
  274. setTimeout(function () {
  275. expect(hot.view.wt.wtTable.getFirstVisibleColumn()).toBeGreaterThan(8);
  276. var $rowsHeaders = spec().$container.find('.ht_clone_top tr th');
  277. $rowsHeaders.eq(2).simulate('mousedown');
  278. $rowsHeaders.eq(2).simulate('mouseup');
  279. $rowsHeaders.eq(2).simulate('mousedown');
  280. $rowsHeaders.eq(1).simulate('mouseover');
  281. $rowsHeaders.eq(1).simulate('mousemove');
  282. $rowsHeaders.eq(1).simulate('mouseup');
  283. }, 50);
  284. setTimeout(function () {
  285. expect(hot.view.wt.wtTable.getFirstVisibleColumn()).toBeLessThan(9);
  286. done();
  287. }, 150);
  288. });
  289. it('moving column should keep cell meta created using cells function', function () {
  290. var hot = handsontable({
  291. data: Handsontable.helper.createSpreadsheetData(10, 10),
  292. colHeaders: true,
  293. manualColumnMove: true,
  294. cells: function cells(row, col) {
  295. if (row == 1 && col == 0) {
  296. this.readOnly = true;
  297. }
  298. }
  299. });
  300. var htCore = getHtCore();
  301. expect(htCore.find('tbody tr:eq(1) td:eq(0)')[0].className.indexOf('htDimmed')).toBeGreaterThan(-1);
  302. hot.getPlugin('manualColumnMove').moveColumn(0, 3);
  303. hot.render();
  304. expect(htCore.find('tbody tr:eq(1) td:eq(2)')[0].className.indexOf('htDimmed')).toBeGreaterThan(-1);
  305. });
  306. it('moving column should keep cell meta created using cell array', function () {
  307. var hot = handsontable({
  308. data: Handsontable.helper.createSpreadsheetData(10, 10),
  309. colHeaders: true,
  310. manualColumnMove: true,
  311. cell: [{ row: 1, col: 0, readOnly: true }]
  312. });
  313. var htCore = getHtCore();
  314. expect(htCore.find('tbody tr:eq(1) td:eq(0)')[0].className.indexOf('htDimmed')).toBeGreaterThan(-1);
  315. hot.getPlugin('manualColumnMove').moveColumn(3, 0);
  316. hot.render();
  317. expect(htCore.find('tbody tr:eq(1) td:eq(1)')[0].className.indexOf('htDimmed')).toBeGreaterThan(-1);
  318. });
  319. });
  320. describe('copy-paste', function () {
  321. it('should create new columns is are needed', function () {
  322. var hot = handsontable({
  323. data: Handsontable.helper.createSpreadsheetData(5, 5),
  324. colHeaders: true,
  325. manualColumnMove: true
  326. });
  327. var changesSet = [[3, 4, 'A1'], [3, 5, 'B1'], [3, 6, 'C1'], [3, 7, 'D1']];
  328. // unfortunately couse of security rules, we can't simulate native mechanism (e.g. CTRL+C -> CTRL+V)
  329. hot.setDataAtCell(changesSet, void 0, void 0, 'CopyPaste.paste');
  330. expect(hot.countCols()).toEqual(8);
  331. });
  332. });
  333. describe('undoRedo', function () {
  334. xit('should back changes', function () {
  335. var hot = handsontable({
  336. data: Handsontable.helper.createSpreadsheetData(10, 10),
  337. colHeaders: true,
  338. manualColumnMove: true
  339. });
  340. hot.getPlugin('manualColumnMove').moveColumn(1, 4);
  341. hot.render();
  342. expect(hot.getDataAtCell(1, 3)).toBe('B2');
  343. hot.undo();
  344. expect(hot.getDataAtCell(1, 3)).toBe('D2');
  345. });
  346. xit('should revert changes', function () {
  347. var hot = handsontable({
  348. data: Handsontable.helper.createSpreadsheetData(10, 10),
  349. colHeaders: true,
  350. manualColumnMove: true
  351. });
  352. hot.getPlugin('manualColumnMove').moveColumn(1, 4);
  353. hot.render();
  354. expect(hot.getDataAtCell(1, 3)).toBe('A2');
  355. hot.undo();
  356. expect(hot.getDataAtCell(1, 1)).toBe('A2');
  357. hot.redo();
  358. expect(hot.getDataAtCell(1, 3)).toBe('A2');
  359. });
  360. });
  361. });