55e1a5376465d59055e821b964d93d24be4d471efbdebb4b71f5c55d4c6de81520413c7635f1fd354027fe340dfabd1ec07670f85aae1c7a6302eabb8d30a9 4.9 KB

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