19913f129105e3662d95aaee072694228d734feea6696c6279043d26cb2f9473c8baf4b638ff01b8015900581b48535ea98254d8733306cb6e10f184fb2a32 13 KB

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