List, Stepper: reduce screenshot test cases

e2e/testcafe-devextreme/tests/navigation/list/focus.ts

@@ -1,6 +1,4 @@
-import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import List from 'devextreme-testcafe-models/list';
-import { testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 
@@ -16,97 +14,55 @@ const createList = (selectionMode, allowItemDeleting = false) => createWidget('d
   allowItemDeleting,
 });
 
-test('Should not focus item when deleting when focusStateEnabled = false (T1226030)', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const list = new List('#container');
-  await list.option({
-    focusStateEnabled: false,
-    itemDeleteMode: 'static',
-  });
-  const firstItem = list.getItem(0);
-  const $firstDeleteBtn = firstItem.element.find(`.${LIST_ITEM_DELETE_BUTTON}`);
-
-  await t
-    .click($firstDeleteBtn)
-    .expect(firstItem.isFocused)
-    .notOk();
-  await testScreenshot(t, takeScreenshot, 'First item should not be focused when deleted.png', { element: '#container' });
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => createList('none', true));
+[true, false].forEach((focusStateEnabled) => {
+  test(`Should${focusStateEnabled ? '' : ' not'} focus item when deleting when focusStateEnabled=${focusStateEnabled} (T1226030)`, async (t) => {
+    const list = new List('#container');
+    const firstItem = list.getItem(0);
+    const $firstDeleteBtn = firstItem.element.find(`.${LIST_ITEM_DELETE_BUTTON}`);
 
-test('Should focus item when deleting when focusStateEnabled = true (T1226030)', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const list = new List('#container');
-  await list.option({
+    await t
+      .click($firstDeleteBtn)
+      .expect(firstItem.isFocused)
+      .eql(focusStateEnabled);
+  }).before(async () => createWidget('dxList', {
+    items: ['item1', 'item2', 'item3'],
+    selectionMode: 'none',
+    allowItemDeleting: true,
     itemDeleteMode: 'static',
-  });
-  const firstItem = list.getItem(0);
-  const $firstDeleteBtn = firstItem.element.find(`.${LIST_ITEM_DELETE_BUTTON}`);
-
-  await t
-    .click($firstDeleteBtn)
-    .expect(firstItem.isFocused)
-    .ok();
-  await testScreenshot(t, takeScreenshot, 'First item should be focused when deleted.png', { element: '#container' });
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => createList('none', true));
+    focusStateEnabled,
+  }));
+});
 
 test('Should apply styles on selectAll checkbox after tab button press', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const list = new List('#container');
 
   await t
     .pressKey('tab')
     .expect(list.selectAll.checkBox.isFocused)
     .ok();
-
-  await testScreenshot(t, takeScreenshot, 'List selectAll checkbox should be focused after tab press.png', { element: '#container' });
-
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
 }).before(async () => createList('all'));
 
 test('Should apply styles on selectAll checkbox after enter button press on it', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const list = new List('#container');
 
   await t
     .pressKey('tab')
     .pressKey('enter')
     .expect(list.selectAll.checkBox.isChecked)
     .ok();
-
-  await testScreenshot(t, takeScreenshot, 'List selectAll checkbox should be checked after enter press.png', { element: '#container' });
-
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
 }).before(async () => createList('all'));
 
 ['single', 'multiple'].forEach((selectionMode) => {
   test(`Should apply styles on list item after tab button press, ${selectionMode} mode`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
     const list = new List('#container');
 
     await t
       .pressKey('tab')
       .expect(list.getItem(0).isFocused)
       .ok();
-
-    await testScreenshot(t, takeScreenshot, `List item should be focused after tab press in ${selectionMode} mode.png`, { element: '#container' });
-
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
   }).before(async () => createList(selectionMode));
 
   test(`Should apply styles on list item after enter button press on it, ${selectionMode} mode`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
     const list = new List('#container');
 
     const firstItem = list.getItem(0);
@@ -117,12 +73,6 @@ test('Should apply styles on selectAll checkbox after enter button press on it',
       .pressKey('enter')
       .expect(firstItemType.isChecked)
       .ok();
-
-    await testScreenshot(t, takeScreenshot, `List item should be checked after enter press in ${selectionMode} mode.png`, { element: '#container' });
-
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
   }).before(async () => createList(selectionMode));
 });
 
@@ -137,12 +87,9 @@ test('Should select next item after delete by keyboard', async (t) => {
 
   const item = list.getItem(0);
 
-  await t.expect(item.isFocused)
-    .ok();
-  await t.expect(item.text)
-    .eql('item2');
-  await t
-    .expect(list.getItems().count).eql(2);
+  await t.expect(item.isFocused).ok();
+  await t.expect(item.text).eql('item2');
+  await t.expect(list.getItems().count).eql(2);
 }).before(async () => createList('none', true));
 
 test('Should select previous item after delete last item', async (t) => {
@@ -156,12 +103,9 @@ test('Should select previous item after delete last item', async (t) => {
 
   const item = list.getItem(1);
 
-  await t.expect(item.isFocused)
-    .ok();
-  await t.expect(item.text)
-    .eql('item2');
-  await t
-    .expect(list.getItems().count).eql(2);
+  await t.expect(item.isFocused).ok();
+  await t.expect(item.text).eql('item2');
+  await t.expect(list.getItems().count).eql(2);
 }).before(async () => createList('none', true));
 
 [[2, 0], [1, 2]].forEach(([selectItemIdx, deleteItemIdx]) => {
@@ -177,11 +121,8 @@ test('Should select previous item after delete last item', async (t) => {
 
     const item = list.getItem(deleteItemIdx > selectItemIdx ? selectItemIdx : selectItemIdx - 1);
 
-    await t.expect(item.isFocused)
-      .ok();
-    await t.expect(item.text)
-      .eql(`item${selectItemIdx + 1}`);
-    await t
-      .expect(list.getItems().count).eql(2);
+    await t.expect(item.isFocused).ok();
+    await t.expect(item.text).eql(`item${selectItemIdx + 1}`);
+    await t.expect(list.getItems().count).eql(2);
   }).before(async () => createList('none', true));
 });

e2e/testcafe-devextreme/tests/navigation/list/grouping.ts

@@ -3,38 +3,11 @@ import List from 'devextreme-testcafe-models/list';
 import { testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
+import { appendElementTo, setAttribute } from '../../../helpers/domUtils';
 
 fixture.disablePageReloads`Grouping`
   .page(url(__dirname, '../../container.html'));
 
-test('Grouped List last item of last group should have proper margin-bottom', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-  const list = new List('#container');
-  const lastItemIndex = list.getItems().length - 1;
-
-  await t
-    .hover(list.getItem(lastItemIndex).element)
-    .expect(list.getItem(lastItemIndex).isHovered)
-    .ok();
-
-  await testScreenshot(t, takeScreenshot, 'Grouped List with correct margin bottom.png', { element: '#container' });
-
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxList', {
-  dataSource: [{
-    key: 'One',
-    items: ['1_1', '1_2', '1_3'],
-  }, {
-    key: 'Two',
-    items: ['2_1', '2_2', '2_3'],
-  }],
-  grouped: true,
-  collapsibleGroups: false,
-}));
-
 test('Grouped list appearance', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -44,15 +17,15 @@ test('Grouped list appearance', async (t) => {
     .click(list.getItem(2).element)
     .pressKey('down');
 
-  await testScreenshot(t, takeScreenshot, 'Grouped list with focused header.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Grouped list appearance, header focused.png', { element: '#container' });
 
   await t
     .click(list.getGroup(0).header)
     .click(list.getGroup(2).header)
     .click(list.getItem(4).element)
     .hover(list.getGroup(1).header);
 
-  await testScreenshot(t, takeScreenshot, 'Grouped list appearance.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Grouped list appearance, item focused, header hovered.png', { element: '#container' });
 
   await list.option('collapsibleGroups', false);
 
@@ -63,7 +36,6 @@ test('Grouped list appearance', async (t) => {
     .ok(compareResults.errorMessages());
 }).before(async () => createWidget('dxList', {
   width: 300,
-  height: 800,
   dataSource: [
     {
       key: 'group_1',
@@ -95,26 +67,37 @@ test('Grouped list appearance', async (t) => {
   },
 }));
 
-[true, false].forEach((rtlEnabled) => {
-  test(`Grouped list appearance with template. rtlEnabled=${rtlEnabled}`, async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+test('Grouped list appearance with template', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    const list = new List('#container');
+  const list = new List('#list-rtl-false');
+  const list2 = new List('#list-rtl-true');
 
-    await t
-      .click(list.getGroup(0).header)
-      .click(list.getGroup(2).header)
-      .click(list.getItem(4).element)
-      .hover(list.getGroup(1).header);
+  await t
+    .click(list.getGroup(0).header)
+    .click(list.getGroup(2).header)
+    .click(list2.getGroup(0).header)
+    .click(list2.getGroup(2).header)
+    .click('#container');
 
-    await testScreenshot(t, takeScreenshot, `Grouped list appearance with template. rtlEnabled=${rtlEnabled}.png`, { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Grouped list appearance with template.png', { element: '#container' });
 
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }).before(async () => createWidget('dxList', {
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await setAttribute('#container', 'style', 'display: flex; gap: 40px; padding: 8px; width: fit-content;');
+
+  const dataSource = [
+    { key: 'One', items: ['1_1', '1_2', '1_3'] },
+    { key: 'Two', items: ['2_1', '2_2', '2_3'] },
+    { key: 'Three', items: ['3_1', '3_2', '3_3'] },
+  ];
+
+  await Promise.all([false, true].map((rtlEnabled) => appendElementTo('#container', 'div', `list-rtl-${rtlEnabled}`)));
+  await Promise.all([false, true].map((rtlEnabled) => createWidget('dxList', {
+    dataSource,
     width: 300,
-    height: 500,
     groupTemplate(data) {
       const wrapper = $('<div>');
 
@@ -123,22 +106,8 @@ test('Grouped list appearance', async (t) => {
 
       return wrapper;
     },
-    dataSource: [
-      {
-        key: 'One',
-        items: ['1_1', '1_2', '1_3'],
-      },
-      {
-        key: 'Two',
-        items: ['2_1', '2_2', '2_3'],
-      },
-      {
-        key: 'Three',
-        items: ['3_1', '3_2', '3_3'],
-      },
-    ],
     collapsibleGroups: true,
     grouped: true,
     rtlEnabled,
-  }));
+  }, `#list-rtl-${rtlEnabled}`)));
 });

e2e/testcafe-devextreme/tests/navigation/list/paging.ts

@@ -100,7 +100,7 @@ test('Should initiate load next page if some items in the current load are invis
     .expect(list.getVisibleItems().count)
     .eql(isMaterial() ? 4 : 6);
 
-  await testScreenshot(t, takeScreenshot, 'List loding with part items invisible on loaded page.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'List loading with part items invisible on loaded page.png', { element: '#container' });
 
   await t
     .expect(compareResults.isValid())

e2e/testcafe-devextreme/tests/navigation/list/search.ts

@@ -1,41 +1,33 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
-import List from 'devextreme-testcafe-models/list';
 import { testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
+import { appendElementTo, setAttribute } from '../../../helpers/domUtils';
 
 fixture.disablePageReloads`Search`
   .page(url(__dirname, '../../container.html'));
 
 test('List with search bar appearance', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const list = new List('#container');
 
-  await testScreenshot(t, takeScreenshot, 'List with search and multiple selection.png', {
-    element: '#container',
-    shouldTestInCompact: true,
-  });
-
-  await list.option('selectionMode', 'single');
-
-  await testScreenshot(t, takeScreenshot, 'List with search and single selection.png', {
-    element: '#container',
-    shouldTestInCompact: true,
-  });
+  await testScreenshot(t, takeScreenshot, 'List with search.png', { element: '#container' });
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 }).before(async () => {
-  const dataSource = Array.from({ length: 40 }, (_, i) => `Item_${i + 1}`);
+  await setAttribute('#container', 'style', 'display: flex; gap: 40px; padding: 8px; width: fit-content;');
+
+  const dataSource = Array.from({ length: 8 }, (_, i) => `Item_${i + 1}`);
+  const selectionModes = ['none', 'single', 'multiple', 'all'];
 
-  return createWidget('dxList', {
+  await Promise.all(selectionModes.map((mode) => appendElementTo('#container', 'div', `list-${mode}`)));
+  await Promise.all(selectionModes.map((mode) => createWidget('dxList', {
     dataSource,
     height: 400,
     width: 200,
     searchEnabled: true,
     showSelectionControls: true,
-    selectionMode: 'all',
-    selectByClick: false,
-  });
+    selectionMode: mode,
+  }, `#list-${mode}`)));
 });

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

@@ -22,7 +22,6 @@ const commonItems: Item[] = [
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
     await testScreenshot(t, takeScreenshot, `Stepper orient=${orientation}.png`, {
       element: '#container',
-      shouldTestInCompact: true,
     });
 
     await t