99778c5d71cab1b7f2eec44abdc9f26e00ffdc4a0bbc0e014fe4589d3d5fd93bbdb6f3f6aba9d703bd604c8f7ecf7d2f2d3546fe17372f1e7c221eb4f5733b 14 KB

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