PivotGrid(T1270941): fix columns header area d-n-d indicator visibility (DevExpress#29047)

Author: wdevfx

e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/dragAndDropFieldItems.ts

@@ -9,10 +9,12 @@ import { DRAG_MOUSE_OPTIONS } from '../const';
 fixture.disablePageReloads`pivotGrid_fieldPanel_drag-n-drop`
   .page(url(__dirname, '../../container.html'));
 
+const PIVOT_GRID_SELECTOR = '#container';
+
 test('Field panel items markup in the middle of the drag-n-drop', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-  const pivotGrid = new PivotGrid('#container');
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
   const columnFirstAction = pivotGrid.getColumnHeaderArea().getAction();
   const rowFirstAction = pivotGrid.getRowHeaderArea().getAction();
   const dataFirstAction = pivotGrid.getDataHeaderArea().getAction();
@@ -72,3 +74,53 @@ test('Field panel items markup in the middle of the drag-n-drop', async (t) => {
     },
   });
 });
+
+test('Should show d-n-d indicator during drag to first place in columns fields', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+  const rowFirstField = pivotGrid.getRowHeaderArea().getField();
+  const columnHeaderAreaElement = pivotGrid.getColumnHeaderArea().element;
+
+  await MouseUpEvents.disable(MouseAction.dragToOffset);
+
+  const rowFirsFieldX = await rowFirstField.offsetLeft;
+  const rowFirsFieldY = await rowFirstField.offsetTop;
+  const columnHeaderX = await columnHeaderAreaElement.offsetLeft;
+  const columnHeaderY = await columnHeaderAreaElement.offsetTop;
+  const deltaOffsetX = 20;
+  const dragOffsetX = columnHeaderX - rowFirsFieldX - deltaOffsetX;
+  const dragOffsetY = rowFirsFieldY - columnHeaderY;
+
+  await t.drag(rowFirstField, dragOffsetX, dragOffsetY, DRAG_MOUSE_OPTIONS);
+
+  await testScreenshot(t, takeScreenshot, 'field-panel_column-field_dnd-first.png', { element: pivotGrid.element });
+
+  await MouseUpEvents.enable(MouseAction.dragToOffset);
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxPivotGrid', {
+    showBorders: true,
+    fieldPanel: {
+      visible: true,
+    },
+    dataSource: {
+      fields: [{
+        dataField: 'row1',
+        area: 'row',
+      }, {
+        dataField: 'row2',
+        area: 'row',
+      }, {
+        dataField: 'column1',
+        area: 'column',
+      }, {
+        dataField: 'column2',
+        area: 'column',
+      }],
+      store: [],
+    },
+  });
+});

e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/etalons/field-panel_column-action_dnd (material-blue-light).png

@@ -127,10 +127,6 @@ $pivotgrid-expand-icon-text-offset: 0;
 .dx-pivotgrid {
   .dx-column-header,
   .dx-filter-header {
-    .dx-pivotgrid-fields-area {
-      overflow: hidden;
-    }
-
     .dx-pivotgrid-toolbar {
       margin-right: 10px;
       float: right;
@@ -146,6 +142,22 @@ $pivotgrid-expand-icon-text-offset: 0;
     }
   }
 
+  .dx-column-header {
+    .dx-pivotgrid-fields-area {
+      .dx-area-field-container {
+        display: block;
+        max-width: 100%;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .dx-filter-header {
+    .dx-pivotgrid-fields-area {
+      overflow: hidden;
+    }
+  }
+
   .dx-data-header,
   .dx-column-header,
   .dx-area-description-cell.dx-pivotgrid-background {

e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (fluent-blue-light).png

@@ -13,7 +13,7 @@ const CLASSES = {
 };
 
 export default class ColumnHeaderArea {
-  private readonly element: Selector;
+  public readonly element: Selector;
 
   constructor(selector: Selector) {
     this.element = selector.find(`.${CLASSES.columnHeader}`);

e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (generic-light).png

@@ -1,6 +1,7 @@
 const CLASSES = {
   rowHeader: 'dx-area-description-cell',
   action: 'dx-pivotgrid-action',
+  field: 'dx-area-field',
 };
 
 export default class RowHeaderArea {
@@ -13,4 +14,8 @@ export default class RowHeaderArea {
   getAction(idx = 0): Selector {
     return this.element.find(`.${CLASSES.action}`).nth(idx);
   }
+
+  getField(idx = 0): Selector {
+    return this.element.find(`.${CLASSES.field}`).nth(idx);
+  }
 }