CardView: stabilize sorting visual tests (DevExpress#30026)

Author: wdevfx

e2e/testcafe-devextreme/tests/cardView/sorting/api.themes.ts

@@ -5,13 +5,19 @@ import { createWidget } from '../../../helpers/createWidget';
 import { data } from '../helpers/simpleArrayData';
 import { testScreenshot } from '../../../helpers/themeUtils';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`CardView - Sorting Behavior`
   .page(url(__dirname, '../../container.html'));
 
 const CARD_VIEW_SELECTOR = '#container';
 
-test('Sort index API', async (t) => {
+const baseConfig = {
+  dataSource: data,
+  height: 500,
+};
+
+safeSizeTest('Sort index API', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);
 
@@ -23,7 +29,7 @@ test('Sort index API', async (t) => {
   await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
 }).before(async () => {
   await createWidget('dxCardView', {
-    dataSource: data,
+    ...baseConfig,
     columns: [
       {
         dataField: 'id',
@@ -45,7 +51,7 @@ test('Sort index API', async (t) => {
   });
 });
 
-test('ShowSortIndexes API', async (t) => {
+safeSizeTest('ShowSortIndexes API', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);
 
@@ -57,7 +63,7 @@ test('ShowSortIndexes API', async (t) => {
   await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
 }).before(async () => {
   await createWidget('dxCardView', {
-    dataSource: data,
+    ...baseConfig,
     sorting: {
       showSortIndexes: false,
     },
@@ -82,7 +88,7 @@ test('ShowSortIndexes API', async (t) => {
   });
 });
 
-test('AllowSorting API', async (t) => {
+safeSizeTest('AllowSorting API', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);
 
@@ -97,7 +103,7 @@ test('AllowSorting API', async (t) => {
   await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
 }).before(async () => {
   await createWidget('dxCardView', {
-    dataSource: data,
+    ...baseConfig,
     sorting: {
       showSortIndexes: false,
     },
@@ -129,7 +135,7 @@ test('AllowSorting API', async (t) => {
   },
   'name',
 ].forEach((calculateSortValue) => {
-  test('CalculateSortValue API', async (t) => {
+  safeSizeTest('CalculateSortValue API', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
     const cardView = new CardView(CARD_VIEW_SELECTOR);
 
@@ -141,7 +147,7 @@ test('AllowSorting API', async (t) => {
     await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
   }).before(async () => {
     await createWidget('dxCardView', {
-      dataSource: data,
+      ...baseConfig,
       sorting: {
         showSortIndexes: false,
       },
@@ -165,7 +171,7 @@ test('AllowSorting API', async (t) => {
   });
 });
 
-test('SortingMethod API', async (t) => {
+safeSizeTest('SortingMethod API', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);
 
@@ -177,7 +183,7 @@ test('SortingMethod API', async (t) => {
   await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
 }).before(async () => {
   await createWidget('dxCardView', {
-    dataSource: data,
+    ...baseConfig,
     sorting: {
       showSortIndexes: false,
     },

e2e/testcafe-devextreme/tests/cardView/sorting/behavior.themes.ts

@@ -5,13 +5,19 @@ import { createWidget } from '../../../helpers/createWidget';
 import { data } from '../helpers/simpleArrayData';
 import { testScreenshot } from '../../../helpers/themeUtils';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`CardView - Sorting Behavior - Themes`
   .page(url(__dirname, '../../container.html'));
 
 const CARD_VIEW_SELECTOR = '#container';
 
-test('Default render', async (t) => {
+const baseConfig = {
+  dataSource: data,
+  height: 500,
+};
+
+safeSizeTest('Default render', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);
 
@@ -23,7 +29,7 @@ test('Default render', async (t) => {
   await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
 }).before(async () => {
   await createWidget('dxCardView', {
-    dataSource: data,
+    ...baseConfig,
     columns: [
       {
         dataField: 'id',
@@ -42,7 +48,7 @@ test('Default render', async (t) => {
   });
 });
 
-test('Default multiple sorting render', async (t) => {
+safeSizeTest('Default multiple sorting render', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);
   await testScreenshot(t, takeScreenshot, 'cardview_headers_with_multiple_sorting_render.png', { element: cardView.element });
@@ -54,7 +60,7 @@ test('Default multiple sorting render', async (t) => {
   await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
 }).before(async () => {
   await createWidget('dxCardView', {
-    dataSource: data,
+    ...baseConfig,
     columns: [
       {
         dataField: 'id',