RowHeader.spec.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. describe('RowHeader', () => {
  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 row headers by default', function() {
  13. var that = this;
  14. handsontable();
  15. expect(that.$container.find('tbody th').length).toEqual(0);
  16. });
  17. it('should show row headers if true', function() {
  18. var that = this;
  19. handsontable({
  20. rowHeaders: true
  21. });
  22. expect(that.$container.find('tbody th').length).toBeGreaterThan(0);
  23. });
  24. it('should show row headers numbered 1-10 by default', function() {
  25. var that = this;
  26. var startRows = 5;
  27. handsontable({
  28. startRows,
  29. rowHeaders: true
  30. });
  31. var ths = getLeftClone().find('tbody th');
  32. expect(ths.length).toEqual(startRows);
  33. expect($.trim(ths.eq(0).text())).toEqual('1');
  34. expect($.trim(ths.eq(1).text())).toEqual('2');
  35. expect($.trim(ths.eq(2).text())).toEqual('3');
  36. expect($.trim(ths.eq(3).text())).toEqual('4');
  37. expect($.trim(ths.eq(4).text())).toEqual('5');
  38. });
  39. it('should show row headers with custom label', function() {
  40. var that = this;
  41. var startRows = 5;
  42. handsontable({
  43. startRows,
  44. rowHeaders: ['First', 'Second', 'Third']
  45. });
  46. var ths = getLeftClone().find('tbody th');
  47. expect(ths.length).toEqual(startRows);
  48. expect($.trim(ths.eq(0).text())).toEqual('First');
  49. expect($.trim(ths.eq(1).text())).toEqual('Second');
  50. expect($.trim(ths.eq(2).text())).toEqual('Third');
  51. expect($.trim(ths.eq(3).text())).toEqual('4');
  52. expect($.trim(ths.eq(4).text())).toEqual('5');
  53. });
  54. it('should not show row headers if false', function() {
  55. var that = this;
  56. handsontable({
  57. rowHeaders: false
  58. });
  59. expect(getLeftClone().find('tbody th').length).toEqual(0);
  60. });
  61. it('should hide rows headers after updateSetting', () => {
  62. var hot = handsontable({
  63. startRows: 5,
  64. rowHeaders: true
  65. });
  66. expect(getHtCore().find('tbody th').length).toEqual(5);
  67. expect(getLeftClone().find('tbody th').length).toEqual(5);
  68. hot.updateSettings({
  69. rowHeaders: false
  70. });
  71. expect(getHtCore().find('tbody th').length).toEqual(0);
  72. });
  73. it('should show rows headers after updateSettings', () => {
  74. var hot = handsontable({
  75. startRows: 5,
  76. rowHeaders: false
  77. });
  78. expect(getHtCore().find('tbody th').length).toEqual(0);
  79. expect(getLeftClone().find('tbody th').length).toEqual(0);
  80. hot.updateSettings({
  81. rowHeaders: true
  82. });
  83. expect(getHtCore().find('tbody th').length).toEqual(5);
  84. expect(getLeftClone().find('tbody th').length).toEqual(5);
  85. });
  86. it('should show/hide rows headers after multiple updateSettings', () => {
  87. var hot = handsontable({
  88. startRows: 5,
  89. rowHeaders: false
  90. });
  91. expect(getHtCore().find('tbody th').length).toEqual(0);
  92. expect(getLeftClone().find('tbody th').length).toEqual(0);
  93. hot.updateSettings({
  94. rowHeaders: true
  95. });
  96. expect(getHtCore().find('tbody th').length).toEqual(5);
  97. expect(getLeftClone().width()).toBeGreaterThan(0);
  98. hot.updateSettings({
  99. rowHeaders: false
  100. });
  101. expect(getHtCore().find('tbody th').length).toEqual(0);
  102. expect(getLeftClone().width()).toEqual(0);
  103. hot.updateSettings({
  104. rowHeaders: true
  105. });
  106. expect(getHtCore().find('tbody th').length).toEqual(5);
  107. expect(getLeftClone().width()).toBeGreaterThan(0);
  108. });
  109. it('should show new rows headers after updateSettings', () => {
  110. var hot = handsontable({
  111. startCols: 3,
  112. rowHeaders: ['A', 'B', 'C']
  113. });
  114. var leftClone = getLeftClone();
  115. expect(leftClone.find('tbody tr:eq(0) th:eq(0)').text()).toEqual('A');
  116. expect(leftClone.find('tbody tr:eq(1) th:eq(0)').text()).toEqual('B');
  117. expect(leftClone.find('tbody tr:eq(2) th:eq(0)').text()).toEqual('C');
  118. hot.updateSettings({
  119. rowHeaders: ['X', 'Y', 'Z']
  120. });
  121. expect(leftClone.find('tbody tr:eq(0) th:eq(0)').text()).toEqual('X');
  122. expect(leftClone.find('tbody tr:eq(1) th:eq(0)').text()).toEqual('Y');
  123. expect(leftClone.find('tbody tr:eq(2) th:eq(0)').text()).toEqual('Z');
  124. });
  125. it('should allow defining custom row header width using the rowHeaderWidth config option', function() {
  126. var hot = handsontable({
  127. startCols: 3,
  128. rowHeaders: true,
  129. rowHeaderWidth: 150
  130. });
  131. expect(this.$container.find('th').eq(0).outerWidth()).toEqual(150);
  132. expect(this.$container.find('col').first().css('width')).toEqual('150px');
  133. });
  134. it('should allow defining custom column header heights using the columnHeaderHeight config option, when multiple column header levels are defined', function() {
  135. var hot = handsontable({
  136. startCols: 3,
  137. rowHeaders: true,
  138. rowHeaderWidth: [66, 96],
  139. afterGetRowHeaderRenderers(array) {
  140. array.push((index, TH) => {
  141. TH.innerHTML = '';
  142. var div = document.createElement('div');
  143. var span = document.createElement('span');
  144. div.className = 'relative';
  145. span.className = 'rowHeader';
  146. span.innerText = index;
  147. div.appendChild(span);
  148. TH.appendChild(div);
  149. });
  150. return array;
  151. }
  152. });
  153. hot.render();
  154. expect(this.$container.find('.handsontable.ht_clone_left tr:nth-child(1) th:nth-child(1)').outerWidth()).toEqual(66);
  155. expect(this.$container.find('.handsontable.ht_clone_left tr:nth-child(1) th:nth-child(2)').outerWidth()).toEqual(96);
  156. expect(this.$container.find('col').first().css('width')).toEqual('66px');
  157. expect(this.$container.find('col').eq(1).css('width')).toEqual('96px');
  158. });
  159. });