added font-family to overlays for popup and floating button

Author: Julia Volkova

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-syntax */
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { ClientFunction, Selector } from 'testcafe';
-import { getThemePostfix, testScreenshot } from '../../../helpers/themeUtils';
+import { getThemePostfix, isMaterial, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { appendElementTo, setStyleAttribute } from '../../../helpers/domUtils';
@@ -77,7 +77,10 @@ for (const label of ['Add Row', '']) {
         .expect(compareResults.isValid())
         .ok(compareResults.errorMessages());
     }).before(async () => {
-      await setStyleAttribute(Selector('#container'), 'width: 300px; height: 300px; font-family: sans-serif !important;');
+      await setStyleAttribute(Selector('#container'), 'width: 300px; height: 300px;');
+      if (isMaterial()) {
+        await setStyleAttribute(Selector('.dx-overlay-wrapper'), 'font-family: sans-serif !important;');
+      }
       await appendElementTo('#container', 'div', 'speed-dial-action');
 
       await setGlobalConfig();

e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts

@@ -3,10 +3,11 @@ import Popup from 'devextreme-testcafe-models/popup';
 import Popover from 'devextreme-testcafe-models/popover';
 import Toolbar from 'devextreme-testcafe-models/toolbar/toolbar';
 import { Selector } from 'testcafe';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import { isMaterial, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
+import { insertStylesheetRulesToPage, setStyleAttribute } from '../../../helpers/domUtils';
 
 fixture`Popup_toolbar`
   .page(url(__dirname, '../../container.html'));
@@ -40,90 +41,95 @@ const ANIMATION_DELAY = 500;
         await t
           .expect(compareResults.isValid())
           .ok(compareResults.errorMessages());
-      }, [600, 400]).before(async () => createWidget(name as 'dxPopup' | 'dxPopover', {
-        showCloseButton: true,
-        // eslint-disable-next-line no-multi-str
-        contentTemplate: () => $('<div>').text('\
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry.\
-            Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,\
-            when an unknown printer took a galley of type and scrambled it to make a type specimen book.\
-        '),
-        width: '60%',
-        height: 300,
-        showTitle: true,
-        rtlEnabled,
-        visible: true,
-        animation: undefined,
-        target: COMPONENT_SELECTOR,
-        hideOnOutsideClick: true,
-        toolbarItems: [{
-          location: 'before',
-          widget: 'dxButton',
-          options: {
-            icon: 'back',
-          },
-          toolbar,
-        }, {
-          location: 'before',
-          widget: 'dxButton',
-          locateInMenu: 'auto',
-          options: {
-            icon: 'refresh',
-          },
-          toolbar,
-        }, {
-          location: 'center',
-          locateInMenu: 'never',
-          template() {
-            return $('<div><b>Popup\'s</b> title</div>');
-          },
-          toolbar,
-        }, {
-          location: 'after',
-          widget: 'dxSelectBox',
-          locateInMenu: 'auto',
-          options: {
-            width: 140,
-            items: [1, 2, 3, 4, 5],
-            value: 3,
-          },
-          toolbar,
-        }, {
-          location: 'after',
-          widget: 'dxButton',
-          locateInMenu: 'auto',
-          options: {
-            icon: 'plus',
-          },
-          toolbar,
-        }, {
-          locateInMenu: 'always',
-          widget: 'dxButton',
-          options: {
-            icon: 'save',
-            text: 'Save',
-          },
-          toolbar,
-        }, {
-          widget: 'dxButton',
-          toolbar: toolbar === 'top'
-            ? 'bottom'
-            : 'top',
-          location: 'before',
-          options: {
-            icon: 'email',
-          },
-        }, {
-          widget: 'dxButton',
-          toolbar: toolbar === 'top'
-            ? 'bottom'
-            : 'top',
-          location: 'after',
-          options: {
-            text: 'Close',
-          },
-        }],
-      }));
+      }, [600, 400]).before(async () => {
+        if (isMaterial()) {
+          await setStyleAttribute(Selector('.dx-overlay-wrapper'), 'font-family: sans-serif !important;');
+        }
+        return createWidget(name as 'dxPopup' | 'dxPopover', {
+          showCloseButton: true,
+          // eslint-disable-next-line no-multi-str
+          contentTemplate: () => $('<div>').text('\
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry.\
+              Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,\
+              when an unknown printer took a galley of type and scrambled it to make a type specimen book.\
+          '),
+          width: '60%',
+          height: 300,
+          showTitle: true,
+          rtlEnabled,
+          visible: true,
+          animation: undefined,
+          target: COMPONENT_SELECTOR,
+          hideOnOutsideClick: true,
+          toolbarItems: [{
+            location: 'before',
+            widget: 'dxButton',
+            options: {
+              icon: 'back',
+            },
+            toolbar,
+          }, {
+            location: 'before',
+            widget: 'dxButton',
+            locateInMenu: 'auto',
+            options: {
+              icon: 'refresh',
+            },
+            toolbar,
+          }, {
+            location: 'center',
+            locateInMenu: 'never',
+            template() {
+              return $('<div><b>Popup\'s</b> title</div>');
+            },
+            toolbar,
+          }, {
+            location: 'after',
+            widget: 'dxSelectBox',
+            locateInMenu: 'auto',
+            options: {
+              width: 140,
+              items: [1, 2, 3, 4, 5],
+              value: 3,
+            },
+            toolbar,
+          }, {
+            location: 'after',
+            widget: 'dxButton',
+            locateInMenu: 'auto',
+            options: {
+              icon: 'plus',
+            },
+            toolbar,
+          }, {
+            locateInMenu: 'always',
+            widget: 'dxButton',
+            options: {
+              icon: 'save',
+              text: 'Save',
+            },
+            toolbar,
+          }, {
+            widget: 'dxButton',
+            toolbar: toolbar === 'top'
+              ? 'bottom'
+              : 'top',
+            location: 'before',
+            options: {
+              icon: 'email',
+            },
+          }, {
+            widget: 'dxButton',
+            toolbar: toolbar === 'top'
+              ? 'bottom'
+              : 'top',
+            location: 'after',
+            options: {
+              text: 'Close',
+            },
+          }],
+        })
+      });
     });
   });
 });