update numberbox screenshots, added font-family to tagbox

Author: juleari

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

@@ -15,65 +15,54 @@ 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'];
 
 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);
+test(`DateBox styles`, async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-      await testScreenshot(t, takeScreenshot, `Datebox stylingMode=${stylingMode}, labelMode=${labelMode}.png`, { shouldTestInCompact: true });
+  await testScreenshot(t, takeScreenshot, `Datebox.png`, { shouldTestInCompact: true });
 
-      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);
-        }
+  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-', '')} stylingMode=${stylingMode}, labelMode=${labelMode}.png`, { shouldTestInCompact: true });
+    await testScreenshot(t, takeScreenshot, `Datebox ${state.replaceAll('dx-', '').replaceAll('dropdowneditor-', '').replaceAll('state-', '')}.png`, { shouldTestInCompact: true });
 
-        for (const id of t.ctx.ids) {
-          await removeClassAttribute(Selector(`#${id}`), state);
-        }
-      }
+    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 t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async (t) => {
+  t.ctx.ids = [];
 
-      await insertStylesheetRulesToPage(`.${DATEBOX_CLASS} { display: inline-block; margin: 5px; }`);
+  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()}`}`;
+  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, { });
+      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),
-            };
+      const options: any = {
+        width: 220,
+        label: 'label text',
+        showClearButton: true,
+        pickerType,
+        type,
+        value: new Date(2021, 9, 17, 16, 34),
+      };
 
-            await createWidget('dxDateBox', options, `#${id}`);
-          }
-        }
-      }
-    });
-  });
+      await createWidget('dxDateBox', options, `#${id}`);
+    }
+  }
 });

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

@@ -16,67 +16,67 @@ const stylingModes = ['outlined', 'underlined', 'filled'];
 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);
+test('Symbol parts in label should not be cropped', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    await testScreenshot(t, takeScreenshot, `Datebox label symbols with stylingMode=${stylingMode}.png`, { element: '#container' });
+  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: 400px; padding: 8px;');
+  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',
+  for (const stylingMode of stylingModes) {
+    const id = `${`dx${new Guid()}`}`;
+
+    await appendElementTo('#container', 'div', id, { });
+
+    const options: any = {
+      width: 220,
+      label: 'label text',
       stylingMode,
-      value: new Date(1900, 0, 1),
-    }, '#dateBox');
-  });
+      showClearButton: true,
+      value: new Date(2021, 9, 17, 16, 34),
+    };
+
+    await createWidget('dxDateBox', options, `#${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', { 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'],
+    ]) {
+      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/numberBox/etalons/NumberBox label with stylingMode=filled (material-blue-light).png

@@ -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', { });