fixed lookup, tagbox, floatingAction Button

Author: Julia Volkova

e2e/testcafe-devextreme/tests/editors/button/floatingAction.ts

@@ -77,7 +77,7 @@ for (const label of ['Add Row', '']) {
         .expect(compareResults.isValid())
         .ok(compareResults.errorMessages());
     }).before(async () => {
-      await setStyleAttribute(Selector('#container'), 'width: 300px; height: 300px;');
+      await setStyleAttribute(Selector('#container'), 'width: 300px; height: 300px; font-family: sans-serif !important;');
       await appendElementTo('#container', 'div', 'speed-dial-action');
 
       await setGlobalConfig();

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

@@ -12,6 +12,7 @@ import {
 } from '../../../helpers/domUtils';
 
 const LOOKUP_FIELD_CLASS = 'dx-lookup-field';
+const OVERLAY_CLASS = 'dx-overlay-content';
 
 const stylingModes = ['outlined', 'underlined', 'filled'];
 const labelModes = ['static', 'floating', 'hidden', 'outside'];
@@ -89,37 +90,47 @@ if (!isMaterialBased()) {
 safeSizeTest('Check popup height with no found data option', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`));
+  await t.hover(`.${OVERLAY_CLASS}`);
 
   await testScreenshot(t, takeScreenshot, 'Lookup with no found data.png');
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [300, 400]).before(async () => createWidget('dxLookup', { dataSource: [], searchEnabled: true }));
+}, [300, 400]).before(async () => {
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
+
+  return createWidget('dxLookup', { dataSource: [], searchEnabled: true });
+});
 
 safeSizeTest('Check popup height in loading state', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`));
+  await t.hover(`.${OVERLAY_CLASS}`);
 
   await testScreenshot(t, takeScreenshot, 'Lookup in loading.png');
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [300, 400]).before(async () => createWidget('dxLookup', {
-  dataSource: {
-    load() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve([1, 2, 3]);
-        }, 5000);
-      });
+}, [300, 400]).before(async () => {
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
+
+  return createWidget('dxLookup', {
+    dataSource: {
+      load() {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve([1, 2, 3]);
+          }, 5000);
+        });
+      },
     },
-  },
-  valueExpr: 'id',
-  displayExpr: 'text',
-}));
+    valueExpr: 'id',
+    displayExpr: 'text',
+  });
+});
 
 test('Placeholder is visible after items option change when value is not chosen (T1099804)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

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

@@ -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', { });
 
@@ -61,12 +66,6 @@ stylingModes.forEach((stylingMode) => {
 
       const screenshotName = `TagBox label with stylingMode=${stylingMode},labelMode=${labelMode}.png`;
 
-      await testScreenshot(t, takeScreenshot, screenshotName);
-
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-
       await t.click(tagBox.element);
       await t.click(tagBox.element);