Scheduler: use testScreenshot utility in e2e tests: layout

Author: anna-shakhova

e2e/testcafe-devextreme/tests/scheduler/common/header/header_material.ts

@@ -72,10 +72,14 @@ test('The toolbar should not display if the config is empty', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxScheduler', {
-  currentDate: new Date(2020, 2, 2),
-  currentView: 'day',
-  views: ['day', 'week'],
-  height: 580,
-  toolbar: { items: [] },
-}));
+}).before(async () => {
+  await changeTheme('material.blue.light');
+
+  return createWidget('dxScheduler', {
+    currentDate: new Date(2020, 2, 2),
+    currentView: 'day',
+    views: ['day', 'week'],
+    height: 580,
+    toolbar: { items: [] },
+  });
+});

e2e/testcafe-devextreme/tests/scheduler/common/header/sizes.ts

@@ -3,6 +3,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
 import { testScreenshot } from '../../../../helpers/themeUtils';
+import { changeTheme } from '../../../../helpers/changeTheme';
 
 fixture.disablePageReloads`Scheduler header sizes`
   .page(url(__dirname, '../../../container.html'));
@@ -14,7 +15,7 @@ const buttons = Array.from({ length: 4 }).map((_, index) => ({
   options: { text: `Button ${index}` },
 }));
 
-test('items inside toolbar menu should stretch', async (t) => {
+test.skip('items inside toolbar menu should stretch', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const scheduler = new Scheduler('#container');
 
@@ -28,17 +29,23 @@ test('items inside toolbar menu should stretch', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxScheduler', {
-  width: 320,
-  currentDate: new Date('2025-05-02T07:59:01.167Z'),
-  toolbar: {
-    items: ['today', 'dateNavigator', ...buttons, {
-      location: 'after',
-      locateInMenu: 'auto',
-      name: 'viewSwitcher',
-    }],
-  },
-}));
+}).before(async () => {
+  await changeTheme('fluent.blue.light');
+
+  return createWidget('dxScheduler', {
+    width: 320,
+    currentDate: new Date('2025-05-02T07:59:01.167Z'),
+    toolbar: {
+      items: ['today', 'dateNavigator', ...buttons, {
+        location: 'after',
+        locateInMenu: 'auto',
+        name: 'viewSwitcher',
+      }],
+    },
+  });
+}).after(async () => {
+  await changeTheme('generic.light');
+});
 
 test('Scheduler header should have correct sizes', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/adaptive.ts

@@ -3,7 +3,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../../helpers/createWidget';
 import url from '../../../../../helpers/getPageUrl';
 import { ADAPTIVE_SIZE } from '../../const';
-import { changeTheme } from '../../../../../helpers/changeTheme';
+import { testScreenshot } from '../../../../../helpers/themeUtils';
 import {
   createDataSetForScreenShotTests,
   resourceDataSource,
@@ -26,97 +26,90 @@ const createScheduler = async (
   });
 };
 
-['generic.light', 'material.blue.light', 'fluent.blue.light'].forEach((theme) => {
-  const themePrefix = theme.split('.')[0];
-
-  [false, true].forEach((rtlEnabled) => {
-    [false, true].forEach((crossScrollingEnabled) => {
-      test.meta({ browserSize: ADAPTIVE_SIZE })(`Adaptive views layout test in ${themePrefix} theme, crossScrollingEnabled=${crossScrollingEnabled}${rtlEnabled ? 'in RTL' : ''}`, async (t) => {
-        const scheduler = new Scheduler('#container');
-        const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-        // eslint-disable-next-line no-restricted-syntax
-        for (const view of views) {
-          await scheduler.option('currentView', view);
-
-          await t.expect(
-            await takeScreenshot(`${themePrefix}-view=${view}-crossScrolling=${crossScrollingEnabled}${rtlEnabled ? '-rtl' : ''}.png`, scheduler.workSpace),
-          ).ok();
-        }
-
-        await t.expect(compareResults.isValid())
-          .ok(compareResults.errorMessages());
-      }).before(async () => {
-        await changeTheme(theme);
-
-        await createScheduler({
-          views,
-          currentView: 'day',
-          crossScrollingEnabled,
-          rtlEnabled,
-        });
-      }).after(async () => {
-        await changeTheme('generic.light');
+[false, true].forEach((rtlEnabled) => {
+  [false, true].forEach((crossScrollingEnabled) => {
+    test.meta({ browserSize: ADAPTIVE_SIZE })(`Adaptive views layout test, crossScrollingEnabled=${crossScrollingEnabled}${rtlEnabled ? 'in RTL' : ''}`, async (t) => {
+      const scheduler = new Scheduler('#container');
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const view of views) {
+        await scheduler.option('currentView', view);
+
+        await testScreenshot(
+          t,
+          takeScreenshot,
+          `view=${view}-crossScrolling=${crossScrollingEnabled}${rtlEnabled ? '-rtl' : ''}.png`,
+          { element: scheduler.workSpace },
+        );
+      }
+
+      await t.expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => {
+      await createScheduler({
+        views,
+        currentView: 'day',
+        crossScrollingEnabled,
+        rtlEnabled,
       });
+    });
 
-      test.meta({ browserSize: ADAPTIVE_SIZE })(`Adaptive views layout test in ${themePrefix} theme, crossScrollingEnabled=${crossScrollingEnabled} when horizontal grouping${rtlEnabled ? ' and RTL are' : ' is'} used`, async (t) => {
-        const scheduler = new Scheduler('#container');
-        const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-        // eslint-disable-next-line no-restricted-syntax
-        for (const view of views) {
-          await scheduler.option('currentView', view);
-
-          await t.expect(
-            await takeScreenshot(`${themePrefix}-view=${view}-crossScrolling=${crossScrollingEnabled}-horizontal${rtlEnabled ? '-rtl' : ''}.png`, scheduler.workSpace),
-          ).ok();
-        }
-
-        await t.expect(compareResults.isValid())
-          .ok(compareResults.errorMessages());
-      }).before(async () => {
-        await changeTheme(theme);
-
-        await createScheduler({
-          views: horizontalViews,
-          currentView: 'day',
-          crossScrollingEnabled,
-          rtlEnabled,
-          groups: ['priorityId'],
-          resources: resourceDataSource,
-        });
-      }).after(async () => {
-        await changeTheme('generic.light');
+    test.meta({ browserSize: ADAPTIVE_SIZE })(`Adaptive views layout test crossScrollingEnabled=${crossScrollingEnabled} when horizontal grouping${rtlEnabled ? ' and RTL are' : ' is'} used`, async (t) => {
+      const scheduler = new Scheduler('#container');
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const view of views) {
+        await scheduler.option('currentView', view);
+
+        await testScreenshot(
+          t,
+          takeScreenshot,
+          `view=${view}-crossScrolling=${crossScrollingEnabled}-horizontal${rtlEnabled ? '-rtl' : ''}.png`,
+          { element: scheduler.workSpace },
+        );
+      }
+
+      await t.expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => {
+      await createScheduler({
+        views: horizontalViews,
+        currentView: 'day',
+        crossScrollingEnabled,
+        rtlEnabled,
+        groups: ['priorityId'],
+        resources: resourceDataSource,
       });
+    });
 
-      test.meta({ browserSize: ADAPTIVE_SIZE })(`Adaptive views layout test in ${themePrefix} theme, crossScrollingEnabled=${crossScrollingEnabled} when vertical grouping${rtlEnabled ? ' and RTL are' : ' is'} used`, async (t) => {
-        const scheduler = new Scheduler('#container');
-        const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-        // eslint-disable-next-line no-restricted-syntax
-        for (const view of views) {
-          await scheduler.option('currentView', view);
-
-          await t.expect(
-            await takeScreenshot(`${themePrefix}-view=${view}-crossScrolling=${crossScrollingEnabled}-vertical${rtlEnabled ? '-rtl' : ''}.png`, scheduler.workSpace),
-          ).ok();
-        }
-
-        await t.expect(compareResults.isValid())
-          .ok(compareResults.errorMessages());
-      }).before(async () => {
-        await changeTheme(theme);
-
-        await createScheduler({
-          views: verticalViews,
-          currentView: 'day',
-          crossScrollingEnabled,
-          rtlEnabled,
-          groups: ['priorityId'],
-          resources: resourceDataSource,
-        });
-      }).after(async () => {
-        await changeTheme('generic.light');
+    test.meta({ browserSize: ADAPTIVE_SIZE })(`Adaptive views layout test, crossScrollingEnabled=${crossScrollingEnabled} when vertical grouping${rtlEnabled ? ' and RTL are' : ' is'} used`, async (t) => {
+      const scheduler = new Scheduler('#container');
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const view of views) {
+        await scheduler.option('currentView', view);
+
+        await testScreenshot(
+          t,
+          takeScreenshot,
+          `view=${view}-crossScrolling=${crossScrollingEnabled}-vertical${rtlEnabled ? '-rtl' : ''}.png`,
+          { element: scheduler.workSpace },
+        );
+      }
+
+      await t.expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => {
+      await createScheduler({
+        views: verticalViews,
+        currentView: 'day',
+        crossScrollingEnabled,
+        rtlEnabled,
+        groups: ['priorityId'],
+        resources: resourceDataSource,
       });
     });
   });