1e4b19965f73b8f8d9ef1c8a912057a2791cb4dd7334e3e16eca6897e4a14c3cb4886e437aec861d281485a777322dc14a8770056e45ad5b367a85ef3eecde 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. describe('manualColumnMove', () => {
  2. var id = 'testContainer';
  3. var arrayOfArrays = Handsontable.helper.createSpreadsheetData(30, 30);
  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. describe('UI', () => {
  14. it('should append UI elements to wtHider after click on row header', function() {
  15. var hot = handsontable({
  16. data: arrayOfArrays.slice(),
  17. colHeaders: true,
  18. manualColumnMove: true
  19. });
  20. var $headerTH = this.$container.find('thead tr:eq(0) th:eq(0)');
  21. $headerTH.simulate('mousedown');
  22. $headerTH.simulate('mouseup');
  23. $headerTH.simulate('mousedown');
  24. expect(this.$container.find('.ht__manualColumnMove--guideline').length).toBe(1);
  25. expect(this.$container.find('.ht__manualColumnMove--backlight').length).toBe(1);
  26. });
  27. it('should part of UI elements be visible on dragging action', function() {
  28. var hot = handsontable({
  29. data: arrayOfArrays.slice(),
  30. colHeaders: true,
  31. manualColumnMove: true
  32. });
  33. var $headerTH = this.$container.find('thead tr:eq(0) th:eq(0)');
  34. $headerTH.simulate('mousedown');
  35. $headerTH.simulate('mouseup');
  36. $headerTH.simulate('mousedown');
  37. expect(this.$container.find('.ht__manualColumnMove--guideline:visible').length).toBe(0);
  38. expect(this.$container.find('.ht__manualColumnMove--backlight:visible').length).toBe(1);
  39. });
  40. it('should all of UI elements be visible on dragging action', function() {
  41. var hot = handsontable({
  42. data: arrayOfArrays.slice(),
  43. colHeaders: true,
  44. manualColumnMove: true
  45. });
  46. var $headers = [
  47. this.$container.find('thead tr:eq(0) th:eq(0)'),
  48. this.$container.find('thead tr:eq(0) th:eq(1)'),
  49. this.$container.find('thead tr:eq(0) th:eq(2)'),
  50. ];
  51. $headers[0].simulate('mousedown');
  52. $headers[0].simulate('mouseup');
  53. $headers[0].simulate('mousedown');
  54. $headers[1].simulate('mouseover');
  55. $headers[2].simulate('mouseover');
  56. expect(this.$container.find('.ht__manualColumnMove--guideline:visible').length).toBe(1);
  57. expect(this.$container.find('.ht__manualColumnMove--backlight:visible').length).toBe(1);
  58. });
  59. it('should set properly width for the backlight element when stretchH is enabled', function() {
  60. var hot = handsontable({
  61. data: Handsontable.helper.createSpreadsheetData(30, 5),
  62. width: 600,
  63. colHeaders: true,
  64. stretchH: 'all',
  65. manualColumnMove: true
  66. });
  67. var $headerTH = this.$container.find('thead tr:eq(0) th:eq(1)');
  68. $headerTH.simulate('mousedown');
  69. $headerTH.simulate('mouseup');
  70. $headerTH.simulate('mousedown');
  71. expect(this.$container.find('.ht__manualColumnMove--backlight')[0].offsetWidth).toBe($headerTH[0].offsetWidth);
  72. });
  73. it('should set properly width for the backlight element when stretchH is enabled and column order was changed', function() {
  74. var hot = handsontable({
  75. data: [
  76. {id: 1, flag: 'EUR', currencyCode: 'EUR', currency: 'Euro', level: 0.9033, units: 'EUR / USD', asOf: '08/19/2015', onedChng: 0.0026},
  77. ],
  78. width: 600,
  79. colHeaders: true,
  80. stretchH: 'all',
  81. manualColumnMove: [2, 4, 6, 3, 1, 0],
  82. columns: [
  83. { data: 'id', type: 'numeric', width: 40 },
  84. { data: 'currencyCode', type: 'text' },
  85. { data: 'currency', type: 'text' },
  86. { data: 'level', type: 'numeric', format: '0.0000' },
  87. { data: 'units', type: 'text' },
  88. { data: 'asOf', type: 'date', dateFormat: 'MM/DD/YYYY' },
  89. { data: 'onedChng', type: 'numeric', format: '0.00%' }
  90. ]
  91. });
  92. var $headerTH = this.$container.find('thead tr:eq(0) th:eq(6)');
  93. $headerTH.simulate('mousedown');
  94. $headerTH.simulate('mouseup');
  95. $headerTH.simulate('mousedown');
  96. $headerTH.simulate('mouseup');
  97. $headerTH.simulate('mousedown');
  98. expect(this.$container.find('.ht__manualColumnMove--backlight')[0].offsetWidth).toBe($headerTH[0].offsetWidth);
  99. });
  100. it('should not run moving ui if mousedown was fired on sorting element', function() {
  101. var hot = handsontable({
  102. data: arrayOfArrays.slice(),
  103. colHeaders: true,
  104. manualColumnMove: true,
  105. columnSorting: true
  106. });
  107. var $headerTH = this.$container.find('thead tr:eq(0) th:eq(6)');
  108. var $summaryElement = $headerTH.find('.columnSorting');
  109. $headerTH.simulate('mousedown');
  110. $headerTH.simulate('mouseup');
  111. $headerTH.simulate('mousedown');
  112. $headerTH.simulate('mouseup');
  113. var $backlight = this.$container.find('.ht__manualColumnMove--backlight')[0];
  114. $summaryElement.simulate('mousedown');
  115. var displayProp = $backlight.currentStyle ? $backlight.currentStyle.display : getComputedStyle($backlight, null).display;
  116. expect(displayProp).toEqual('none');
  117. });
  118. });
  119. });