86aa3ec20c84e2734f3064fb7e6198812fd3d65b5bba34808f001972c5f5b9c179814db3629635be039af94b43fcd2f235fd36732b9b3ad3c73bb38f1a587f 15 KB

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