1d32f0b6d5b0f8713e09c188a119ca70e0804719e4d2b017f82ef092a515330ae2be66b0f13b0b1af7c8cc2a1518f4c4b1389a5abc9ab9f21b7cb8c8efd0e0 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. describe('AutoColumnSize', () => {
  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. var arrayOfObjects = function() {
  13. return [
  14. {id: 'Short', name: 'Somewhat long', lastName: 'The very very very longest one', nestedData: [{id: 1000}]}
  15. ];
  16. };
  17. it('should apply auto size by default', function() {
  18. handsontable({
  19. data: arrayOfObjects()
  20. });
  21. var width0 = colWidth(this.$container, 0);
  22. var width1 = colWidth(this.$container, 1);
  23. var width2 = colWidth(this.$container, 2);
  24. expect(width0).toBeLessThan(width1);
  25. expect(width1).toBeLessThan(width2);
  26. });
  27. it('should update column width after update value in cell (array of objects)', function() {
  28. handsontable({
  29. data: arrayOfObjects(),
  30. autoColumnSize: true,
  31. columns: [
  32. {data: 'id'},
  33. {data: 'name'},
  34. {data: 'lastName'},
  35. ]
  36. });
  37. expect(colWidth(this.$container, 0)).toBeAroundValue(50, 3);
  38. expect([117, 120, 121, 129, 135]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 1)]));
  39. expect([216, 229, 247, 260]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 2)]));
  40. setDataAtRowProp(0, 'id', 'foo bar foo bar foo bar');
  41. setDataAtRowProp(0, 'name', 'foo');
  42. expect([165, 168, 169, 189, 191]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  43. expect(colWidth(this.$container, 1)).toBeAroundValue(50, 3);
  44. expect([216, 229, 247, 260]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 2)]));
  45. });
  46. it('should correctly detect column widths with colHeaders', function() {
  47. handsontable({
  48. data: arrayOfObjects(),
  49. autoColumnSize: true,
  50. colHeaders: ['Identifier Longer text'],
  51. columns: [
  52. {data: 'id'},
  53. {data: 'name'},
  54. ]
  55. });
  56. expect([149, 155, 174, 178]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  57. });
  58. it('should correctly detect column widths after update colHeaders when headers were passed as an array', function() {
  59. handsontable({
  60. data: arrayOfObjects(),
  61. autoColumnSize: true,
  62. colHeaders: true,
  63. columns: [
  64. {data: 'id'},
  65. {data: 'name'},
  66. ]
  67. });
  68. expect([50, 51, 53]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  69. updateSettings({colHeaders: ['Identifier Longer text', 'Identifier Longer and longer text']});
  70. expect([149, 155, 174, 178]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  71. expect([226, 235, 263, 270]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 1)]));
  72. });
  73. it('should correctly detect column widths after update colHeaders when headers were passed as a string', function() {
  74. handsontable({
  75. data: arrayOfObjects(),
  76. autoColumnSize: true,
  77. colHeaders: true,
  78. columns: [
  79. {data: 'id'},
  80. {data: 'name'},
  81. ]
  82. });
  83. expect([50, 51, 53]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  84. updateSettings({colHeaders: 'Identifier Longer text'});
  85. expect([149, 155, 174, 178]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  86. expect([149, 155, 174, 178]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 1)]));
  87. });
  88. it('should correctly detect column widths after update colHeaders when headers were passed as a function', function() {
  89. handsontable({
  90. data: arrayOfObjects(),
  91. autoColumnSize: true,
  92. colHeaders: true,
  93. columns: [
  94. {data: 'id'},
  95. {data: 'name'},
  96. ]
  97. });
  98. expect([50, 51, 53]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  99. updateSettings({
  100. colHeaders(index) {
  101. return index === 0 ? 'Identifier Longer text' : 'Identifier Longer and longer text';
  102. },
  103. });
  104. expect([149, 155, 174, 178]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  105. expect([226, 235, 263, 270]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 1)]));
  106. });
  107. it('should correctly detect column width with colHeaders and the useHeaders option set to false (not taking the header widths into calculation)', function() {
  108. handsontable({
  109. data: [
  110. {id: 'ab'}
  111. ],
  112. autoColumnSize: {
  113. useHeaders: false
  114. },
  115. colHeaders: ['Identifier'],
  116. columns: [
  117. {data: 'id'}
  118. ]
  119. });
  120. expect(colWidth(this.$container, 0)).toBe(50);
  121. });
  122. it('should correctly detect column width with columns.title', function() {
  123. handsontable({
  124. data: arrayOfObjects(),
  125. autoColumnSize: true,
  126. columns: [
  127. {data: 'id', title: 'Identifier'}
  128. ]
  129. });
  130. expect([68, 70, 71, 80, 82]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  131. });
  132. it('should correctly detect column widths after update columns.title', function() {
  133. handsontable({
  134. data: arrayOfObjects(),
  135. autoColumnSize: true,
  136. columns: [
  137. {data: 'id', title: 'Identifier'}
  138. ]
  139. });
  140. updateSettings({
  141. columns: [
  142. {data: 'id', title: 'Identifier with longer text'},
  143. ],
  144. });
  145. expect([174, 182, 183, 208, 213]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  146. });
  147. // https://github.com/handsontable/handsontable/issues/2684
  148. it('should correctly detect column width when table is hidden on init (display: none)', async () => {
  149. spec().$container.css('display', 'none');
  150. var hot = handsontable({
  151. data: arrayOfObjects(),
  152. autoColumnSize: true,
  153. colHeaders: ['Identifier', 'First Name']
  154. });
  155. await sleep(200);
  156. spec().$container.css('display', 'block');
  157. hot.render();
  158. expect([68, 70, 71, 80, 82]).toEqual(jasmine.arrayContaining([colWidth(spec().$container, 0)]));
  159. });
  160. it('should keep last columns width unchanged if all rows was removed', function() {
  161. var hot = handsontable({
  162. data: arrayOfObjects(),
  163. autoColumnSize: true,
  164. columns: [
  165. {data: 'id', title: 'Identifier'},
  166. {data: 'name', title: 'Name'},
  167. {data: 'lastName', title: 'Last Name'},
  168. ]
  169. });
  170. expect([68, 70, 71, 80, 82]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  171. expect([117, 120, 121, 129, 135]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 1)]));
  172. expect([216, 229, 247, 260]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 2)]));
  173. hot.alter('remove_row', 0);
  174. expect([68, 70, 71, 80, 82]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 0)]));
  175. expect([117, 120, 121, 129, 135]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 1)]));
  176. expect([216, 229, 247, 260]).toEqual(jasmine.arrayContaining([colWidth(this.$container, 2)]));
  177. });
  178. it('should be possible to disable plugin using updateSettings', function() {
  179. handsontable({
  180. data: arrayOfObjects()
  181. });
  182. var width0 = colWidth(this.$container, 0);
  183. var width1 = colWidth(this.$container, 1);
  184. var width2 = colWidth(this.$container, 2);
  185. expect(width0).toBeLessThan(width1);
  186. expect(width1).toBeLessThan(width2);
  187. updateSettings({
  188. autoColumnSize: false
  189. });
  190. width0 = colWidth(this.$container, 0);
  191. width1 = colWidth(this.$container, 1);
  192. width2 = colWidth(this.$container, 2);
  193. expect(width0).toEqual(width1);
  194. expect(width0).toEqual(width2);
  195. expect(width1).toEqual(width2);
  196. });
  197. it('should apply disabling/enabling plugin using updateSettings, only to a particular HOT instance', function() {
  198. this.$container2 = $(`<div id="${id}-2"></div>`).appendTo('body');
  199. handsontable({
  200. data: arrayOfObjects()
  201. });
  202. this.$container2.handsontable({
  203. data: arrayOfObjects()
  204. });
  205. var widths = {
  206. 1: [],
  207. 2: []
  208. };
  209. widths[1][0] = colWidth(this.$container, 0);
  210. widths[1][1] = colWidth(this.$container, 1);
  211. widths[1][2] = colWidth(this.$container, 2);
  212. widths[2][0] = colWidth(this.$container2, 0);
  213. widths[2][1] = colWidth(this.$container2, 1);
  214. widths[2][2] = colWidth(this.$container2, 2);
  215. expect(widths[1][0]).toBeLessThan(widths[1][1]);
  216. expect(widths[1][1]).toBeLessThan(widths[1][2]);
  217. expect(widths[2][0]).toBeLessThan(widths[2][1]);
  218. expect(widths[2][1]).toBeLessThan(widths[2][2]);
  219. updateSettings({
  220. autoColumnSize: false
  221. });
  222. widths[1][0] = colWidth(this.$container, 0);
  223. widths[1][1] = colWidth(this.$container, 1);
  224. widths[1][2] = colWidth(this.$container, 2);
  225. widths[2][0] = colWidth(this.$container2, 0);
  226. widths[2][1] = colWidth(this.$container2, 1);
  227. widths[2][2] = colWidth(this.$container2, 2);
  228. expect(widths[1][0]).toEqual(widths[1][1]);
  229. expect(widths[1][0]).toEqual(widths[1][2]);
  230. expect(widths[1][1]).toEqual(widths[1][2]);
  231. expect(widths[2][0]).toBeLessThan(widths[2][1]);
  232. expect(widths[2][1]).toBeLessThan(widths[2][2]);
  233. this.$container2.handsontable('destroy');
  234. this.$container2.remove();
  235. });
  236. it('should be possible to enable plugin using updateSettings', function() {
  237. handsontable({
  238. data: arrayOfObjects(),
  239. autoColumnSize: false
  240. });
  241. var width0 = colWidth(this.$container, 0);
  242. var width1 = colWidth(this.$container, 1);
  243. var width2 = colWidth(this.$container, 2);
  244. expect(width0).toEqual(width1);
  245. expect(width0).toEqual(width2);
  246. expect(width1).toEqual(width2);
  247. updateSettings({
  248. autoColumnSize: true
  249. });
  250. width0 = colWidth(this.$container, 0);
  251. width1 = colWidth(this.$container, 1);
  252. width2 = colWidth(this.$container, 2);
  253. expect(width0).toBeLessThan(width1);
  254. expect(width1).toBeLessThan(width2);
  255. });
  256. it('should consider CSS style of each instance separately', () => {
  257. var $style = $('<style>.big .htCore td {font-size: 40px; line-height: 1.1;}</style>').appendTo('head');
  258. var $container1 = $('<div id="hot1"></div>').appendTo('body').handsontable({
  259. data: arrayOfObjects()
  260. });
  261. var $container2 = $('<div id="hot2"></div>').appendTo('body').handsontable({
  262. data: arrayOfObjects()
  263. });
  264. var hot1 = $container1.handsontable('getInstance');
  265. var hot2 = $container2.handsontable('getInstance');
  266. expect(colWidth($container1, 0)).toEqual(colWidth($container2, 0));
  267. $container1.addClass('big');
  268. hot1.render();
  269. hot2.render();
  270. expect(colWidth($container1, 0)).toBeGreaterThan(colWidth($container2, 0));
  271. $container1.removeClass('big').handsontable('render');
  272. $container2.addClass('big').handsontable('render');
  273. expect(colWidth($container1, 0)).toBeLessThan(colWidth($container2, 0));
  274. $style.remove();
  275. $container1.handsontable('destroy');
  276. $container1.remove();
  277. $container2.handsontable('destroy');
  278. $container2.remove();
  279. });
  280. it('should consider CSS class of the <table> element (e.g. when used with Bootstrap)', function() {
  281. var $style = $('<style>.htCore.big-table td {font-size: 32px}</style>').appendTo('head');
  282. handsontable({
  283. data: arrayOfObjects(),
  284. autoColumnSize: true
  285. });
  286. var width = colWidth(this.$container, 0);
  287. this.$container.find('table').addClass('big-table');
  288. render();
  289. expect(colWidth(this.$container, 0)).toBeGreaterThan(width);
  290. $style.remove();
  291. });
  292. it('should destroy temporary element', () => {
  293. handsontable({
  294. autoColumnSize: true
  295. });
  296. expect(document.querySelector('.htAutoSize')).toBe(null);
  297. });
  298. it('should not trigger autoColumnSize when column width is defined (through colWidths)', function() {
  299. handsontable({
  300. data: arrayOfObjects(),
  301. autoColumnSize: true,
  302. colWidths: [70, 70, 70],
  303. width: 500,
  304. height: 100,
  305. rowHeaders: true
  306. });
  307. setDataAtCell(0, 0, 'LongLongLongLong');
  308. expect(colWidth(this.$container, 0)).toBe(70);
  309. });
  310. it('should not trigger autoColumnSize when column width is defined (through columns.width)', function() {
  311. handsontable({
  312. data: arrayOfObjects(),
  313. autoColumnSize: true,
  314. colWidth: 77,
  315. columns: [
  316. {width: 70},
  317. {width: 70},
  318. {width: 70}
  319. ],
  320. width: 500,
  321. height: 100,
  322. rowHeaders: true
  323. });
  324. setDataAtCell(0, 0, 'LongLongLongLong');
  325. expect(colWidth(this.$container, 0)).toBe(70);
  326. });
  327. it('should consider renderer that uses conditional formatting for specific row & column index', function() {
  328. var data = arrayOfObjects();
  329. data.push({id: '2', name: 'Rocket Man', lastName: 'In a tin can'});
  330. handsontable({
  331. data,
  332. columns: [
  333. {data: 'id'},
  334. {data: 'name'}
  335. ],
  336. autoColumnSize: true,
  337. renderer(instance, td, row, col, prop, value, cellProperties) {
  338. // taken from demo/renderers.html
  339. Handsontable.renderers.TextRenderer.apply(this, arguments);
  340. if (row === 1 && col === 0) {
  341. td.style.padding = '100px';
  342. }
  343. }
  344. });
  345. expect(colWidth(this.$container, 0)).toBeGreaterThan(colWidth(this.$container, 1));
  346. });
  347. it('should\'t serialize value if it is array (nested data sources)', () => {
  348. var spy = jasmine.createSpy('renderer');
  349. handsontable({
  350. data: arrayOfObjects(),
  351. autoColumnSize: true,
  352. columns: [
  353. {data: 'nestedData'}
  354. ],
  355. renderer: spy
  356. });
  357. expect(spy.calls.mostRecent().args[5]).toEqual([{id: 1000}]);
  358. });
  359. });