manualColumnMove.e2e.js 17 KB

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