Grids stabilize tests after toolbar KBN changes (DevExpress#34397)

Co-authored-by: Eldar Iusupzhanov <eldar.iusupzhanov@users.noreply.github.com>

Author: Tucchhaa

e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts

@@ -8,7 +8,7 @@ import { testScreenshot } from '../../../../helpers/themeUtils';
 fixture.disablePageReloads`Column reordering.Visual`
   .page(url(__dirname, '../../../container.html'));
 
-test.skip('column separator should work properly with expand columns', async (t) => {
+test('column separator should work properly with expand columns', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid('#container');
 

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts

@@ -181,17 +181,18 @@ test.meta({ browserSize: [900, 800] })('Sticky columns with grouping - overflow
 // visual: generic.light
 // visual: material.blue.light
 // visual: fluent.blue.light
-test.meta({ browserSize: [900, 800] })('The header row should be highlighted correctly when dragging column when there are fixed columns and allowColumnReordering=false (generic.light theme)', async (t) => {
+test.meta({ browserSize: [900, 800] })('The header row should be highlighted correctly when dragging column when there are fixed columns and allowColumnReordering=false', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid('#container');
 
   await t.expect(dataGrid.isReady()).ok();
-  await t.wait(300);
 
   await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 200, 35);
-  await t.wait(200);
+
+  await t.expect(dataGrid.getHeaders().getHeaderRow(0).isHighlighted()).ok();
 
   await testScreenshot(t, takeScreenshot, 'header_row_highlight_with_fixed_columns.png', { element: dataGrid.element });
+
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());

packages/testcafe-models/dataGrid/headers/row.ts

@@ -1,6 +1,11 @@
 import FocusableElement from '../../internal/focusable';
 import HeaderCell from './cell';
 import CommandCell from '../commandCell';
+import Widget from '../../internal/widget';
+
+const CLASS = {
+  dropHighlight: 'drop-highlight',
+};
 
 export default class HeaderRow extends FocusableElement {
   widgetName: string;
@@ -37,4 +42,8 @@ export default class HeaderRow extends FocusableElement {
   getCommandCell(index: number): CommandCell {
     return new CommandCell(this.element, index, this.widgetName);
   }
+
+  isHighlighted(): Promise<boolean> {
+    return this.element.hasClass(Widget.addClassPrefix(this.widgetName, CLASS.dropHighlight));
+  }
 }