d1cbc6d96003add91dc341409b57ea3388600ea9095572b67d072f4aeba0f5be0b5ad8aa09fed00ddf07dd348c377ff81df81dee70b0e72f914d21c3c3db4f 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. describe('manualColumnMove', () => {
  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', () => {
  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', () => {
  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', () => {
  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', () => {
  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: [
  113. {data: 2},
  114. {data: 0},
  115. {data: 1},
  116. ]
  117. });
  118. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('B1');
  119. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('C1');
  120. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('A1');
  121. });
  122. it('should reset column order with updateSettings when undefined is passed', function() {
  123. handsontable({
  124. data: Handsontable.helper.createSpreadsheetData(10, 10),
  125. manualColumnMove: [1, 2, 0]
  126. });
  127. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('B1');
  128. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('C1');
  129. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('A1');
  130. updateSettings({
  131. manualColumnMove: void 0
  132. });
  133. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  134. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  135. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  136. });
  137. });
  138. describe('loadData', function() {
  139. it('should increase numbers of columns if it is necessary', function() {
  140. var hot = handsontable({
  141. data: Handsontable.helper.createSpreadsheetData(5, 5),
  142. manualColumnMove: true
  143. });
  144. hot.loadData(Handsontable.helper.createSpreadsheetData(10, 10));
  145. expect(countRows()).toEqual(10);
  146. expect(hot.getPlugin('manualColumnMove').columnsMapper.__arrayMap.length).toEqual(10);
  147. });
  148. it('should decrease numbers of columns if it is necessary', function() {
  149. var hot = handsontable({
  150. data: Handsontable.helper.createSpreadsheetData(5, 5),
  151. manualColumnMove: true
  152. });
  153. hot.loadData(Handsontable.helper.createSpreadsheetData(2, 2));
  154. expect(countRows()).toEqual(2);
  155. expect(hot.getPlugin('manualColumnMove').columnsMapper.__arrayMap.length).toEqual(2);
  156. });
  157. });
  158. describe('moving', function() {
  159. it('should move column by API', function () {
  160. var hot = handsontable({
  161. data: Handsontable.helper.createSpreadsheetData(10, 10),
  162. colHeaders: true,
  163. manualColumnMove: true
  164. });
  165. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  166. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  167. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  168. hot.getPlugin('manualColumnMove').moveColumn(2, 0);
  169. hot.render();
  170. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('C1');
  171. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('A1');
  172. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('B1');
  173. });
  174. it('should move many columns by API', function() {
  175. var hot = handsontable({
  176. data: Handsontable.helper.createSpreadsheetData(10, 10),
  177. colHeaders: true,
  178. manualColumnMove: true
  179. });
  180. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  181. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  182. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  183. hot.getPlugin('manualColumnMove').moveColumns([7, 9, 8], 0);
  184. hot.render();
  185. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('H1');
  186. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('J1');
  187. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('I1');
  188. });
  189. it('should trigger an beforeColumnMove event before column move', function() {
  190. var beforeMoveColumnCallback = jasmine.createSpy('beforeMoveColumnCallback');
  191. var hot = handsontable({
  192. data: Handsontable.helper.createSpreadsheetData(10, 10),
  193. colHeaders: true,
  194. manualColumnMove: true,
  195. beforeColumnMove: beforeMoveColumnCallback
  196. });
  197. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  198. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  199. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  200. hot.getPlugin('manualColumnMove').moveColumns([8, 9, 7], 0);
  201. hot.render();
  202. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('I1');
  203. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('J1');
  204. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('H1');
  205. expect(beforeMoveColumnCallback).toHaveBeenCalledWith([8, 9, 7], 0, void 0, void 0, void 0, void 0);
  206. });
  207. it('should trigger an afterColumnMove event after column move', function() {
  208. var afterMoveColumnCallback = jasmine.createSpy('afterMoveColumnCallback');
  209. this.$container.height(150);
  210. var hot = handsontable({
  211. data: Handsontable.helper.createSpreadsheetData(10, 10),
  212. colHeaders: true,
  213. manualColumnMove: true,
  214. afterColumnMove: afterMoveColumnCallback
  215. });
  216. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  217. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  218. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  219. hot.getPlugin('manualColumnMove').moveColumns([8, 9, 7], 0);
  220. hot.render();
  221. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('I1');
  222. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('J1');
  223. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('H1');
  224. expect(afterMoveColumnCallback).toHaveBeenCalledWith([8, 9, 7], 0, void 0, void 0, void 0, void 0);
  225. });
  226. it('should move the second column to the first column', function() {
  227. var hot = handsontable({
  228. data: Handsontable.helper.createSpreadsheetData(10, 10),
  229. colHeaders: true,
  230. manualColumnMove: true
  231. });
  232. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  233. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  234. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  235. var $rowsHeaders = this.$container.find('.ht_clone_top tr th');
  236. $rowsHeaders.eq(1).simulate('mousedown');
  237. $rowsHeaders.eq(1).simulate('mouseup');
  238. $rowsHeaders.eq(1).simulate('mousedown');
  239. $rowsHeaders.eq(0).simulate('mouseover');
  240. $rowsHeaders.eq(0).simulate('mousemove');
  241. $rowsHeaders.eq(0).simulate('mouseup');
  242. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('B1');
  243. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('A1');
  244. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  245. });
  246. it('should move the second row to the third row', function() {
  247. handsontable({
  248. data: Handsontable.helper.createSpreadsheetData(10, 10),
  249. colHeaders: true,
  250. manualColumnMove: true
  251. });
  252. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  253. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('B1');
  254. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('C1');
  255. var $rowsHeaders = this.$container.find('.ht_clone_top tr th');
  256. $rowsHeaders.eq(1).simulate('mousedown');
  257. $rowsHeaders.eq(1).simulate('mouseup');
  258. $rowsHeaders.eq(1).simulate('mousedown');
  259. $rowsHeaders.eq(3).simulate('mouseover');
  260. $rowsHeaders.eq(3).simulate('mousemove');
  261. $rowsHeaders.eq(3).simulate('mouseup');
  262. expect(this.$container.find('tbody tr:eq(0) td:eq(0)').text()).toEqual('A1');
  263. expect(this.$container.find('tbody tr:eq(0) td:eq(1)').text()).toEqual('C1');
  264. expect(this.$container.find('tbody tr:eq(0) td:eq(2)').text()).toEqual('B1');
  265. });
  266. it('should properly scrolling viewport if mouse is over part-visible cell', (done) => {
  267. var hot = handsontable({
  268. data: Handsontable.helper.createSpreadsheetData(10, 20),
  269. colHeaders: true,
  270. rowHeaders: true,
  271. manualColumnMove: true,
  272. width: 600,
  273. height: 600,
  274. colWidths: 47
  275. });
  276. hot.selectCell(0, 19);
  277. setTimeout(() => {
  278. expect(hot.view.wt.wtTable.getFirstVisibleColumn()).toBeGreaterThan(8);
  279. var $rowsHeaders = spec().$container.find('.ht_clone_top tr th');
  280. $rowsHeaders.eq(2).simulate('mousedown');
  281. $rowsHeaders.eq(2).simulate('mouseup');
  282. $rowsHeaders.eq(2).simulate('mousedown');
  283. $rowsHeaders.eq(1).simulate('mouseover');
  284. $rowsHeaders.eq(1).simulate('mousemove');
  285. $rowsHeaders.eq(1).simulate('mouseup');
  286. }, 50);
  287. setTimeout(() => {
  288. expect(hot.view.wt.wtTable.getFirstVisibleColumn()).toBeLessThan(9);
  289. done();
  290. }, 150);
  291. });
  292. it('moving column should keep cell meta created using cells function', () => {
  293. var hot = handsontable({
  294. data: Handsontable.helper.createSpreadsheetData(10, 10),
  295. colHeaders: true,
  296. manualColumnMove: true,
  297. cells(row, col) {
  298. if (row == 1 && col == 0) {
  299. this.readOnly = true;
  300. }
  301. }
  302. });
  303. var htCore = getHtCore();
  304. expect(htCore.find('tbody tr:eq(1) td:eq(0)')[0].className.indexOf('htDimmed')).toBeGreaterThan(-1);
  305. hot.getPlugin('manualColumnMove').moveColumn(0, 3);
  306. hot.render();
  307. expect(htCore.find('tbody tr:eq(1) td:eq(2)')[0].className.indexOf('htDimmed')).toBeGreaterThan(-1);
  308. });
  309. it('moving column should keep cell meta created using cell array', () => {
  310. var hot = handsontable({
  311. data: Handsontable.helper.createSpreadsheetData(10, 10),
  312. colHeaders: true,
  313. manualColumnMove: true,
  314. cell: [
  315. {row: 1, col: 0, readOnly: true}
  316. ]
  317. });
  318. var htCore = getHtCore();
  319. expect(htCore.find('tbody tr:eq(1) td:eq(0)')[0].className.indexOf('htDimmed')).toBeGreaterThan(-1);
  320. hot.getPlugin('manualColumnMove').moveColumn(3, 0);
  321. hot.render();
  322. expect(htCore.find('tbody tr:eq(1) td:eq(1)')[0].className.indexOf('htDimmed')).toBeGreaterThan(-1);
  323. });
  324. });
  325. describe('copy-paste', () => {
  326. it('should create new columns is are needed', () => {
  327. var hot = handsontable({
  328. data: Handsontable.helper.createSpreadsheetData(5, 5),
  329. colHeaders: true,
  330. manualColumnMove: true,
  331. });
  332. var changesSet = [
  333. [3, 4, 'A1'],
  334. [3, 5, 'B1'],
  335. [3, 6, 'C1'],
  336. [3, 7, 'D1'],
  337. ];
  338. // unfortunately couse of security rules, we can't simulate native mechanism (e.g. CTRL+C -> CTRL+V)
  339. hot.setDataAtCell(changesSet, void 0, void 0, 'CopyPaste.paste');
  340. expect(hot.countCols()).toEqual(8);
  341. });
  342. });
  343. describe('undoRedo', () => {
  344. xit('should back changes', () => {
  345. var hot = handsontable({
  346. data: Handsontable.helper.createSpreadsheetData(10, 10),
  347. colHeaders: true,
  348. manualColumnMove: true,
  349. });
  350. hot.getPlugin('manualColumnMove').moveColumn(1, 4);
  351. hot.render();
  352. expect(hot.getDataAtCell(1, 3)).toBe('B2');
  353. hot.undo();
  354. expect(hot.getDataAtCell(1, 3)).toBe('D2');
  355. });
  356. xit('should revert changes', () => {
  357. var hot = handsontable({
  358. data: Handsontable.helper.createSpreadsheetData(10, 10),
  359. colHeaders: true,
  360. manualColumnMove: true,
  361. });
  362. hot.getPlugin('manualColumnMove').moveColumn(1, 4);
  363. hot.render();
  364. expect(hot.getDataAtCell(1, 3)).toBe('A2');
  365. hot.undo();
  366. expect(hot.getDataAtCell(1, 1)).toBe('A2');
  367. hot.redo();
  368. expect(hot.getDataAtCell(1, 3)).toBe('A2');
  369. });
  370. });
  371. });