manualColumnMoveUI.e2e.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. describe('manualColumnMove', function () {
  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', function () {
  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 = [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)')];
  47. $headers[0].simulate('mousedown');
  48. $headers[0].simulate('mouseup');
  49. $headers[0].simulate('mousedown');
  50. $headers[1].simulate('mouseover');
  51. $headers[2].simulate('mouseover');
  52. expect(this.$container.find('.ht__manualColumnMove--guideline:visible').length).toBe(1);
  53. expect(this.$container.find('.ht__manualColumnMove--backlight:visible').length).toBe(1);
  54. });
  55. it('should set properly width for the backlight element when stretchH is enabled', function () {
  56. var hot = handsontable({
  57. data: Handsontable.helper.createSpreadsheetData(30, 5),
  58. width: 600,
  59. colHeaders: true,
  60. stretchH: 'all',
  61. manualColumnMove: true
  62. });
  63. var $headerTH = this.$container.find('thead tr:eq(0) th:eq(1)');
  64. $headerTH.simulate('mousedown');
  65. $headerTH.simulate('mouseup');
  66. $headerTH.simulate('mousedown');
  67. expect(this.$container.find('.ht__manualColumnMove--backlight')[0].offsetWidth).toBe($headerTH[0].offsetWidth);
  68. });
  69. it('should set properly width for the backlight element when stretchH is enabled and column order was changed', function () {
  70. var hot = handsontable({
  71. data: [{ id: 1, flag: 'EUR', currencyCode: 'EUR', currency: 'Euro', level: 0.9033, units: 'EUR / USD', asOf: '08/19/2015', onedChng: 0.0026 }],
  72. width: 600,
  73. colHeaders: true,
  74. stretchH: 'all',
  75. manualColumnMove: [2, 4, 6, 3, 1, 0],
  76. 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%' }]
  77. });
  78. var $headerTH = this.$container.find('thead tr:eq(0) th:eq(6)');
  79. $headerTH.simulate('mousedown');
  80. $headerTH.simulate('mouseup');
  81. $headerTH.simulate('mousedown');
  82. $headerTH.simulate('mouseup');
  83. $headerTH.simulate('mousedown');
  84. expect(this.$container.find('.ht__manualColumnMove--backlight')[0].offsetWidth).toBe($headerTH[0].offsetWidth);
  85. });
  86. it('should not run moving ui if mousedown was fired on sorting element', function () {
  87. var hot = handsontable({
  88. data: arrayOfArrays.slice(),
  89. colHeaders: true,
  90. manualColumnMove: true,
  91. columnSorting: true
  92. });
  93. var $headerTH = this.$container.find('thead tr:eq(0) th:eq(6)');
  94. var $summaryElement = $headerTH.find('.columnSorting');
  95. $headerTH.simulate('mousedown');
  96. $headerTH.simulate('mouseup');
  97. $headerTH.simulate('mousedown');
  98. $headerTH.simulate('mouseup');
  99. var $backlight = this.$container.find('.ht__manualColumnMove--backlight')[0];
  100. $summaryElement.simulate('mousedown');
  101. var displayProp = $backlight.currentStyle ? $backlight.currentStyle.display : getComputedStyle($backlight, null).display;
  102. expect(displayProp).toEqual('none');
  103. });
  104. });
  105. });