ColHeader.spec.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. describe('ColHeader', () => {
  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. it('should not show col headers by default', function() {
  13. var that = this;
  14. handsontable();
  15. expect(that.$container.find('thead th').length).toEqual(0);
  16. });
  17. it('should show col headers if true', function() {
  18. var that = this;
  19. handsontable({
  20. colHeaders: true
  21. });
  22. expect(that.$container.find('thead th').length).toBeGreaterThan(0);
  23. });
  24. it('should show default columns headers labelled A-(Z * n)', function() {
  25. var that = this;
  26. var startCols = 5;
  27. handsontable({
  28. startCols,
  29. colHeaders: true
  30. });
  31. var ths = getHtCore().find('thead th');
  32. expect(ths.length).toEqual(startCols);
  33. expect($.trim(ths.eq(0).text())).toEqual('A');
  34. expect($.trim(ths.eq(1).text())).toEqual('B');
  35. expect($.trim(ths.eq(2).text())).toEqual('C');
  36. expect($.trim(ths.eq(3).text())).toEqual('D');
  37. expect($.trim(ths.eq(4).text())).toEqual('E');
  38. });
  39. it('should show default columns headers labelled A-(Z * n) when columns as an array is present', function() {
  40. var that = this;
  41. var startCols = 5;
  42. handsontable({
  43. startCols,
  44. colHeaders: true,
  45. columns: [{}, {}, {}, {}, {}]
  46. });
  47. var ths = getHtCore().find('thead th');
  48. expect(ths.length).toEqual(startCols);
  49. expect($.trim(ths.eq(0).text())).toEqual('A');
  50. expect($.trim(ths.eq(1).text())).toEqual('B');
  51. expect($.trim(ths.eq(2).text())).toEqual('C');
  52. expect($.trim(ths.eq(3).text())).toEqual('D');
  53. expect($.trim(ths.eq(4).text())).toEqual('E');
  54. });
  55. it('should show default columns headers labelled A-(Z * n) when columns as a function is present', function() {
  56. var that = this;
  57. var startCols = 5;
  58. handsontable({
  59. startCols,
  60. colHeaders: true,
  61. columns(column) {
  62. return {};
  63. }
  64. });
  65. var ths = getHtCore().find('thead th');
  66. expect(ths.length).toEqual(startCols);
  67. expect($.trim(ths.eq(0).text())).toEqual('A');
  68. expect($.trim(ths.eq(1).text())).toEqual('B');
  69. expect($.trim(ths.eq(2).text())).toEqual('C');
  70. expect($.trim(ths.eq(3).text())).toEqual('D');
  71. expect($.trim(ths.eq(4).text())).toEqual('E');
  72. });
  73. it('should show col headers with custom label', function() {
  74. var that = this;
  75. var startCols = 5;
  76. handsontable({
  77. startCols,
  78. colHeaders: ['First', 'Second', 'Third']
  79. });
  80. var ths = getHtCore().find('thead th');
  81. expect(ths.length).toEqual(startCols);
  82. expect($.trim(ths.eq(0).text())).toEqual('First');
  83. expect($.trim(ths.eq(1).text())).toEqual('Second');
  84. expect($.trim(ths.eq(2).text())).toEqual('Third');
  85. expect($.trim(ths.eq(3).text())).toEqual('D');
  86. expect($.trim(ths.eq(4).text())).toEqual('E');
  87. });
  88. it('should not show col headers if false', function() {
  89. var that = this;
  90. handsontable({
  91. colHeaders: false
  92. });
  93. expect(that.$container.find('th.htColHeader').length).toEqual(0);
  94. });
  95. it('should hide columns headers after updateSettings', () => {
  96. var hot = handsontable({
  97. startCols: 5,
  98. colHeaders: true
  99. });
  100. expect(getHtCore().find('thead th').length).toEqual(5);
  101. expect(getTopClone().find('thead th').length).toEqual(5);
  102. hot.updateSettings({
  103. colHeaders: false
  104. });
  105. expect(getHtCore().find('thead th').length).toEqual(0);
  106. expect(getTopClone().width()).toEqual(0);
  107. });
  108. it('should show/hide columns headers after updateSettings', () => {
  109. var hot = handsontable({
  110. startCols: 5,
  111. colHeaders: true
  112. });
  113. expect(getHtCore().find('thead th').length).toEqual(5);
  114. expect(getTopClone().find('thead th').length).toEqual(5);
  115. hot.updateSettings({
  116. colHeaders: false
  117. });
  118. expect(getHtCore().find('thead th').length).toEqual(0);
  119. expect(getTopClone().width()).toEqual(0);
  120. hot.updateSettings({
  121. colHeaders: true
  122. });
  123. expect(getHtCore().find('thead th').length).toEqual(5);
  124. expect(getTopClone().width()).toBeGreaterThan(0);
  125. hot.updateSettings({
  126. colHeaders: false
  127. });
  128. expect(getHtCore().find('thead th').length).toEqual(0);
  129. expect(getTopClone().width()).toEqual(0);
  130. });
  131. it('should show columns headers after updateSettings', () => {
  132. var hot = handsontable({
  133. startCols: 5,
  134. colHeaders: false
  135. });
  136. expect(getHtCore().find('thead th').length).toEqual(0);
  137. expect(getTopClone().find('thead th').length).toEqual(0);
  138. hot.updateSettings({
  139. colHeaders: true
  140. });
  141. expect(getHtCore().find('thead th').length).toEqual(5);
  142. expect(getTopClone().find('thead th').length).toEqual(5);
  143. });
  144. it('should show new columns headers after updateSettings', () => {
  145. var hot = handsontable({
  146. startCols: 3,
  147. colHeaders: ['A', 'B', 'C']
  148. });
  149. var htCore = getHtCore();
  150. expect(htCore.find('thead th:eq(0)').text()).toEqual('A');
  151. expect(htCore.find('thead th:eq(1)').text()).toEqual('B');
  152. expect(htCore.find('thead th:eq(2)').text()).toEqual('C');
  153. hot.updateSettings({
  154. colHeaders: ['X', 'Y', 'Z']
  155. });
  156. expect(htCore.find('thead th:eq(0)').text()).toEqual('X');
  157. expect(htCore.find('thead th:eq(1)').text()).toEqual('Y');
  158. expect(htCore.find('thead th:eq(2)').text()).toEqual('Z');
  159. });
  160. it('should be possible to define colHeaders with a function', () => {
  161. var hot = handsontable({
  162. startCols: 2,
  163. colHeaders(col) {
  164. switch (col) {
  165. case 0:
  166. return 'One';
  167. case 1:
  168. return 'Two';
  169. default:
  170. break;
  171. }
  172. }
  173. });
  174. var htCore = getHtCore();
  175. expect(htCore.find('thead th:eq(0)').text()).toEqual('One');
  176. expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
  177. });
  178. it('should be possible to set HTML in colHeaders', () => {
  179. var hot = handsontable({
  180. startCols: 2,
  181. colHeaders: ['One <input type="checkbox">', 'Two <input type="checkbox">']
  182. });
  183. var htCore = getHtCore();
  184. expect(htCore.find('thead th:eq(0) input[type=checkbox]').length).toEqual(1);
  185. expect(htCore.find('thead th:eq(1) input[type=checkbox]').length).toEqual(1);
  186. });
  187. it('should be possible to set colHeaders when columns array is present', () => {
  188. var hot = handsontable({
  189. startCols: 2,
  190. colHeaders: ['One', 'Two'],
  191. columns: [
  192. {type: 'text'},
  193. {type: 'text'}
  194. ]
  195. });
  196. var htCore = getHtCore();
  197. expect(htCore.find('thead th:eq(0)').text()).toEqual('One');
  198. expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
  199. });
  200. it('should be possible to set colHeaders when columns function is present', () => {
  201. var hot = handsontable({
  202. startCols: 2,
  203. colHeaders: ['One', 'Two'],
  204. columns(column) {
  205. var colMeta = {type: 'text'};
  206. if ([0, 1].indexOf(column) < 0) {
  207. colMeta = null;
  208. }
  209. return colMeta;
  210. }
  211. });
  212. var htCore = getHtCore();
  213. expect(htCore.find('thead th:eq(0)').text()).toEqual('One');
  214. expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
  215. });
  216. it('should be possible to set colHeaders using columns title property', () => {
  217. var hot = handsontable({
  218. startCols: 2,
  219. colHeaders: ['One', 'Two'],
  220. columns: [
  221. {type: 'text', title: 'Special title'},
  222. {type: 'text'}
  223. ]
  224. });
  225. var htCore = getHtCore();
  226. expect(htCore.find('thead th:eq(0)').text()).toEqual('Special title');
  227. expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
  228. });
  229. it('should be possible to set colHeaders using columns title property when columns is a function', () => {
  230. var hot = handsontable({
  231. startCols: 2,
  232. colHeaders: ['One', 'Two'],
  233. columns(column) {
  234. var colMeta = {type: 'text'};
  235. if (column === 0) {
  236. colMeta.title = 'Special title';
  237. }
  238. if ([0, 1].indexOf(column) < 0) {
  239. colMeta = null;
  240. }
  241. return colMeta;
  242. }
  243. });
  244. var htCore = getHtCore();
  245. expect(htCore.find('thead th:eq(0)').text()).toEqual('Special title');
  246. expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
  247. });
  248. it('should resize all the column headers in the overlays, according to the other overlays\' height', () => {
  249. var hot = handsontable({
  250. startCols: 5,
  251. colHeaders: ['a', 'a', 'a', 'a<BR>a', 'a'],
  252. fixedColumnsLeft: 2
  253. });
  254. var topHeaderExample = $('.ht_clone_top').find('thead tr:first-child th:nth-child(1)'),
  255. masterHeaderExample = $('.ht_master').find('thead tr:first-child th:nth-child(3)');
  256. expect(topHeaderExample.height()).toEqual(masterHeaderExample.height());
  257. });
  258. it('should allow defining custom column header height using the columnHeaderHeight config option', function() {
  259. var hot = handsontable({
  260. startCols: 3,
  261. colHeaders: true,
  262. columnHeaderHeight: 40
  263. });
  264. hot.render();
  265. expect(this.$container.find('th').eq(0).height()).toEqual(40);
  266. });
  267. it('should allow defining custom column header heights using the columnHeaderHeight config option, when multiple column header levels are defined', function() {
  268. var hot = handsontable({
  269. startCols: 3,
  270. colHeaders: true,
  271. columnHeaderHeight: [45, 65],
  272. afterGetColumnHeaderRenderers(array) {
  273. array.push((index, TH) => {
  274. TH.innerHTML = '';
  275. var div = document.createElement('div');
  276. var span = document.createElement('span');
  277. div.className = 'relative';
  278. span.className = 'colHeader';
  279. span.innerText = index;
  280. div.appendChild(span);
  281. TH.appendChild(div);
  282. });
  283. return array;
  284. }
  285. });
  286. hot.render();
  287. expect(this.$container.find('.handsontable.ht_clone_top tr:nth-child(1) th:nth-child(1)').height()).toEqual(45);
  288. expect(this.$container.find('.handsontable.ht_clone_top tr:nth-child(2) th:nth-child(1)').height()).toEqual(65);
  289. });
  290. });