DataGrid - Testcafe tests - Row dragging: unskip tests

e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging.ts → e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/functional.ts

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { ClientFunction, Selector } from 'testcafe';
-import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid, { CLASS as DataGridClassNames } from 'devextreme-testcafe-models/dataGrid';
 import { ClassNames } from 'devextreme-testcafe-models/dataGrid/classNames';
-import { MouseUpEvents, MouseAction } from '../../../helpers/mouseUpEvents';
-import url from '../../../helpers/getPageUrl';
-import { createWidget } from '../../../helpers/createWidget';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import { MouseUpEvents, MouseAction } from '../../../../helpers/mouseUpEvents';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { getThemeName } from '../../../../helpers/themeUtils';
 
 const CLASS = { ...DataGridClassNames, ...ClassNames };
 
@@ -55,8 +54,8 @@ const generateData = (rowCount, columnCount): Record<string, unknown>[] => {
   return items;
 };
 
-fixture`Row dragging`
-  .page(url(__dirname, '../../container.html'));
+fixture`Row dragging.Functional`
+  .page(url(__dirname, '../../../container.html'));
 
 // T903351
 test('The placeholder should appear when a cross-component dragging rows after scrolling the window', async (t) => {
@@ -468,7 +467,7 @@ test('Headers should not be hidden during auto scrolling when virtual scrollling
 });
 
 // T1078513
-test.meta({ unstable: true })('Footer should not be hidden during auto scrolling when virtual scrollling is specified', async (t) => {
+test('Footer should not be hidden during auto scrolling when virtual scrolling is specified', async (t) => {
   const dataGrid = new DataGrid('#container');
   await t.drag(dataGrid.getDataRow(0).getDragCommand(), 0, 90, { speed: 0.1 });
 
@@ -570,15 +569,25 @@ test('The draggable element should be displayed correctly after horizontal scrol
   });
 });
 
-test.meta({ unstable: true })('Dragging with scrolling should be prevented by e.cancel (T1179555)', async (t) => {
+test('Dragging with scrolling should be prevented by e.cancel (T1179555)', async (t) => {
   const dataGrid = new DataGrid('#container');
+  const scrollTopOffsetByTheme = {
+    generic: -180,
+    fluent: -160,
+    material: -160,
+  };
 
   await dataGrid.scrollBy(t, { top: 10000 });
   await t.expect(dataGrid.isReady()).ok();
 
   await MouseUpEvents.disable(MouseAction.dragToOffset);
 
-  await t.drag(dataGrid.getDataRow(98).getDragCommand(), 0, -180, { speed: 0.1 });
+  await t.drag(
+    dataGrid.getDataRow(98).getDragCommand(),
+    0,
+    scrollTopOffsetByTheme[getThemeName()],
+    { speed: 0.1 },
+  );
 
   await t.expect(Selector('.dx-sortable-placeholder').visible).notOk();
 
@@ -661,7 +670,7 @@ test('The placeholder should have correct position after dragging the row to the
 }));
 
 // T1126013
-test.meta({ unstable: true })('toIndex should not be corrected when source item gets removed from DOM', async (t) => {
+test('toIndex should not be corrected when source item gets removed from DOM', async (t) => {
   const fromIndex = 2;
   const toIndex = 4;
 
@@ -785,39 +794,3 @@ test('Item should appear in a correct spot when dragging to a different page wit
     showBorders: true,
   });
 });
-
-// T1179218
-test.meta({ unstable: true })('Rows should appear correctly during dragging when virtual scrolling is enabled and rowDragging.dropFeedbackMode = "push"', async (t) => {
-  const dataGrid = new DataGrid('#container');
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-  // drag the row down
-  await dataGrid.moveRow(0, 30, 150, true);
-  await dataGrid.moveRow(0, 30, 350);
-
-  // waiting for autoscrolling
-  await t.wait(2000);
-
-  // drag the row up
-  await dataGrid.moveRow(0, 30, 75);
-
-  await testScreenshot(t, takeScreenshot, 'T1179218-virtual-scrolling-dragging-row.png', { element: dataGrid.element });
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async (t) => {
-  await t.maximizeWindow();
-  return createWidget('dxDataGrid', {
-    height: 440,
-    keyExpr: 'id',
-    scrolling: {
-      mode: 'virtual',
-    },
-    dataSource: [...new Array(100)].fill(null).map((_, index) => ({ id: index })),
-    columns: ['id'],
-    rowDragging: {
-      allowReordering: true,
-      dropFeedbackMode: 'push',
-    },
-  });
-});

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

@@ -0,0 +1,53 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { getThemeName, testScreenshot } from '../../../../helpers/themeUtils';
+
+fixture`Row dragging.Visual`
+  .page(url(__dirname, '../../../container.html'));
+
+// T1179218
+test('Rows should appear correctly during dragging when virtual scrolling is enabled and rowDragging.dropFeedbackMode = "push"', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const themeName = getThemeName();
+  const scrollTopOffsetsByTheme = {
+    generic: [150, 350, 75],
+    fluent: [150, 350, 100],
+    material: [150, 350, 100],
+  };
+
+  // drag the row down
+  await dataGrid.moveRow(0, 30, scrollTopOffsetsByTheme[themeName][0], true);
+  await dataGrid.moveRow(0, 30, scrollTopOffsetsByTheme[themeName][1]);
+
+  // waiting for autoscrolling
+  await t.wait(2000);
+
+  // drag the row up
+  await dataGrid.moveRow(0, 30, scrollTopOffsetsByTheme[themeName][2]);
+
+  // waiting for autoscrolling
+  await t.wait(1000);
+
+  await testScreenshot(t, takeScreenshot, 'T1179218-virtual-scrolling-dragging-row.png', { element: dataGrid.element });
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async (t) => {
+  await t.maximizeWindow();
+  return createWidget('dxDataGrid', {
+    height: 440,
+    keyExpr: 'id',
+    scrolling: {
+      mode: 'virtual',
+    },
+    dataSource: [...new Array(100)].fill(null).map((_, index) => ({ id: index })),
+    columns: ['id'],
+    rowDragging: {
+      allowReordering: true,
+      dropFeedbackMode: 'push',
+    },
+  });
+});