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

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

@@ -1,29 +1,54 @@
-/* eslint-disable no-restricted-syntax */
+import type { Properties } from 'devextreme/ui/text_box.d';
+import type { LabelMode, EditorStyle, TextEditorButton } from 'devextreme/common';
 import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import TextBox from 'devextreme-testcafe-models/textBox';
 import Guid from 'devextreme/core/guid';
 import {
   removeStylesheetRulesFromPage, insertStylesheetRulesToPage, setStyleAttribute,
   appendElementTo, setClassAttribute,
-  removeClassAttribute,
 } from '../../../helpers/domUtils';
-import { testScreenshot, getThemeName } from '../../../helpers/themeUtils';
+import { isMaterial, testScreenshot, getThemeName } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 
 fixture.disablePageReloads`TextBox_Label`
   .page(url(__dirname, '../../container.html'));
 
-const labelModes = ['floating', 'static', 'hidden', 'outside'];
-const stylingModes = ['outlined', 'underlined', 'filled'];
+const visibleLabelModes: LabelMode[] = ['floating', 'static', 'outside'];
+const stylingModes: EditorStyle[] = ['outlined', 'underlined', 'filled'];
+const buttonsList: (string | TextEditorButton)[][] = [
+  ['clear'],
+  ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }],
+  [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear'],
+  ['clear', { name: 'custom', location: 'before', options: { icon: 'home' } }],
+];
 
 const TEXTBOX_CLASS = 'dx-textbox';
 const HOVER_STATE_CLASS = 'dx-state-hover';
 const FOCUSED_STATE_CLASS = 'dx-state-focused';
 const READONLY_STATE_CLASS = 'dx-state-readonly';
 const INVALID_STATE_CLASS = 'dx-invalid';
 
+const createTextBox = async (options?: Properties, state?: string): Promise<string> => {
+  const id = `${`dx${new Guid()}`}`;
+
+  await appendElementTo('#container', 'div', id, {});
+  await createWidget('dxTextBox', {
+    labelMode: 'floating',
+    stylingMode: 'outlined',
+    text: 'Text',
+    label: 'Label Text',
+    ...options,
+  }, `#${id}`);
+
+  if (state) {
+    await setClassAttribute(Selector(`#${id}`), state);
+  }
+
+  return id;
+};
+
 [
   { labelMode: 'static', expectedWidths: { generic: 82, material: 68, fluent: 74 } },
   { labelMode: 'floating', expectedWidths: { generic: 82, material: 68, fluent: 74 } },
@@ -55,116 +80,117 @@ const INVALID_STATE_CLASS = 'dx-invalid';
   });
 });
 
-stylingModes.forEach((stylingMode) => {
-  test(`Textbox render with stylingMode=${stylingMode}`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-    await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 60px; margin: 5px; }`);
+test('Textbox render', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    await testScreenshot(t, takeScreenshot, `Textbox render with limited width stylingMode=${stylingMode}.png`, { element: '#container' });
+  await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 60px; margin: 5px; }`);
 
-    await removeStylesheetRulesFromPage();
+  await testScreenshot(t, takeScreenshot, 'Textbox render with limited width.png', { element: '#container' });
 
-    await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 260px; margin: 5px; }`);
+  await removeStylesheetRulesFromPage();
 
-    await testScreenshot(t, takeScreenshot, `Textbox render stylingMode=${stylingMode}.png`);
+  await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 260px; margin: 5px; }`);
 
-    const states = [
-      HOVER_STATE_CLASS,
-      FOCUSED_STATE_CLASS,
-      READONLY_STATE_CLASS,
-      INVALID_STATE_CLASS,
-      `${INVALID_STATE_CLASS} ${FOCUSED_STATE_CLASS}`,
-    ];
+  await testScreenshot(t, takeScreenshot, 'Textbox render.png');
 
-    for (const state of states as any[]) {
-      for (const id of t.ctx.ids) {
-        await setClassAttribute(Selector(`#${id}`), state);
+  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 labelMode of visibleLabelModes) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const placeholder of ['Placeholder', '']) {
+        await createTextBox({
+          text: undefined,
+          placeholder,
+          stylingMode,
+          labelMode,
+        });
       }
 
-      await testScreenshot(t, takeScreenshot, `Textbox render ${state.replaceAll('dx-', '').replaceAll('state-', '')},stylingMode=${stylingMode}.png`);
+      await createTextBox({ text: 'Text value' });
+      await createTextBox({ rtlEnabled: true });
+    }
+    // eslint-disable-next-line no-restricted-syntax
+    for (const placeholder of ['Placeholder', '']) {
+      await createTextBox({
+        text: undefined,
+        placeholder,
+        stylingMode,
+        label: undefined,
+      });
+    }
+    await createTextBox({ label: undefined, text: 'Text value' });
+    await createTextBox({ label: undefined, rtlEnabled: true });
+  }
+});
 
-      for (const id of t.ctx.ids) {
-        await removeClassAttribute(Selector(`#${id}`), state);
-      }
+test('Textbox states', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await insertStylesheetRulesToPage(`.${TEXTBOX_CLASS} { display: inline-block; vertical-align: middle; width: 260px; margin: 5px; }`);
+
+  await testScreenshot(t, takeScreenshot, 'Textbox states.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const states = [
+    HOVER_STATE_CLASS,
+    FOCUSED_STATE_CLASS,
+    READONLY_STATE_CLASS,
+    INVALID_STATE_CLASS,
+    `${INVALID_STATE_CLASS} ${FOCUSED_STATE_CLASS}`,
+  ];
+  // eslint-disable-next-line no-restricted-syntax
+  for (const state of states) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const placeholder of ['Placeholder', '']) {
+      await createTextBox({
+        text: undefined,
+        placeholder,
+      }, state);
     }
 
-    await removeStylesheetRulesFromPage();
+    await createTextBox({ text: 'Text value' }, state);
+    await createTextBox({ rtlEnabled: true }, state);
+  }
+});
 
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }).before(async (t) => {
-    t.ctx.ids = [];
-
-    for (const rtlEnabled of [true, false]) {
-      for (const labelMode of labelModes) {
-        for (const placeholder of ['Placeholder', '']) {
-          for (const text of ['Text value', '']) {
-            for (const label of ['Label Text', '']) {
-              const id = `${`dx${new Guid()}`}`;
-
-              t.ctx.ids.push(id);
-              await appendElementTo('#container', 'div', id, {});
-              await createWidget('dxTextBox', {
-                label,
-                text,
-                placeholder,
-                labelMode,
-                stylingMode,
-                rtlEnabled,
-              }, `#${id}`);
-            }
-          }
-        }
-      }
-    }
-  });
+test('Textbox with buttons container', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-  ['floating', 'static', 'outside'].forEach((labelMode) => {
-    test(`Textbox with buttons container, stylingMode=${stylingMode}, labelMode=${labelMode}`, async (t) => {
-      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-      await insertStylesheetRulesToPage('#container { display: flex; flex-wrap: wrap; gap: 4px; }');
-
-      await testScreenshot(t, takeScreenshot, `Textbox with buttons container,stMode=${stylingMode},lMode=${labelMode}.png`, { shouldTestInCompact: true });
-
-      await removeStylesheetRulesFromPage();
-
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-    }).before(async () => {
-      for (const isValid of [true, false]) {
-        for (const buttons of [
-          ['clear'],
-          ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }],
-          [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear'],
-          ['clear', { name: 'custom', location: 'before', options: { icon: 'home' } }],
-          [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear'],
-        ]) {
-          for (const rtlEnabled of [true, false]) {
-            const id = `${`dx${new Guid()}`}`;
-
-            await appendElementTo('#container', 'div', id, {});
-
-            await createWidget('dxTextBox', {
-              width: 300,
-              value: 'Text',
-              stylingMode,
-              labelMode,
-              label: 'Label Text',
-              rtlEnabled,
-              buttons,
-              showClearButton: true,
-              isValid,
-            }, `#${id}`);
-          }
-        }
-      }
-    });
-  });
+  await insertStylesheetRulesToPage('#container { display: flex; flex-wrap: wrap; gap: 4px; }');
+
+  await testScreenshot(t, takeScreenshot, 'Textbox with buttons container.png');
 
+  await removeStylesheetRulesFromPage();
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  if (isMaterial()) {
+    await insertStylesheetRulesToPage('#container .dx-widget { font-family: sans-serif }');
+  }
+
+  // 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 createTextBox({ stylingMode, buttons, showClearButton: true });
+      await createTextBox({
+        stylingMode, buttons, showClearButton: true, isValid: false,
+      });
+    }
+  }
+});
+
+stylingModes.forEach((stylingMode) => {
   test(`TextBox should not be hovered after hover of outside label, stylingMode=${stylingMode}`, async (t) => {
     const textBox = new TextBox('#container');
 

e2e/testcafe-devextreme/tests/editors/textBox/validationMessage.ts

@@ -20,8 +20,6 @@ safeSizeTest('Validation Message position should be correct after change visibil
     .pressKey('enter')
     .pressKey('tab');
 
-  await testScreenshot(t, takeScreenshot, 'Textbox validation message.png');
-
   await setAttribute('#container', 'hidden', 'true');
   await removeAttribute('#container', 'hidden');