3c41333970952e3efb77b4c1eb0cd8c72130392a3a4df172924d768a2fe8914956f3c4f9efc27b5e20cee0e49310c27e9d3bb6fb96de9fecdca8b5d954fd0e 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. describe('manualRowResize', () => {
  2. var id = 'test';
  3. var defaultRowHeight = 22;
  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. it('should change row heights at init', function() {
  14. handsontable({
  15. rowHeaders: true,
  16. manualRowResize: [50, 40, 100]
  17. });
  18. expect(rowHeight(this.$container, 0)).toEqual(51);
  19. expect(rowHeight(this.$container, 1)).toEqual(40);
  20. expect(rowHeight(this.$container, 2)).toEqual(100);
  21. });
  22. it('should be enabled after specifying it in updateSettings config', function() {
  23. var hot = handsontable({
  24. data: [
  25. {id: 1, name: 'Ted', lastName: 'Right'},
  26. {id: 2, name: 'Frank', lastName: 'Honest'},
  27. {id: 3, name: 'Joan', lastName: 'Well'},
  28. {id: 4, name: 'Sid', lastName: 'Strong'},
  29. {id: 5, name: 'Jane', lastName: 'Neat'}
  30. ],
  31. rowHeaders: true
  32. });
  33. updateSettings({manualRowResize: true});
  34. this.$container.find('tbody tr:eq(0) th:eq(0)').simulate('mouseover');
  35. expect($('.manualRowResizer').size()).toBeGreaterThan(0);
  36. });
  37. it('should change the default row height with updateSettings', function() {
  38. handsontable({
  39. manualRowResize: true
  40. });
  41. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2); // + Double border
  42. expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1); // + Single border
  43. expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1); // + Single border
  44. updateSettings({
  45. manualRowResize: [60, 50, 80]
  46. });
  47. expect(rowHeight(this.$container, 0)).toEqual(61);
  48. expect(rowHeight(this.$container, 1)).toEqual(50);
  49. expect(rowHeight(this.$container, 2)).toEqual(80);
  50. });
  51. it('should change the row height with updateSettings', function() {
  52. handsontable({
  53. manualRowResize: [60, 50, 80]
  54. });
  55. expect(rowHeight(this.$container, 0)).toEqual(61);
  56. expect(rowHeight(this.$container, 1)).toEqual(50);
  57. expect(rowHeight(this.$container, 2)).toEqual(80);
  58. updateSettings({
  59. manualRowResize: [30, 80, 100]
  60. });
  61. expect(rowHeight(this.$container, 0)).toEqual(31);
  62. expect(rowHeight(this.$container, 1)).toEqual(80);
  63. expect(rowHeight(this.$container, 2)).toEqual(100);
  64. });
  65. it('should not change the row height when `true` is passing', function() {
  66. handsontable({
  67. manualRowResize: [60, 50, 80]
  68. });
  69. expect(rowHeight(this.$container, 0)).toEqual(61);
  70. expect(rowHeight(this.$container, 1)).toEqual(50);
  71. expect(rowHeight(this.$container, 2)).toEqual(80);
  72. updateSettings({
  73. manualRowResize: true
  74. });
  75. expect(rowHeight(this.$container, 0)).toEqual(61);
  76. expect(rowHeight(this.$container, 1)).toEqual(50);
  77. expect(rowHeight(this.$container, 2)).toEqual(80);
  78. });
  79. it('should change the row height to defaults when undefined is passed', function() {
  80. handsontable({
  81. manualRowResize: [60, 50, 80]
  82. });
  83. expect(rowHeight(this.$container, 0)).toEqual(61);
  84. expect(rowHeight(this.$container, 1)).toEqual(50);
  85. expect(rowHeight(this.$container, 2)).toEqual(80);
  86. updateSettings({
  87. manualRowResize: void 0
  88. });
  89. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2); // + Double border
  90. expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1); // + Single border
  91. expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1); // + Single border
  92. });
  93. it('should reset row height', function() {
  94. handsontable({
  95. manualRowResize: true
  96. });
  97. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  98. expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1);
  99. expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1);
  100. updateSettings({
  101. manualRowResize: true
  102. });
  103. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  104. expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1);
  105. expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1);
  106. });
  107. it('should trigger afterRowResize event after row height changes', function() {
  108. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  109. handsontable({
  110. data: Handsontable.helper.createSpreadsheetData(5, 5),
  111. rowHeaders: true,
  112. manualRowResize: true,
  113. afterRowResize: afterRowResizeCallback
  114. });
  115. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  116. resizeRow(0, 100);
  117. expect(afterRowResizeCallback).toHaveBeenCalledWith(0, 100, void 0, void 0, void 0, void 0);
  118. expect(rowHeight(this.$container, 0)).toEqual(101);
  119. });
  120. it('should not trigger afterRowResize event if row height does not change (delta = 0)', function() {
  121. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  122. handsontable({
  123. data: Handsontable.helper.createSpreadsheetData(5, 5),
  124. rowHeaders: true,
  125. manualRowResize: true,
  126. afterRowResize: afterRowResizeCallback
  127. });
  128. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  129. resizeRow(0, defaultRowHeight);
  130. expect(afterRowResizeCallback).not.toHaveBeenCalled();
  131. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  132. });
  133. it('should not trigger afterRowResize event after if row height does not change (no mousemove event)', function() {
  134. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  135. handsontable({
  136. data: Handsontable.helper.createSpreadsheetData(5, 5),
  137. rowHeaders: true,
  138. manualRowResize: true,
  139. afterRowResize: afterRowResizeCallback
  140. });
  141. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  142. var $th = this.$container.find('tbody tr:eq(0) th:eq(0)');
  143. $th.simulate('mouseover');
  144. var $resizer = this.$container.find('.manualRowResizer');
  145. var resizerPosition = $resizer.position();
  146. $resizer.simulate('mousedown', {
  147. clientY: resizerPosition.top
  148. });
  149. $resizer.simulate('mouseup');
  150. expect(afterRowResizeCallback).not.toHaveBeenCalled();
  151. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  152. });
  153. it('should trigger an afterRowResize after row size changes, after double click', function(done) {
  154. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  155. handsontable({
  156. data: Handsontable.helper.createSpreadsheetData(5, 5),
  157. rowHeaders: true,
  158. manualRowResize: true,
  159. autoRowSize: true,
  160. afterRowResize: afterRowResizeCallback
  161. });
  162. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  163. var $th = this.$container.find('tbody tr:eq(2) th:eq(0)');
  164. $th.simulate('mouseover');
  165. var $resizer = this.$container.find('.manualRowResizer');
  166. var resizerPosition = $resizer.position();
  167. $resizer.simulate('mousedown', {
  168. clientY: resizerPosition.top
  169. });
  170. $resizer.simulate('mouseup');
  171. $resizer.simulate('mousedown', {
  172. clientY: resizerPosition.top
  173. });
  174. $resizer.simulate('mouseup');
  175. setTimeout(() => {
  176. expect(afterRowResizeCallback.calls.count()).toEqual(1);
  177. expect(afterRowResizeCallback.calls.argsFor(0)[0]).toEqual(2);
  178. expect(afterRowResizeCallback.calls.argsFor(0)[1]).toEqual(defaultRowHeight + 1);
  179. expect(rowHeight(spec().$container, 2)).toEqual(defaultRowHeight + 1);
  180. done();
  181. }, 1000);
  182. });
  183. it('should not trigger afterRowResize event after if row height does not change (no dblclick event)', function() {
  184. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  185. handsontable({
  186. data: Handsontable.helper.createSpreadsheetData(5, 5),
  187. rowHeaders: true,
  188. manualRowResize: true,
  189. afterRowResize: afterRowResizeCallback
  190. });
  191. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  192. var $th = this.$container.find('tbody tr:eq(2) th:eq(0)');
  193. $th.simulate('mouseover');
  194. var $resizer = this.$container.find('.manualRowResizer');
  195. var resizerPosition = $resizer.position();
  196. $resizer.simulate('mousedown', {
  197. clientY: resizerPosition.top
  198. });
  199. $resizer.simulate('mouseup');
  200. expect(afterRowResizeCallback).not.toHaveBeenCalled();
  201. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  202. });
  203. it('should display the resize handle in the correct place after the table has been scrolled', function() {
  204. var hot = handsontable({
  205. data: Handsontable.helper.createSpreadsheetData(20, 20),
  206. rowHeaders: true,
  207. manualRowResize: true,
  208. height: 100,
  209. width: 200
  210. });
  211. var mainHolder = hot.view.wt.wtTable.holder;
  212. var $rowHeader = this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)');
  213. $rowHeader.simulate('mouseover');
  214. var $handle = this.$container.find('.manualRowResizer');
  215. $handle[0].style.background = 'red';
  216. expect($rowHeader.offset().left).toBeCloseTo($handle.offset().left, 0);
  217. expect($rowHeader.offset().top + $rowHeader.height() - 5).toBeCloseTo($handle.offset().top, 0);
  218. $(mainHolder).scrollTop(200);
  219. $(mainHolder).scroll();
  220. $rowHeader = this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)');
  221. $rowHeader.simulate('mouseover');
  222. expect($rowHeader.offset().left).toBeCloseTo($handle.offset().left, 0);
  223. expect($rowHeader.offset().top + $rowHeader.height() - 5).toBeCloseTo($handle.offset().top, 0);
  224. });
  225. it('should autosize selected rows after double click on handler', function(done) {
  226. handsontable({
  227. data: Handsontable.helper.createSpreadsheetData(9, 9),
  228. rowHeaders: true,
  229. manualRowResize: true,
  230. });
  231. resizeRow(2, 300);
  232. var $resizer = this.$container.find('.manualRowResizer');
  233. var resizerPosition = $resizer.position();
  234. this.$container.find('.ht_clone_left tbody tr:eq(1) th:eq(0)').simulate('mousedown');
  235. this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)').simulate('mouseover');
  236. this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mouseover');
  237. this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mousemove');
  238. this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mouseup');
  239. setTimeout(() => {
  240. $resizer.simulate('mousedown', {clientY: resizerPosition.top});
  241. $resizer.simulate('mouseup');
  242. $resizer.simulate('mousedown', {clientY: resizerPosition.top});
  243. $resizer.simulate('mouseup');
  244. }, 600);
  245. setTimeout(() => {
  246. expect(rowHeight(spec().$container, 1)).toBeAroundValue(24);
  247. expect(rowHeight(spec().$container, 2)).toBeAroundValue(24);
  248. expect(rowHeight(spec().$container, 3)).toBeAroundValue(24);
  249. done();
  250. }, 1600);
  251. });
  252. it('should resize (expanding and narrowing) selected rows', function(done) {
  253. var hot = handsontable({
  254. data: Handsontable.helper.createSpreadsheetData(10, 20),
  255. rowHeaders: true,
  256. manualRowResize: true
  257. });
  258. resizeRow(2, 60);
  259. var $rowsHeaders = this.$container.find('.ht_clone_left tr th');
  260. this.$container.find('.ht_clone_left tbody tr:eq(1) th:eq(0)').simulate('mouseover');
  261. $rowsHeaders.eq(1).simulate('mousedown');
  262. $rowsHeaders.eq(2).simulate('mouseover');
  263. $rowsHeaders.eq(3).simulate('mouseover');
  264. $rowsHeaders.eq(3).simulate('mousemove');
  265. $rowsHeaders.eq(3).simulate('mouseup');
  266. var $resizer = this.$container.find('.manualRowResizer');
  267. var resizerPosition = $resizer.position();
  268. setTimeout(() => {
  269. $resizer.simulate('mousedown', {clientY: resizerPosition.top});
  270. $resizer.simulate('mousemove', {clientY: resizerPosition.top - $rowsHeaders.eq(3).height() + 80});
  271. $resizer.simulate('mouseup');
  272. expect($rowsHeaders.eq(1).height()).toEqual(80);
  273. expect($rowsHeaders.eq(2).height()).toEqual(80);
  274. expect($rowsHeaders.eq(3).height()).toEqual(80);
  275. }, 600);
  276. setTimeout(() => {
  277. $resizer.simulate('mousedown', {clientY: resizerPosition.top});
  278. $resizer.simulate('mousemove', {clientY: resizerPosition.top - $rowsHeaders.eq(3).height() + 35});
  279. $resizer.simulate('mouseup');
  280. expect($rowsHeaders.eq(1).height()).toEqual(35);
  281. expect($rowsHeaders.eq(2).height()).toEqual(35);
  282. expect($rowsHeaders.eq(3).height()).toEqual(35);
  283. done();
  284. }, 1800);
  285. });
  286. describe('handle and guide', () => {
  287. it('should display the resize handle in the proper position and with a proper size', function() {
  288. var hot = handsontable({
  289. data: [
  290. {id: 1, name: 'Ted', lastName: 'Right'},
  291. {id: 2, name: 'Frank', lastName: 'Honest'},
  292. {id: 3, name: 'Joan', lastName: 'Well'},
  293. {id: 4, name: 'Sid', lastName: 'Strong'},
  294. {id: 5, name: 'Jane', lastName: 'Neat'}
  295. ],
  296. rowHeaders: true,
  297. manualRowResize: true
  298. });
  299. var $headerTH = this.$container.find('tbody tr:eq(1) th:eq(0)');
  300. $headerTH.simulate('mouseover');
  301. var $handle = $('.manualRowResizer');
  302. expect($handle.offset().top).toBeCloseTo($headerTH.offset().top + $headerTH.outerHeight() - $handle.outerHeight() - 1, 0);
  303. expect($handle.width()).toBeCloseTo($headerTH.outerWidth(), 0);
  304. });
  305. });
  306. });