ab9d8c3f52d613cba3481071e030105e6e5dfe66ba4317dae1eda1198112bc34cae7d69d3e18c2a9a33ed33379b5d50b7025d594cb0f04709f233ff4eb41c0 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
  1. describe('AutoRowSize', function () {
  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. function arrayOfObjects() {
  13. return [{ id: 'Short' }, { id: 'Somewhat\nlong' }, { id: 'The\nvery\nvery\nvery\nlongest one' }];
  14. }
  15. function arrayOfObjects2() {
  16. return [{ id: 'Short', name: 'Somewhat long' }, { id: 'Somewhat long', name: 'The very very longest one' }, { id: 'The very very very longest one', name: 'Short' }];
  17. }
  18. it('should apply auto size by default', function () {
  19. handsontable({
  20. data: arrayOfObjects()
  21. });
  22. var height0 = rowHeight(this.$container, 0);
  23. var height1 = rowHeight(this.$container, 1);
  24. var height2 = rowHeight(this.$container, 2);
  25. expect(height0).toBeLessThan(height1);
  26. expect(height1).toBeLessThan(height2);
  27. });
  28. it('should draw scrollbar correctly (proper height) after calculation when autoRowSize option is set (long text in row) #4000', function (done) {
  29. var row = ['This is very long text which will break this cell text into two lines'];
  30. var data = [];
  31. var nrOfRows = 200;
  32. var columnWidth = 100;
  33. for (var i = 0; i < nrOfRows; i += 1) {
  34. data.push(row);
  35. }
  36. handsontable({
  37. data: data,
  38. colWidths: function colWidths() {
  39. return columnWidth;
  40. },
  41. autoRowSize: true
  42. });
  43. var oldHeight = spec().$container[0].scrollHeight;
  44. setTimeout(function () {
  45. var newHeight = spec().$container[0].scrollHeight;
  46. expect(oldHeight).toBeLessThan(newHeight);
  47. done();
  48. }, 200);
  49. });
  50. describe('should draw scrollbar correctly (proper height) after calculation when autoRowSize option is set (`table td` element height set by CSS) #4000', function () {
  51. var cellHeightInPx = 100;
  52. var nrOfRows = null;
  53. var nrOfColumns = 200,
  54. style;
  55. var SYNC_CALCULATION_LIMIT = Handsontable.plugins.AutoRowSize.SYNC_CALCULATION_LIMIT;
  56. var CALCULATION_STEP = Handsontable.plugins.AutoRowSize.CALCULATION_STEP;
  57. beforeEach(function () {
  58. if (!this.$container) {
  59. this.$container = $('<div id="' + id + '"></div>').appendTo('body');
  60. }
  61. var css = '.handsontable table td { height: ' + cellHeightInPx + 'px !important }',
  62. head = document.head;
  63. style = document.createElement('style');
  64. style.type = 'text/css';
  65. if (style.styleSheet) {
  66. style.styleSheet.cssText = css;
  67. } else {
  68. style.appendChild(document.createTextNode(css));
  69. }
  70. $(head).append(style);
  71. });
  72. afterEach(function () {
  73. if (this.$container) {
  74. destroy();
  75. this.$container.remove();
  76. }
  77. if (style) {
  78. $(style).remove();
  79. }
  80. });
  81. it('(SYNC_CALCULATION_LIMIT - 1 rows)', function (done) {
  82. nrOfRows = SYNC_CALCULATION_LIMIT - 1;
  83. handsontable({
  84. data: Handsontable.helper.createSpreadsheetData(nrOfRows, nrOfColumns),
  85. autoRowSize: true
  86. });
  87. setTimeout(function () {
  88. var newHeight = spec().$container[0].scrollHeight;
  89. expect(newHeight).toEqual((cellHeightInPx + 1) * nrOfRows + 1);
  90. done();
  91. }, 200);
  92. });
  93. it('(SYNC_CALCULATION_LIMIT + 1 rows)', function (done) {
  94. nrOfRows = SYNC_CALCULATION_LIMIT + 1;
  95. handsontable({
  96. data: Handsontable.helper.createSpreadsheetData(nrOfRows, nrOfColumns),
  97. autoRowSize: true
  98. });
  99. setTimeout(function () {
  100. var newHeight = spec().$container[0].scrollHeight;
  101. expect(newHeight).toEqual((cellHeightInPx + 1) * nrOfRows + 1);
  102. done();
  103. }, 200);
  104. });
  105. it('(SYNC_CALCULATION_LIMIT + CALCULATION_STEP - 1 rows)', function (done) {
  106. nrOfRows = SYNC_CALCULATION_LIMIT + CALCULATION_STEP - 1;
  107. handsontable({
  108. data: Handsontable.helper.createSpreadsheetData(nrOfRows, nrOfColumns),
  109. autoRowSize: true
  110. });
  111. setTimeout(function () {
  112. var newHeight = spec().$container[0].scrollHeight;
  113. expect(newHeight).toEqual((cellHeightInPx + 1) * nrOfRows + 1);
  114. done();
  115. }, 200);
  116. });
  117. it('(SYNC_CALCULATION_LIMIT + CALCULATION_STEP + 1 rows)', function (done) {
  118. nrOfRows = SYNC_CALCULATION_LIMIT + CALCULATION_STEP + 1;
  119. handsontable({
  120. data: Handsontable.helper.createSpreadsheetData(nrOfRows, nrOfColumns),
  121. autoRowSize: true
  122. });
  123. setTimeout(function () {
  124. var newHeight = spec().$container[0].scrollHeight;
  125. expect(newHeight).toEqual((cellHeightInPx + 1) * nrOfRows + 1);
  126. done();
  127. }, 200);
  128. });
  129. });
  130. it('should correctly detect row height when table is hidden on init (display: none)', function (done) {
  131. this.$container.css('display', 'none');
  132. var hot = handsontable({
  133. data: arrayOfObjects(),
  134. rowHeaders: true,
  135. autoRowSize: true
  136. });
  137. setTimeout(function () {
  138. spec().$container.css('display', 'block');
  139. hot.render();
  140. expect(rowHeight(spec().$container, 0)).toBe(24);
  141. expect(rowHeight(spec().$container, 1)).toBe(43);
  142. expect([106, 127]).toEqual(jasmine.arrayContaining([rowHeight(spec().$container, 2)]));
  143. done();
  144. }, 200);
  145. });
  146. it('should be possible to disable plugin using updateSettings', function () {
  147. var hot = handsontable({
  148. data: arrayOfObjects()
  149. });
  150. var height0 = rowHeight(this.$container, 0);
  151. var height1 = rowHeight(this.$container, 1);
  152. var height2 = rowHeight(this.$container, 2);
  153. expect(height0).toBeLessThan(height1);
  154. expect(height1).toBeLessThan(height2);
  155. updateSettings({
  156. autoRowSize: false
  157. });
  158. hot.setDataAtCell(0, 0, 'A\nB\nC');
  159. var height4 = rowHeight(this.$container, 0);
  160. expect(height4).toBeGreaterThan(height0);
  161. });
  162. it('should be possible to enable plugin using updateSettings', function () {
  163. handsontable({
  164. data: arrayOfObjects(),
  165. autoRowSize: false
  166. });
  167. var height0 = parseInt(getCell(0, 0).style.height, 10);
  168. var height1 = parseInt(getCell(1, 0).style.height, 10);
  169. var height2 = parseInt(getCell(2, 0).style.height, 10);
  170. expect(height0).toEqual(height1);
  171. expect(height0).toEqual(height2);
  172. expect(height1).toEqual(height2);
  173. updateSettings({
  174. autoRowSize: true
  175. });
  176. height0 = parseInt(getCell(0, 0).style.height, 10);
  177. height1 = parseInt(getCell(1, 0).style.height, 10);
  178. height2 = parseInt(getCell(2, 0).style.height, 10);
  179. expect(height0).toBeLessThan(height1);
  180. expect(height1).toBeLessThan(height2);
  181. });
  182. it('should consider CSS style of each instance separately', function () {
  183. var $style = $('<style>.big .htCore td {font-size: 40px;line-height: 1.1}</style>').appendTo('head');
  184. var $container1 = $('<div id="hot1"></div>').appendTo('body').handsontable({
  185. data: arrayOfObjects(),
  186. autoRowSize: true
  187. });
  188. var $container2 = $('<div id="hot2"></div>').appendTo('body').handsontable({
  189. data: arrayOfObjects(),
  190. autoRowSize: true
  191. });
  192. var hot1 = $container1.handsontable('getInstance');
  193. var hot2 = $container2.handsontable('getInstance');
  194. expect(parseInt(hot1.getCell(0, 0).style.height, 10)).toEqual(parseInt(hot2.getCell(0, 0).style.height, 10));
  195. $container1.addClass('big');
  196. hot1.render();
  197. hot2.render();
  198. expect(parseInt(hot1.getCell(2, 0).style.height, 10)).toBeGreaterThan(parseInt(hot2.getCell(2, 0).style.height, 10));
  199. $container1.removeClass('big');
  200. hot1.render();
  201. $container2.addClass('big');
  202. hot2.render();
  203. expect(parseInt(hot1.getCell(2, 0).style.height, 10)).toBeLessThan(parseInt(hot2.getCell(2, 0).style.height, 10));
  204. $style.remove();
  205. $container1.handsontable('destroy');
  206. $container1.remove();
  207. $container2.handsontable('destroy');
  208. $container2.remove();
  209. });
  210. it('should consider CSS class of the <table> element (e.g. when used with Bootstrap)', function () {
  211. var $style = $('<style>.htCore.big-table td {font-size: 32px;line-height: 1.1}</style>').appendTo('head');
  212. var hot = handsontable({
  213. data: arrayOfObjects(),
  214. autoRowSize: true
  215. });
  216. var height = parseInt(hot.getCell(2, 0).style.height, 10);
  217. this.$container.find('table').addClass('big-table');
  218. hot.getPlugin('autoRowSize').clearCache();
  219. render();
  220. expect(parseInt(hot.getCell(2, 0).style.height, 10)).toBeGreaterThan(height);
  221. $style.remove();
  222. });
  223. it('should not trigger autoColumnSize when column width is defined (through colWidths)', function () {
  224. var hot = handsontable({
  225. data: arrayOfObjects(),
  226. autoRowSize: true,
  227. rowHeights: [70, 70, 70],
  228. width: 500,
  229. height: 100,
  230. rowHeaders: true
  231. });
  232. setDataAtCell(0, 0, 'LongLongLongLong');
  233. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(69); // -1px of cell border
  234. });
  235. // Currently columns.height is not supported
  236. xit('should not trigger autoRowSize when column height is defined (through columns.height)', function () {
  237. var hot = handsontable({
  238. data: arrayOfObjects(),
  239. autoRowSize: true,
  240. rowHeights: 77,
  241. columns: [{ height: 70 }, { height: 70 }, { height: 70 }],
  242. width: 500,
  243. height: 100,
  244. rowHeaders: true
  245. });
  246. setDataAtCell(0, 0, 'LongLongLongLong');
  247. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(69); // -1px of cell border
  248. });
  249. it('should consider renderer that uses conditional formatting for specific row & column index', function () {
  250. var data = arrayOfObjects();
  251. data.push({ id: '2', name: 'Rocket Man', lastName: 'In a tin can' });
  252. var hot = handsontable({
  253. data: data,
  254. columns: [{ data: 'id' }, { data: 'name' }],
  255. autoRowSize: true,
  256. renderer: function renderer(instance, td, row, col, prop, value, cellProperties) {
  257. // taken from demo/renderers.html
  258. Handsontable.renderers.TextRenderer.apply(this, arguments);
  259. if (row === 1 && col === 0) {
  260. td.style.padding = '100px';
  261. }
  262. }
  263. });
  264. expect(parseInt(hot.getCell(1, 0).style.height || 0, 10)).toBe(242);
  265. });
  266. it('should destroy temporary element', function () {
  267. handsontable({
  268. autoRowSize: true
  269. });
  270. expect(document.querySelector('.htAutoSize')).toBe(null);
  271. });
  272. it('should recalculate heights after column resize', function () {
  273. var hot = handsontable({
  274. data: arrayOfObjects2(),
  275. colWidths: 250,
  276. manualColumnResize: true,
  277. autoRowSize: true,
  278. rowHeaders: true,
  279. colHeaders: true
  280. });
  281. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(22); // -1px of cell border
  282. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(22); // -1px of cell border
  283. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBeInArray([22, 42]); // -1px of cell border
  284. resizeColumn.call(this, 1, 100);
  285. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(22);
  286. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(42);
  287. expect([63, 84]).toEqual(jasmine.arrayContaining([parseInt(hot.getCell(2, -1).style.height, 10)]));
  288. resizeColumn.call(this, 1, 50);
  289. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(22);
  290. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(42);
  291. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBe(126);
  292. resizeColumn.call(this, 1, 200);
  293. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(22);
  294. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(22);
  295. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBe(42);
  296. });
  297. it('should recalculate heights after column moved', function () {
  298. var hot = handsontable({
  299. data: arrayOfObjects2(),
  300. colWidths: [250, 50],
  301. manualColumnMove: true,
  302. autoRowSize: true,
  303. rowHeaders: true,
  304. colHeaders: true
  305. });
  306. var plugin = hot.getPlugin('manualColumnMove');
  307. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(42); // -1px of cell border
  308. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(105); // -1px of cell border
  309. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBeInArray([22, 42]); // -1px of cell border
  310. plugin.moveColumn(0, 2);
  311. hot.render();
  312. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(22);
  313. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(42);
  314. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBe(126);
  315. });
  316. it('should recalculate heights with manualRowResize when changing text to multiline', function () {
  317. var hot = handsontable({
  318. data: arrayOfObjects2(),
  319. colWidths: 250,
  320. manualRowResize: [23, 50],
  321. autoRowSize: true,
  322. rowHeaders: true,
  323. colHeaders: true
  324. });
  325. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(22); // -1px of cell border
  326. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(49); // -1px of cell border
  327. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBeInArray([22, 42]); // -1px of cell border
  328. hot.setDataAtCell(1, 0, 'A\nB\nC\nD\nE');
  329. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(22);
  330. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(105);
  331. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBeInArray([22, 42]);
  332. });
  333. it('should recalculate heights after moved row', function () {
  334. var hot = handsontable({
  335. data: arrayOfObjects2(),
  336. colWidths: 250,
  337. manualRowResize: [23, 50],
  338. manualRowMove: true,
  339. autoRowSize: true,
  340. rowHeaders: true,
  341. colHeaders: true
  342. });
  343. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(22); // -1px of cell border
  344. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(49); // -1px of cell border
  345. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBeInArray([22, 42]); // -1px of cell border
  346. var plugin = hot.getPlugin('manualRowMove');
  347. plugin.moveRow(1, 0);
  348. hot.render();
  349. expect(parseInt(hot.getCell(0, -1).style.height, 10)).toBe(49);
  350. expect(parseInt(hot.getCell(1, -1).style.height, 10)).toBe(22);
  351. expect(parseInt(hot.getCell(2, -1).style.height, 10)).toBeInArray([22, 42]); // -1px of cell border
  352. });
  353. it('should resize the column headers properly, according the their content sizes', function () {
  354. var hot = handsontable({
  355. data: Handsontable.helper.createSpreadsheetData(30, 30),
  356. colHeaders: function colHeaders(index) {
  357. if (index === 22) {
  358. return 'a<br>much<br>longer<br>label';
  359. }
  360. return 'test';
  361. },
  362. autoRowSize: true,
  363. rowHeaders: true,
  364. width: 300,
  365. height: 300
  366. });
  367. expect(rowHeight(spec().$container, -1)).toBe(89);
  368. });
  369. });