e2e demos tests: improve DataGrid scenario with virtual rows

apps/demos/testing/common.test.ts

@@ -151,6 +151,7 @@ Object.values(FRAMEWORKS).forEach((approach) => {
         if (approach === 'Angular') {
           await waitForAngularLoading();
         }
+
         if (testCodeSource) {
           await execCode(testCodeSource);
         }
@@ -178,10 +179,8 @@ Object.values(FRAMEWORKS).forEach((approach) => {
           await t.expect(results.violations.length === 0).ok(createReport(results.violations));
         } else {
           const consoleMessages = await t.getBrowserConsoleMessages();
-
           const errors = [...consoleMessages.error, ...consoleMessages.warn]
             .filter((e) => !knownWarnings.some((kw) => e.startsWith(kw)));
-
           await t.expect(errors).eql([]);
 
           const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

apps/demos/utils/visual-tests/inject/test-styles.css

@@ -12,7 +12,7 @@ body {
 
 .dx-theme-material * {
   -webkit-font-smoothing: antialiased !important;
-  
-  /* text-rendering: optimizeLegibility !important; */
-  text-rendering: geometricprecision !important;
+
+  /* stylelint-disable-next-line value-keyword-case */
+  text-rendering: geometricPrecision !important;
 }

apps/demos/utils/visual-tests/matrix-test-helper.ts

@@ -210,9 +210,6 @@ export function shouldRunTestAtIndex(testIndex) {
 const SKIPPED_TESTS = {
   jQuery: { 
     DataGrid: ['RemoteGrouping'],
-    Charts: [
-      { demo: 'ZoomingAndScrollingAPI', themes: [THEME.material] },
-    ],
   },
   Angular: {
     Charts: ['Crosshair'],

e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts

@@ -1702,7 +1702,7 @@ test('The row alternation should display correctly when grouping and virtual scr
 
 test('DataGrid - Gray boxes appear when the push method is used to remove rows in infinite scrolling mode (T1240079)', async (t) => {
   const dataGrid = new DataGrid('#container');
-
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const data = [
     { id: 1, text: 'text 1' },
     { id: 2, text: 'text 2' },
@@ -1715,14 +1715,11 @@ test('DataGrid - Gray boxes appear when the push method is used to remove rows i
   await t.expect(dataGrid.isReady()).ok();
 
   await dataGrid.apiPush(changes);
-  await t.wait(500);
+  await testScreenshot(t, takeScreenshot, 'T1240079.png', { element: dataGrid.element });
 
-  await t.expect(dataGrid.isReady()).ok();
-
-  const visibleRows = await dataGrid.apiGetVisibleRows();
   await t
-    .expect(visibleRows.length)
-    .eql(0, 'All rows should be removed after push');
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
 }).before(async () => {
   await createWidget('dxDataGrid', () => {
     const data = [
@@ -1734,11 +1731,7 @@ test('DataGrid - Gray boxes appear when the push method is used to remove rows i
       store: new (window as any).DevExpress.data.CustomStore({
         key: 'id',
         loadMode: 'raw',
-        load: () => new Promise((resolve) => {
-          setTimeout(() => {
-            resolve(data);
-          }, 100);
-        }),
+        load: () => Promise.resolve(data),
       }),
     };
 

e2e/testcafe-devextreme/tests/editors/dateRangeBox/focus.ts

@@ -229,6 +229,7 @@ test('onFocusIn should be called only on focus of startDate input', async (t) =>
 
   await t
     .pressKey('shift+tab')
+    .wait(100)
     .expect(dateRangeBox.isFocused)
     .ok()
     .expect(dateRangeBox.getStartDateBox().isFocused)

e2e/testcafe-devextreme/tests/editors/selectBox/actionButton.ts

@@ -12,7 +12,7 @@ fixture.disablePageReloads`SelectBox`
 const purePressKey = async (t, key): Promise<void> => {
   await t
     .pressKey(key)
-    .wait(500);
+    .wait(100);
 };
 
 test('Click on action button should correctly work with SelectBox containing the field template (T811890)', async (t) => {