CI optimization: reduce the number of scenarios in TestCafe testing (Editors)

e2e/testcafe-devextreme/tests/editors/lookup/common.ts

@@ -12,6 +12,7 @@ import {
 } from '../../../helpers/domUtils';
 
 const LOOKUP_FIELD_CLASS = 'dx-lookup-field';
+const OVERLAY_CLASS = 'dx-overlay-content';
 
 const stylingModes = ['outlined', 'underlined', 'filled'];
 const labelModes = ['static', 'floating', 'hidden', 'outside'];
@@ -89,37 +90,47 @@ if (!isMaterialBased()) {
 safeSizeTest('Check popup height with no found data option', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`));
+  await t.hover(`.${OVERLAY_CLASS}`);
 
   await testScreenshot(t, takeScreenshot, 'Lookup with no found data.png');
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [300, 400]).before(async () => createWidget('dxLookup', { dataSource: [], searchEnabled: true }));
+}, [300, 400]).before(async () => {
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
+
+  return createWidget('dxLookup', { dataSource: [], searchEnabled: true });
+});
 
 safeSizeTest('Check popup height in loading state', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`));
+  await t.hover(`.${OVERLAY_CLASS}`);
 
   await testScreenshot(t, takeScreenshot, 'Lookup in loading.png');
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [300, 400]).before(async () => createWidget('dxLookup', {
-  dataSource: {
-    load() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve([1, 2, 3]);
-        }, 5000);
-      });
+}, [300, 400]).before(async () => {
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
+
+  return createWidget('dxLookup', {
+    dataSource: {
+      load() {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve([1, 2, 3]);
+          }, 5000);
+        });
+      },
     },
-  },
-  valueExpr: 'id',
-  displayExpr: 'text',
-}));
+    valueExpr: 'id',
+    displayExpr: 'text',
+  });
+});
 
 test('Placeholder is visible after items option change when value is not chosen (T1099804)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

e2e/testcafe-devextreme/tests/editors/numberBox/label.ts

@@ -1,7 +1,8 @@
-/* eslint-disable no-restricted-syntax */
+import type { Properties, NumberBoxPredefinedButton } from 'devextreme/ui/number_box.d';
+import type { EditorStyle, TextEditorButton } from 'devextreme/common';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Guid from 'devextreme/core/guid';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import { isMaterial, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import {
@@ -10,84 +11,82 @@ import {
 
 const NUMBERBOX_CLASS = 'dx-numberbox';
 
-const stylingModes = ['outlined', 'underlined', 'filled'];
+const stylingModes: EditorStyle[] = ['outlined', 'underlined', 'filled'];
+const buttonsList: (TextEditorButton | NumberBoxPredefinedButton)[][] = [
+  ['clear'],
+  [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear', 'spins'],
+  ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }, 'spins'],
+  ['clear', 'spins', { name: 'custom', location: 'after', options: { icon: 'home' } }],
+  [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear', 'spins'],
+];
 
 fixture.disablePageReloads`NumberBox_Label`
   .page(url(__dirname, '../../container.html'));
 
-stylingModes.forEach((stylingMode) => {
-  test(`Label for dxNumberBox stylingMode=${stylingMode}`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-    await testScreenshot(t, takeScreenshot, `NumberBox label with stylingMode=${stylingMode}.png`, { element: '#container' });
-
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }).before(async () => {
-    const componentOption = {
+const createNumberBox = async (options?: Properties): Promise<string> => {
+  const id = `${`dx${new Guid()}`}`;
+
+  await appendElementTo('#container', 'div', id, {});
+  await createWidget('dxNumberBox', {
+    value: Math.PI,
+    showClearButton: true,
+    showSpinButtons: true,
+    ...options,
+  }, `#${id}`);
+
+  return id;
+};
+test('Label for dxNumberBox', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'NumberBox label.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await insertStylesheetRulesToPage('#container { box-sizing: border-box; width: 300px; height: 400px; padding: 8px; }');
+  if (isMaterial()) {
+    await insertStylesheetRulesToPage('#container .dx-widget, #container .dx-widget input { font-family: sans-serif }');
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const stylingMode of stylingModes) {
+    await createNumberBox({
       label: 'label text',
       stylingMode,
-    };
-
-    await insertStylesheetRulesToPage('#container { box-sizing: border-box; width: 300px; height: 400px; padding: 8px; }');
-
-    await appendElementTo('#container', 'div', 'numberBox1', { });
-    await appendElementTo('#container', 'div', 'numberBox2', { });
-
-    await createWidget('dxNumberBox', {
-      ...componentOption,
+      // @ts-expect-error string instead of number
       value: 'text',
-    }, '#numberBox1');
-
-    await createWidget('dxNumberBox', {
-      ...componentOption,
+    });
+    await createNumberBox({
+      label: 'label text',
+      stylingMode,
       value: 123,
-    }, '#numberBox2');
-  });
+    });
+  }
 });
 
-[true, false].forEach((isValid) => {
-  test(`NumberBox with buttons container, isValid=${isValid}`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-    await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${NUMBERBOX_CLASS} { width: 220px; margin: 2px; }`);
+test('NumberBox with buttons container', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    await testScreenshot(t, takeScreenshot, `NumberBox render with buttons container, isValid=${isValid}.png`, { shouldTestInCompact: true });
+  await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${NUMBERBOX_CLASS} { width: 220px; margin: 2px; }`);
 
-    await removeStylesheetRulesFromPage();
+  await testScreenshot(t, takeScreenshot, 'NumberBox render with buttons container.png');
 
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }).before(async () => {
-    for (const stylingMode of stylingModes) {
-      for (const buttons of [
-        ['clear'],
-        ['clear', 'spins'],
-        [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear', 'spins'],
-        ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }, 'spins'],
-        ['clear', 'spins', { name: 'custom', location: 'after', options: { icon: 'home' } }],
-        [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear', 'spins'],
-        ['clear', { name: 'custom', location: 'before', options: { icon: 'home' } }, 'spins'],
-        ['clear', 'spins', { name: 'custom', location: 'before', options: { icon: 'home' } }],
-      ]) {
-        for (const rtlEnabled of [true, false]) {
-          const id = `${`dx${new Guid()}`}`;
+  await removeStylesheetRulesFromPage();
 
-          await appendElementTo('#container', 'div', id, { });
-
-          await createWidget('dxNumberBox', {
-            value: Math.PI,
-            stylingMode,
-            rtlEnabled,
-            buttons,
-            showClearButton: true,
-            showSpinButtons: true,
-            isValid,
-          }, `#${id}`);
-        }
-      }
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const stylingMode of stylingModes) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const buttons of buttonsList) {
+      await createNumberBox({ stylingMode, buttons });
     }
-  });
+
+    await createNumberBox({ stylingMode, rtlEnabled: true });
+    await createNumberBox({ stylingMode, isValid: false });
+  }
 });

e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts

@@ -53,7 +53,7 @@ const ANIMATION_DELAY = 500;
         showTitle: true,
         rtlEnabled,
         visible: true,
-        animation: undefined,
+        animation: { show: { duration: 0 }, hide: { duration: 0 } },
         target: COMPONENT_SELECTOR,
         hideOnOutsideClick: true,
         toolbarItems: [{

e2e/testcafe-devextreme/tests/editors/tagBox/label.ts

@@ -2,12 +2,13 @@ import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import TagBox from 'devextreme-testcafe-models/tagBox';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import { isMaterial, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import {
   appendElementTo,
   setStyleAttribute,
+  insertStylesheetRulesToPage,
 } from '../../../helpers/domUtils';
 
 const stylingModes = ['outlined', 'underlined', 'filled'];
@@ -37,6 +38,10 @@ stylingModes.forEach((stylingMode) => {
       stylingMode,
     };
 
+    if (isMaterial()) {
+      await insertStylesheetRulesToPage('#container .dx-widget { font-family: sans-serif }');
+    }
+
     await appendElementTo('#container', 'div', 'tagBox1', { });
     await appendElementTo('#container', 'div', 'tagBox2', { });
 
@@ -61,12 +66,6 @@ stylingModes.forEach((stylingMode) => {
 
       const screenshotName = `TagBox label with stylingMode=${stylingMode},labelMode=${labelMode}.png`;
 
-      await testScreenshot(t, takeScreenshot, screenshotName);
-
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-
       await t.click(tagBox.element);
       await t.click(tagBox.element);