manualRowMove.e2e.js 15 KB

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