DataGrid: Fix column dragging from the column chooser when the Esc ke…

…y is pressed (T1219785)
DevExpress · Jun 13, 2024 · f17c736 · f17c736
1 parent ad4ecce
commit f17c736
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 1 deletion.
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/columnChooser.ts b/e2e/testcafe-devextreme/tests/dataGrid/columnChooser.ts
@@ -136,3 +136,51 @@ test('Column chooser should support string height and width', async (t) => {
     width: '330px',
   },
 }));
+
+// T1219785
+test('Check the behavior of pressing the Esc button when dragging a column from the column chooser', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t
+    .click(dataGrid.getColumnChooserButton());
+
+  await takeScreenshot('T1219785-column-chooser-1.png', dataGrid.element);
+
+  await dataGrid.getColumnChooser().focusList();
+  await dataGrid.moveColumnChooserColumn(0, -25, -25, true);
+  await dataGrid.moveColumnChooserColumn(0, -50, -50);
+
+  await takeScreenshot('T1219785-column-chooser-2.png', dataGrid.element);
+
+  // act
+  await t.pressKey('esc');
+  await dataGrid.moveColumnChooserColumn(0, -75, -75);
+
+  await takeScreenshot('T1219785-column-chooser-3.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(20, 3),
+  height: 400,
+  showBorders: true,
+  columns: [{
+    dataField: 'field_0',
+    dataType: 'string',
+  }, {
+    dataField: 'field_1',
+    dataType: 'string',
+  }, {
+    dataField: 'field_2',
+    dataType: 'string',
+    visible: false,
+  }],
+  columnChooser: {
+    enabled: true,
+    mode: 'dragAndDrop',
+  },
+}));
diff --git a/packages/testcafe-models/dataGrid/columnChooser.ts b/packages/testcafe-models/dataGrid/columnChooser.ts
@@ -1,4 +1,4 @@
-import { Selector } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 // eslint-disable-next-line max-classes-per-file
 import FocusableElement from '../internal/focusable';
 
@@ -7,6 +7,8 @@ const CLASS = {
   overlayWrapper: 'dx-overlay-wrapper',
   columnChooser: 'dx-datagrid-column-chooser',
   checkboxIcon: 'dx-checkbox-icon',
+  treeViewItem: 'dx-treeview-item',
+  treeView: 'dx-treeview',
 };
 
 export default class ColumnChooser extends FocusableElement {
@@ -24,7 +26,25 @@ export default class ColumnChooser extends FocusableElement {
     this.isOpened = this.body.find(`.${CLASS.overlayWrapper}.${CLASS.columnChooser}`).exists;
   }
 
+  async focusList() {
+    const treeView = this.content.find(`.${CLASS.treeView}`);
+
+    await ClientFunction((container) => {
+      const $treeView = $(container());
+
+      $treeView.trigger('focus');
+    }, {
+      dependencies: {
+        treeView,
+      }
+    })(treeView);
+  }
+
   getCheckboxIcon(nth = 0): Selector {
     return this.content.find(`.${CLASS.checkboxIcon}`).nth(nth);
   }
+
+  getColumn(index = 0): Selector {
+    return this.content.find(`.${CLASS.treeViewItem}`).nth(index);
+  }
 }
diff --git a/packages/testcafe-models/dataGrid/index.ts b/packages/testcafe-models/dataGrid/index.ts
@@ -649,6 +649,24 @@ export default class DataGrid extends Widget {
     )();
   }
 
+  moveColumnChooserColumn(columnIndex: number, x: number, y: number, isStart = false): Promise<void> {
+    const columnChooser = this.getColumnChooser();
+    const column = columnChooser.getColumn(columnIndex);
+
+    return ClientFunction(
+      (column) => {
+        const $column = $(column());
+
+        moveElement($column, x, y, isStart);
+      },
+      {
+        dependencies: {
+          column, x, y, isStart, moveElement,
+        },
+      },
+    )(column);
+  }
+
   hide(): Promise<void> {
     const { getInstance } = this;