123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365 |
- describe('ColHeader', () => {
- var id = 'testContainer';
- beforeEach(function() {
- this.$container = $(`<div id="${id}"></div>`).appendTo('body');
- });
- afterEach(function() {
- if (this.$container) {
- destroy();
- this.$container.remove();
- }
- });
- it('should not show col headers by default', function() {
- var that = this;
- handsontable();
- expect(that.$container.find('thead th').length).toEqual(0);
- });
- it('should show col headers if true', function() {
- var that = this;
- handsontable({
- colHeaders: true
- });
- expect(that.$container.find('thead th').length).toBeGreaterThan(0);
- });
- it('should show default columns headers labelled A-(Z * n)', function() {
- var that = this;
- var startCols = 5;
- handsontable({
- startCols,
- colHeaders: true
- });
- var ths = getHtCore().find('thead th');
- expect(ths.length).toEqual(startCols);
- expect($.trim(ths.eq(0).text())).toEqual('A');
- expect($.trim(ths.eq(1).text())).toEqual('B');
- expect($.trim(ths.eq(2).text())).toEqual('C');
- expect($.trim(ths.eq(3).text())).toEqual('D');
- expect($.trim(ths.eq(4).text())).toEqual('E');
- });
- it('should show default columns headers labelled A-(Z * n) when columns as an array is present', function() {
- var that = this;
- var startCols = 5;
- handsontable({
- startCols,
- colHeaders: true,
- columns: [{}, {}, {}, {}, {}]
- });
- var ths = getHtCore().find('thead th');
- expect(ths.length).toEqual(startCols);
- expect($.trim(ths.eq(0).text())).toEqual('A');
- expect($.trim(ths.eq(1).text())).toEqual('B');
- expect($.trim(ths.eq(2).text())).toEqual('C');
- expect($.trim(ths.eq(3).text())).toEqual('D');
- expect($.trim(ths.eq(4).text())).toEqual('E');
- });
- it('should show default columns headers labelled A-(Z * n) when columns as a function is present', function() {
- var that = this;
- var startCols = 5;
- handsontable({
- startCols,
- colHeaders: true,
- columns(column) {
- return {};
- }
- });
- var ths = getHtCore().find('thead th');
- expect(ths.length).toEqual(startCols);
- expect($.trim(ths.eq(0).text())).toEqual('A');
- expect($.trim(ths.eq(1).text())).toEqual('B');
- expect($.trim(ths.eq(2).text())).toEqual('C');
- expect($.trim(ths.eq(3).text())).toEqual('D');
- expect($.trim(ths.eq(4).text())).toEqual('E');
- });
- it('should show col headers with custom label', function() {
- var that = this;
- var startCols = 5;
- handsontable({
- startCols,
- colHeaders: ['First', 'Second', 'Third']
- });
- var ths = getHtCore().find('thead th');
- expect(ths.length).toEqual(startCols);
- expect($.trim(ths.eq(0).text())).toEqual('First');
- expect($.trim(ths.eq(1).text())).toEqual('Second');
- expect($.trim(ths.eq(2).text())).toEqual('Third');
- expect($.trim(ths.eq(3).text())).toEqual('D');
- expect($.trim(ths.eq(4).text())).toEqual('E');
- });
- it('should not show col headers if false', function() {
- var that = this;
- handsontable({
- colHeaders: false
- });
- expect(that.$container.find('th.htColHeader').length).toEqual(0);
- });
- it('should hide columns headers after updateSettings', () => {
- var hot = handsontable({
- startCols: 5,
- colHeaders: true
- });
- expect(getHtCore().find('thead th').length).toEqual(5);
- expect(getTopClone().find('thead th').length).toEqual(5);
- hot.updateSettings({
- colHeaders: false
- });
- expect(getHtCore().find('thead th').length).toEqual(0);
- expect(getTopClone().width()).toEqual(0);
- });
- it('should show/hide columns headers after updateSettings', () => {
- var hot = handsontable({
- startCols: 5,
- colHeaders: true
- });
- expect(getHtCore().find('thead th').length).toEqual(5);
- expect(getTopClone().find('thead th').length).toEqual(5);
- hot.updateSettings({
- colHeaders: false
- });
- expect(getHtCore().find('thead th').length).toEqual(0);
- expect(getTopClone().width()).toEqual(0);
- hot.updateSettings({
- colHeaders: true
- });
- expect(getHtCore().find('thead th').length).toEqual(5);
- expect(getTopClone().width()).toBeGreaterThan(0);
- hot.updateSettings({
- colHeaders: false
- });
- expect(getHtCore().find('thead th').length).toEqual(0);
- expect(getTopClone().width()).toEqual(0);
- });
- it('should show columns headers after updateSettings', () => {
- var hot = handsontable({
- startCols: 5,
- colHeaders: false
- });
- expect(getHtCore().find('thead th').length).toEqual(0);
- expect(getTopClone().find('thead th').length).toEqual(0);
- hot.updateSettings({
- colHeaders: true
- });
- expect(getHtCore().find('thead th').length).toEqual(5);
- expect(getTopClone().find('thead th').length).toEqual(5);
- });
- it('should show new columns headers after updateSettings', () => {
- var hot = handsontable({
- startCols: 3,
- colHeaders: ['A', 'B', 'C']
- });
- var htCore = getHtCore();
- expect(htCore.find('thead th:eq(0)').text()).toEqual('A');
- expect(htCore.find('thead th:eq(1)').text()).toEqual('B');
- expect(htCore.find('thead th:eq(2)').text()).toEqual('C');
- hot.updateSettings({
- colHeaders: ['X', 'Y', 'Z']
- });
- expect(htCore.find('thead th:eq(0)').text()).toEqual('X');
- expect(htCore.find('thead th:eq(1)').text()).toEqual('Y');
- expect(htCore.find('thead th:eq(2)').text()).toEqual('Z');
- });
- it('should be possible to define colHeaders with a function', () => {
- var hot = handsontable({
- startCols: 2,
- colHeaders(col) {
- switch (col) {
- case 0:
- return 'One';
- case 1:
- return 'Two';
- default:
- break;
- }
- }
- });
- var htCore = getHtCore();
- expect(htCore.find('thead th:eq(0)').text()).toEqual('One');
- expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
- });
- it('should be possible to set HTML in colHeaders', () => {
- var hot = handsontable({
- startCols: 2,
- colHeaders: ['One <input type="checkbox">', 'Two <input type="checkbox">']
- });
- var htCore = getHtCore();
- expect(htCore.find('thead th:eq(0) input[type=checkbox]').length).toEqual(1);
- expect(htCore.find('thead th:eq(1) input[type=checkbox]').length).toEqual(1);
- });
- it('should be possible to set colHeaders when columns array is present', () => {
- var hot = handsontable({
- startCols: 2,
- colHeaders: ['One', 'Two'],
- columns: [
- {type: 'text'},
- {type: 'text'}
- ]
- });
- var htCore = getHtCore();
- expect(htCore.find('thead th:eq(0)').text()).toEqual('One');
- expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
- });
- it('should be possible to set colHeaders when columns function is present', () => {
- var hot = handsontable({
- startCols: 2,
- colHeaders: ['One', 'Two'],
- columns(column) {
- var colMeta = {type: 'text'};
- if ([0, 1].indexOf(column) < 0) {
- colMeta = null;
- }
- return colMeta;
- }
- });
- var htCore = getHtCore();
- expect(htCore.find('thead th:eq(0)').text()).toEqual('One');
- expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
- });
- it('should be possible to set colHeaders using columns title property', () => {
- var hot = handsontable({
- startCols: 2,
- colHeaders: ['One', 'Two'],
- columns: [
- {type: 'text', title: 'Special title'},
- {type: 'text'}
- ]
- });
- var htCore = getHtCore();
- expect(htCore.find('thead th:eq(0)').text()).toEqual('Special title');
- expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
- });
- it('should be possible to set colHeaders using columns title property when columns is a function', () => {
- var hot = handsontable({
- startCols: 2,
- colHeaders: ['One', 'Two'],
- columns(column) {
- var colMeta = {type: 'text'};
- if (column === 0) {
- colMeta.title = 'Special title';
- }
- if ([0, 1].indexOf(column) < 0) {
- colMeta = null;
- }
- return colMeta;
- }
- });
- var htCore = getHtCore();
- expect(htCore.find('thead th:eq(0)').text()).toEqual('Special title');
- expect(htCore.find('thead th:eq(1)').text()).toEqual('Two');
- });
- it('should resize all the column headers in the overlays, according to the other overlays\' height', () => {
- var hot = handsontable({
- startCols: 5,
- colHeaders: ['a', 'a', 'a', 'a<BR>a', 'a'],
- fixedColumnsLeft: 2
- });
- var topHeaderExample = $('.ht_clone_top').find('thead tr:first-child th:nth-child(1)'),
- masterHeaderExample = $('.ht_master').find('thead tr:first-child th:nth-child(3)');
- expect(topHeaderExample.height()).toEqual(masterHeaderExample.height());
- });
- it('should allow defining custom column header height using the columnHeaderHeight config option', function() {
- var hot = handsontable({
- startCols: 3,
- colHeaders: true,
- columnHeaderHeight: 40
- });
- hot.render();
- expect(this.$container.find('th').eq(0).height()).toEqual(40);
- });
- it('should allow defining custom column header heights using the columnHeaderHeight config option, when multiple column header levels are defined', function() {
- var hot = handsontable({
- startCols: 3,
- colHeaders: true,
- columnHeaderHeight: [45, 65],
- afterGetColumnHeaderRenderers(array) {
- array.push((index, TH) => {
- TH.innerHTML = '';
- var div = document.createElement('div');
- var span = document.createElement('span');
- div.className = 'relative';
- span.className = 'colHeader';
- span.innerText = index;
- div.appendChild(span);
- TH.appendChild(div);
- });
- return array;
- }
- });
- hot.render();
- expect(this.$container.find('.handsontable.ht_clone_top tr:nth-child(1) th:nth-child(1)').height()).toEqual(45);
- expect(this.$container.find('.handsontable.ht_clone_top tr:nth-child(2) th:nth-child(1)').height()).toEqual(65);
- });
- });
|