CI optimization: reduced the number of scenarios in TestCafe testing (NumberBox)

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

@@ -1,93 +1,94 @@
-/* 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 {
-  appendElementTo, removeStylesheetRulesFromPage, insertStylesheetRulesToPage,
+  appendElementTo, insertStylesheetRulesToPage,
 } from '../../../helpers/domUtils';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 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.meta({ unstable: true })(`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;
+};
+safeSizeTest('Label for dxNumberBox', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'NumberBox label.png');
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [350, 450]).before(async () => {
+  await insertStylesheetRulesToPage('#container { display: flex; flex-direction: column; width: 300px; height: 400px; gap: 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) {
+    const options = {
+      width: '100%',
       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,
+    await createNumberBox({
+      ...options,
+      // @ts-expect-error string instead of number
       value: 'text',
-    }, '#numberBox1');
-
-    await createWidget('dxNumberBox', {
-      ...componentOption,
+    });
+    await createNumberBox({
+      ...options,
       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; }`);
-
-    await testScreenshot(t, takeScreenshot, `NumberBox render with buttons container, isValid=${isValid}.png`, { shouldTestInCompact: true });
+test('NumberBox with buttons container', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    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 t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${NUMBERBOX_CLASS} { width: 220px; margin: 2px; }`);
 
-          await appendElementTo('#container', 'div', id, { });
-
-          await createWidget('dxNumberBox', {
-            value: Math.PI,
-            stylingMode,
-            rtlEnabled,
-            buttons,
-            showClearButton: true,
-            showSpinButtons: true,
-            isValid,
-          }, `#${id}`);
-        }
-      }
+  // 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 });
+  }
 });