CI optimization: reduced the number of scenarios in TestCafe testing (DateBox) (#31311)

Author: juleari

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

@@ -1,4 +1,6 @@
 /* eslint-disable no-restricted-syntax */
+import type { DatePickerType, DateType, Properties } from 'devextreme/ui/date_box.d';
+import { EditorStyle } from 'devextreme/common';
 import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Guid from 'devextreme/core/guid';
@@ -15,65 +17,71 @@ const DATEBOX_CLASS = 'dx-datebox';
 const DROP_DOWN_EDITOR_ACTIVE_CLASS = 'dx-dropdowneditor-active';
 const FOCUSED_STATE_CLASS = 'dx-state-focused';
 
-const stylingModes = ['outlined', 'underlined', 'filled'];
-const pickerTypes = ['calendar', 'list', 'native', 'rollers'];
-const labelModes = ['static', 'floating', 'hidden', 'outside'];
-const types = ['date', 'datetime', 'time'];
+const stylingModes: EditorStyle[] = ['outlined', 'underlined', 'filled'];
+const pickerTypes: DatePickerType[] = ['calendar', 'list', 'native', 'rollers'];
+const types: DateType[] = ['date', 'datetime', 'time'];
 
 fixture.disablePageReloads`DateBox render`
   .page(url(__dirname, '../../container.html'));
 
-stylingModes.forEach((stylingMode) => {
-  labelModes.forEach((labelMode) => {
-    test(`DateBox styles, stylingMode=${stylingMode}, labelMode=${labelMode}`, async (t) => {
-      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+const createDateBox = async (options?: Properties, state?: string): Promise<string> => {
+  const id = `${`dx${new Guid()}`}`;
 
-      await testScreenshot(t, takeScreenshot, `Datebox stylingMode=${stylingMode}, labelMode=${labelMode}.png`, { shouldTestInCompact: true });
+  await appendElementTo('#container', 'div', id, {});
+  await createWidget('dxDateBox', {
+    width: 220,
+    label: 'label text',
+    showClearButton: true,
+    value: new Date(2021, 9, 17, 16, 34),
+    ...options,
+  }, `#${id}`);
 
-      for (const state of [DROP_DOWN_EDITOR_ACTIVE_CLASS, FOCUSED_STATE_CLASS] as any[]) {
-        for (const id of t.ctx.ids) {
-          await setClassAttribute(Selector(`#${id}`), state);
-        }
+  if (state) {
+    await setClassAttribute(Selector(`#${id}`), state);
+  }
 
-        await testScreenshot(t, takeScreenshot, `Datebox ${state.replaceAll('dx-', '').replaceAll('dropdowneditor-', '').replaceAll('state-', '')} stylingMode=${stylingMode}, labelMode=${labelMode}.png`, { shouldTestInCompact: true });
+  return id;
+};
 
-        for (const id of t.ctx.ids) {
-          await removeClassAttribute(Selector(`#${id}`), state);
-        }
-      }
+test('DateBox styles', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Datebox.png');
+
+  for (const state of [DROP_DOWN_EDITOR_ACTIVE_CLASS, FOCUSED_STATE_CLASS] as any[]) {
+    for (const id of t.ctx.ids) {
+      await setClassAttribute(Selector(`#${id}`), state);
+    }
+
+    await testScreenshot(t, takeScreenshot, `Datebox ${state.replaceAll('dx-', '').replaceAll('dropdowneditor-', '').replaceAll('state-', '')}.png`);
+
+    for (const id of t.ctx.ids) {
+      await removeClassAttribute(Selector(`#${id}`), state);
+    }
+  }
 
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-    }).before(async (t) => {
-      t.ctx.ids = [];
-
-      await insertStylesheetRulesToPage(`.${DATEBOX_CLASS} { display: inline-block; margin: 5px; }`);
-
-      for (const rtlEnabled of [true, false]) {
-        for (const type of types) {
-          for (const pickerType of pickerTypes) {
-            const id = `${`dx${new Guid()}`}`;
-
-            t.ctx.ids.push(id);
-            await appendElementTo('#container', 'div', id, { });
-
-            const options: any = {
-              width: 220,
-              label: 'label text',
-              labelMode,
-              stylingMode,
-              showClearButton: true,
-              pickerType,
-              type,
-              rtlEnabled,
-              value: new Date(2021, 9, 17, 16, 34),
-            };
-
-            await createWidget('dxDateBox', options, `#${id}`);
-          }
-        }
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async (t) => {
+  t.ctx.ids = [];
+
+  await insertStylesheetRulesToPage(`.${DATEBOX_CLASS} { display: inline-block; margin: 5px; }`);
+
+  for (const stylingMode of stylingModes) {
+    for (const type of types) {
+      const options = {
+        stylingMode,
+        type,
+      };
+      for (const pickerType of pickerTypes) {
+        const id = await createDateBox({ ...options, pickerType });
+
+        t.ctx.ids.push(id);
       }
-    });
-  });
+
+      const id = await createDateBox({ ...options, rtlEnabled: true });
+      t.ctx.ids.push(id);
+    }
+  }
 });