123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- describe('RowHeader', () => {
- 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 row headers by default', function() {
- var that = this;
- handsontable();
- expect(that.$container.find('tbody th').length).toEqual(0);
- });
- it('should show row headers if true', function() {
- var that = this;
- handsontable({
- rowHeaders: true
- });
- expect(that.$container.find('tbody th').length).toBeGreaterThan(0);
- });
- it('should show row headers numbered 1-10 by default', function() {
- var that = this;
- var startRows = 5;
- handsontable({
- startRows,
- rowHeaders: true
- });
- var ths = getLeftClone().find('tbody th');
- expect(ths.length).toEqual(startRows);
- expect($.trim(ths.eq(0).text())).toEqual('1');
- expect($.trim(ths.eq(1).text())).toEqual('2');
- expect($.trim(ths.eq(2).text())).toEqual('3');
- expect($.trim(ths.eq(3).text())).toEqual('4');
- expect($.trim(ths.eq(4).text())).toEqual('5');
- });
- it('should show row headers with custom label', function() {
- var that = this;
- var startRows = 5;
- handsontable({
- startRows,
- rowHeaders: ['First', 'Second', 'Third']
- });
- var ths = getLeftClone().find('tbody th');
- expect(ths.length).toEqual(startRows);
- 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('4');
- expect($.trim(ths.eq(4).text())).toEqual('5');
- });
- it('should not show row headers if false', function() {
- var that = this;
- handsontable({
- rowHeaders: false
- });
- expect(getLeftClone().find('tbody th').length).toEqual(0);
- });
- it('should hide rows headers after updateSetting', () => {
- var hot = handsontable({
- startRows: 5,
- rowHeaders: true
- });
- expect(getHtCore().find('tbody th').length).toEqual(5);
- expect(getLeftClone().find('tbody th').length).toEqual(5);
- hot.updateSettings({
- rowHeaders: false
- });
- expect(getHtCore().find('tbody th').length).toEqual(0);
- });
- it('should show rows headers after updateSettings', () => {
- var hot = handsontable({
- startRows: 5,
- rowHeaders: false
- });
- expect(getHtCore().find('tbody th').length).toEqual(0);
- expect(getLeftClone().find('tbody th').length).toEqual(0);
- hot.updateSettings({
- rowHeaders: true
- });
- expect(getHtCore().find('tbody th').length).toEqual(5);
- expect(getLeftClone().find('tbody th').length).toEqual(5);
- });
- it('should show/hide rows headers after multiple updateSettings', () => {
- var hot = handsontable({
- startRows: 5,
- rowHeaders: false
- });
- expect(getHtCore().find('tbody th').length).toEqual(0);
- expect(getLeftClone().find('tbody th').length).toEqual(0);
- hot.updateSettings({
- rowHeaders: true
- });
- expect(getHtCore().find('tbody th').length).toEqual(5);
- expect(getLeftClone().width()).toBeGreaterThan(0);
- hot.updateSettings({
- rowHeaders: false
- });
- expect(getHtCore().find('tbody th').length).toEqual(0);
- expect(getLeftClone().width()).toEqual(0);
- hot.updateSettings({
- rowHeaders: true
- });
- expect(getHtCore().find('tbody th').length).toEqual(5);
- expect(getLeftClone().width()).toBeGreaterThan(0);
- });
- it('should show new rows headers after updateSettings', () => {
- var hot = handsontable({
- startCols: 3,
- rowHeaders: ['A', 'B', 'C']
- });
- var leftClone = getLeftClone();
- expect(leftClone.find('tbody tr:eq(0) th:eq(0)').text()).toEqual('A');
- expect(leftClone.find('tbody tr:eq(1) th:eq(0)').text()).toEqual('B');
- expect(leftClone.find('tbody tr:eq(2) th:eq(0)').text()).toEqual('C');
- hot.updateSettings({
- rowHeaders: ['X', 'Y', 'Z']
- });
- expect(leftClone.find('tbody tr:eq(0) th:eq(0)').text()).toEqual('X');
- expect(leftClone.find('tbody tr:eq(1) th:eq(0)').text()).toEqual('Y');
- expect(leftClone.find('tbody tr:eq(2) th:eq(0)').text()).toEqual('Z');
- });
- it('should allow defining custom row header width using the rowHeaderWidth config option', function() {
- var hot = handsontable({
- startCols: 3,
- rowHeaders: true,
- rowHeaderWidth: 150
- });
- expect(this.$container.find('th').eq(0).outerWidth()).toEqual(150);
- expect(this.$container.find('col').first().css('width')).toEqual('150px');
- });
- 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,
- rowHeaders: true,
- rowHeaderWidth: [66, 96],
- afterGetRowHeaderRenderers(array) {
- array.push((index, TH) => {
- TH.innerHTML = '';
- var div = document.createElement('div');
- var span = document.createElement('span');
- div.className = 'relative';
- span.className = 'rowHeader';
- span.innerText = index;
- div.appendChild(span);
- TH.appendChild(div);
- });
- return array;
- }
- });
- hot.render();
- expect(this.$container.find('.handsontable.ht_clone_left tr:nth-child(1) th:nth-child(1)').outerWidth()).toEqual(66);
- expect(this.$container.find('.handsontable.ht_clone_left tr:nth-child(1) th:nth-child(2)').outerWidth()).toEqual(96);
- expect(this.$container.find('col').first().css('width')).toEqual('66px');
- expect(this.$container.find('col').eq(1).css('width')).toEqual('96px');
- });
- });
|