Toolbar: reduce screenshot test cases

e2e/testcafe-devextreme/tests/navigation/button/common.ts

@@ -0,0 +1,113 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ButtonType } from 'devextreme/common';
+import { Selector } from 'testcafe';
+import { testScreenshot } from '../../../helpers/themeUtils';
+import {
+  addCaptionTo,
+  appendElementTo,
+  setAttribute,
+  setClassAttribute,
+} from '../../../helpers/domUtils';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Button`
+  .page(url(__dirname, '../../container.html'));
+
+['text', 'outlined', 'contained'].forEach((stylingMode) => {
+  const testName = `Buttons, stylingMode=${stylingMode}`;
+  test(testName, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await testScreenshot(t, takeScreenshot, `${testName}.png`, {
+      element: '#container',
+    });
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    const typedButtons = ['danger', 'default', 'normal', 'success'].map((type: ButtonType) => ({
+      type,
+      text: `${type[0].toUpperCase()}${type.slice(1)}`,
+    }));
+    const iconButtons = [
+      { icon: 'find', text: 'Find' },
+      { icon: 'find' },
+      {
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" fill="currentColor">
+             <path d="M11.8834 3.00673L12 3C12.5128 3 12.9355 3.38604 12.9933 3.88338L13 4V11H20C20.5128 11 20.9355 11.386 20.9933 11.8834L21 12C21 12.5128 20.614 12.9355 20.1166 12.9933L20 13H13V20C13 20.5128 12.614 20.9355 12.1166 20.9933L12 21C11.4872 21 11.0645 20.614 11.0067 20.1166L11 20V13H4C3.48716 13 3.06449 12.614 3.00673 12.1166L3 12C3 11.4872 3.38604 11.0645 3.88338 11.0067L4 11H11V4C11 3.48716 11.386 3.06449 11.8834 3.00673L12 3L11.8834 3.00673Z"/>
+           </svg>`,
+      },
+    ];
+    const buttons = [
+      ...typedButtons,
+      ...iconButtons,
+    ];
+
+    await setAttribute('#container', 'class', 'dx-theme-generic-typography');
+    await setAttribute('#container', 'style', 'width: fit-content; padding: 8px;');
+
+    const states = ['default', 'focused', 'hover', 'active', 'selected', 'disabled'];
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const state of states) {
+      await appendElementTo('#container', 'div', `mode${state}`, {});
+      await setAttribute(`#mode${state}`, 'style', 'display: flex; gap: 8px; margin-bottom: 16px;');
+      await addCaptionTo(`#mode${state}`, state);
+
+      await Promise.all(buttons.map(
+        (_, index) => appendElementTo(`#mode${state}`, 'div', `button-${state}-${index}`, {}),
+      ));
+
+      await Promise.all(buttons.map(
+        (defaultConfig, index) => createWidget('dxButton', {
+          ...defaultConfig,
+          stylingMode,
+          disabled: state === 'disabled',
+        }, `#button-${state}-${index}`),
+      ));
+
+      if (state !== 'default' && state !== 'disabled') {
+        await Promise.all(
+          buttons.map((_, index) => setClassAttribute(Selector(`#button-${state}-${index}`), `dx-state-${state}`)),
+        );
+      }
+    }
+  });
+});
+
+test('Button in rtl modes', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Button in rtl modes.png', {
+    element: '#container',
+  });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await setAttribute('#container', 'style', 'width: fit-content; padding: 8px; display: grid; grid-template-columns: repeat(3, auto); grid-gap: 16px;');
+
+  const buttons = [
+    { icon: 'find', text: 'Button text' },
+    { icon: 'find', text: 'Long button text' },
+    { icon: 'find', text: 'Long button text', width: 150 },
+    { icon: 'find', text: 'Button text', rtlEnabled: true },
+    { icon: 'find', text: 'Long button text', rtlEnabled: true },
+    {
+      icon: 'find', text: 'Long button text', width: 150, rtlEnabled: true,
+    },
+  ];
+
+  await Promise.all(buttons.map(
+    (_, index) => appendElementTo('#container', 'div', `button-${index}`, {}),
+  ));
+
+  await Promise.all(buttons.map(
+    (config, index) => createWidget('dxButton', {
+      ...config,
+    }, `#button-${index}`),
+  ));
+});

e2e/testcafe-devextreme/tests/navigation/buttonGroup/common.ts

@@ -2,7 +2,9 @@ import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { Item, ButtonType } from 'devextreme/ui/button_group.d';
 import {
-  setStyleAttribute, appendElementTo, setAttribute, addCaptionTo,
+  setStyleAttribute,
+  appendElementTo,
+  setAttribute,
 } from '../../../helpers/domUtils';
 import { testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
@@ -12,56 +14,33 @@ const typedItems: Item[] = ['danger', 'default', 'normal', 'success'].map((type:
 const iconItems: Item[] = [
   { icon: 'find', text: 'find' },
   { icon: 'find' },
-  {
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" fill="currentColor">
-             <path d="M11.8834 3.00673L12 3C12.5128 3 12.9355 3.38604 12.9933 3.88338L13 4V11H20C20.5128 11 20.9355 11.386 20.9933 11.8834L21 12C21 12.5128 20.614 12.9355 20.1166 12.9933L20 13H13V20C13 20.5128 12.614 20.9355 12.1166 20.9933L12 21C11.4872 21 11.0645 20.614 11.0067 20.1166L11 20V13H4C3.48716 13 3.06449 12.614 3.00673 12.1166L3 12C3 11.4872 3.38604 11.0645 3.88338 11.0067L4 11H11V4C11 3.48716 11.386 3.06449 11.8834 3.00673L12 3L11.8834 3.00673Z"/>
-           </svg>`,
-  },
 ];
-const defaultItems: Item[] = [
+const items: Item[] = [
   ...typedItems,
   ...iconItems,
 ];
 
-fixture.disablePageReloads`ButtonGroup_Styles`
+fixture.disablePageReloads`ButtonGroup`
   .page(url(__dirname, '../../container.html'));
 
-['text', 'outlined', 'contained'].forEach((stylingMode) => {
-  test(`ButtonGroup-styling,stylingMode=${stylingMode}`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+test('ButtonGroup styling', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    await testScreenshot(t, takeScreenshot, `ButtonGroup render states mode=${stylingMode}.png`, { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'ButtonGroup styling.png', { element: '#container' });
 
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }).before(async () => {
-    await setStyleAttribute(Selector('#container'), 'width: 600px');
-    await setAttribute('#container', 'class', 'dx-theme-generic-typography');
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await setStyleAttribute(Selector('#container'), 'width: fit-content; padding: 8px; display: flex; gap: 16px; flex-direction: column;');
+  await setAttribute('#container', 'class', 'dx-theme-generic-typography');
 
-    // eslint-disable-next-line no-restricted-syntax
-    for (const state of [
-      'dx-state-default',
-      'dx-state-focused',
-      'dx-state-hover',
-      'dx-state-active',
-      'dx-state-selected',
-    ]) {
-      await appendElementTo('#container', 'div', `mode${state}`, {});
-      await addCaptionTo(`#mode${state}`, state, 'beforeend');
-      await appendElementTo('#container', 'div', `buttongroup${state}`, {});
+  const stylingModes = ['text', 'outlined', 'contained'];
 
-      const items = defaultItems.map((item) => ({
-        ...item,
-        elementAttr: { class: state },
-      }));
-
-      await createWidget('dxButtonGroup', {
-        elementAttr: { style: 'margin-bottom: 20px' },
-        items,
-        stylingMode,
-        selectionMode: 'none',
-      }, `#buttongroup${state}`);
-    }
-  });
+  await Promise.all(stylingModes.map((mode) => appendElementTo('#container', 'div', `buttongroup-${mode}`, {})));
+  await Promise.all(stylingModes.map((stylingMode) => createWidget('dxButtonGroup', {
+    items,
+    stylingMode,
+    selectionMode: 'none',
+  }, `#buttongroup-${stylingMode}`)));
 });

e2e/testcafe-devextreme/tests/navigation/splitter/integration.ts

@@ -14,7 +14,8 @@ safeSizeTest('The splitter pane should be rendered with the correct ratio inside
   const tabPanel = new TabPanel('#container');
 
   await t
-    .click(tabPanel.tabs.getItem(1).element);
+    .click(tabPanel.tabs.getItem(1).element)
+    .click(tabPanel.multiView.element);
 
   await testScreenshot(t, takeScreenshot, 'Splitter in tab content, pane_1.size=`100px`.png', { element: '#container' });