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

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);
+    }
+  }
 });

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

@@ -12,71 +12,73 @@ import {
 const DATEBOX_CLASS = 'dx-datebox';
 
 const stylingModes = ['outlined', 'underlined', 'filled'];
+const visibleLabelModes = ['floating', 'static', 'outside'];
 
 fixture.disablePageReloads`DateBox_Label`
   .page(url(__dirname, '../../container.html'));
 
-stylingModes.forEach((stylingMode) => {
-  test(`Symbol parts in label should not be cropped with stylingMode=${stylingMode}`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-    await testScreenshot(t, takeScreenshot, `Datebox label symbols with stylingMode=${stylingMode}.png`, { element: '#container' });
-
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }).before(async () => {
-    await appendElementTo('#container', 'div', 'dateBox');
-    await setStyleAttribute(Selector('#container'), 'box-sizing: border-box; width: 300px; height: 400px; padding: 8px;');
-
-    return createWidget('dxDateBox', {
-      label: 'qwerty QWERTY 1234567890',
-      stylingMode,
-      value: new Date(1900, 0, 1),
-    }, '#dateBox');
-  });
+test('Symbol parts in label should not be cropped', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Datebox label symbols.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'dateBox');
+  await setStyleAttribute(Selector('#container'), 'box-sizing: border-box; width: 300px; height: 600px; padding: 8px;');
+
+  for (const stylingMode of stylingModes) {
+    for (const labelMode of visibleLabelModes) {
+      const id = `${`dx${new Guid()}`}`;
+
+      await appendElementTo('#container', 'div', id, { });
+
+      await createWidget('dxDateBox', {
+        label: 'qwerty QWERTY 1234567890',
+        stylingMode,
+        labelMode,
+        value: new Date(1900, 0, 1),
+      }, `#${id}`);
+    }
+  }
 });
 
-[true, false].forEach((isValid) => {
-  test(`DateBox with buttons container, isValid=${isValid}`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-    await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${DATEBOX_CLASS} { width: 220px; margin: 2px; }`);
-
-    await testScreenshot(t, takeScreenshot, `DateBox render with buttons container, isValid=${isValid}.png`, { shouldTestInCompact: true });
-
-    await removeStylesheetRulesFromPage();
-
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }).before(async () => {
-    for (const stylingMode of stylingModes) {
-      for (const buttons of [
-        ['clear'],
-        ['clear', 'dropDown'],
-        [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear', 'dropDown'],
-        ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }, 'dropDown'],
-        ['clear', 'dropDown', { name: 'custom', location: 'after', options: { icon: 'home' } }],
-        [{ name: 'custom', location: 'before', options: { icon: 'home' } }, 'clear', 'dropDown'],
-        ['clear', { name: 'custom', location: 'before', options: { icon: 'home' } }, 'dropDown'],
-        ['clear', 'dropDown', { name: 'custom', location: 'before', options: { icon: 'home' } }],
-      ]) {
-        for (const rtlEnabled of [true, false]) {
-          const id = `${`dx${new Guid()}`}`;
-
-          await appendElementTo('#container', 'div', id, { });
-
-          await createWidget('dxDateBox', {
-            value: new Date(2021, 9, 17),
-            stylingMode,
-            rtlEnabled,
-            buttons,
-            showClearButton: true,
-            isValid,
-          }, `#${id}`);
-        }
+test('DateBox with buttons container', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${DATEBOX_CLASS} { width: 220px; margin: 2px; }`);
+
+  await testScreenshot(t, takeScreenshot, 'DateBox render with buttons container.png');
+
+  await removeStylesheetRulesFromPage();
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  for (const stylingMode of stylingModes) {
+    for (const buttons of [
+      ['clear'],
+      ['clear', 'dropDown'],
+      [{ name: 'custom', location: 'after', options: { icon: 'home' } }, 'clear', 'dropDown'],
+      ['clear', { name: 'custom', location: 'after', options: { icon: 'home' } }, 'dropDown'],
+      ['clear', 'dropDown', { name: 'custom', location: 'after', options: { icon: 'home' } }],
+    ]) {
+      for (const isValid of [true, false]) {
+        const id = `${`dx${new Guid()}`}`;
+
+        await appendElementTo('#container', 'div', id, { });
+
+        await createWidget('dxDateBox', {
+          value: new Date(2021, 9, 17),
+          stylingMode,
+          buttons,
+          showClearButton: true,
+          isValid,
+        }, `#${id}`);
       }
     }
-  });
+  }
 });

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

@@ -1,45 +1,55 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DateBox from 'devextreme-testcafe-models/dateBox';
+import Guid from 'devextreme/core/guid';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { testScreenshot } from '../../../helpers/themeUtils';
+import { appendElementTo } from '../../../helpers/domUtils';
 
 fixture.disablePageReloads`DateBox ValidationMessagePosition`
   .page(url(__dirname, '../../container.html'));
 
 const positions = ['top', 'right', 'bottom', 'left'];
 
-positions.forEach((position) => {
-  safeSizeTest(`DateBox ValidationMessage position is correct (${position})`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+safeSizeTest('DateBox ValidationMessage position is correct', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    const dateBox = new DateBox('#container');
+  // eslint-disable-next-line no-restricted-syntax
+  for (const id of t.ctx.ids) {
+    const dateBox = new DateBox(`#${id}`);
     await dateBox.option('value', new Date(2022, 6, 14));
+  }
 
-    await testScreenshot(t, takeScreenshot, `Datebox validation message with position=${position}.png`, {
-      shouldTestInCompact: true,
-      compactCallBack: async () => dateBox.option('value', new Date(2022, 6, 15)),
-    });
+  await testScreenshot(t, takeScreenshot, 'Datebox validation message.png');
 
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }, [300, 200]).before(async () => {
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [600, 400]).before(async (t) => {
+  t.ctx.ids = [];
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const position of positions) {
+    const id = `${`dx${new Guid()}`}`;
+
+    await appendElementTo('#container', 'div', id, {});
+
+    t.ctx.ids.push(id);
     await createWidget('dxDateBox', {
-      elementAttr: { style: 'margin: 50px 0 0 100px;' },
-      width: 100,
+      elementAttr: { style: 'display: inline-block; margin: 50px 100px 0 0;' },
+      width: 150,
       height: 40,
       validationMessageMode: 'always',
       validationMessagePosition: position,
-    });
+    }, `#${id}`);
 
-    return createWidget('dxValidator', {
+    await createWidget('dxValidator', {
       validationRules: [{
         type: 'range',
         max: new Date(1),
         message: 'out of range',
       }],
-    });
-  });
+    }, `#${id}`);
+  }
 });