6042bd05ebea0f0cba71187305bd0750ac1b3c5f7cb387a4ab41a5e668a478e84d398089238d4eb1815c96343accee8a59e6502224fe503acc513556982b4c 14 KB

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