e2e tests: remove safeTestSize utility

Author: EugeniyKiyashko

e2e/testcafe-devextreme/helpers/safeSizeTest.ts

@@ -265,7 +265,10 @@ createTestCafe(TESTCAFE_CONFIG)
 
               await t.hover('html');
 
-              const [width, height] = DEFAULT_BROWSER_SIZE;
+              // @ts-expect-error ts-errors
+              const { meta } = t.testRun.test;
+
+              const [width, height] = meta?.browserSize || DEFAULT_BROWSER_SIZE;
               await t.resizeWindow(width, height);
             } else {
               await loadAxeCore(t);

e2e/testcafe-devextreme/runner.ts

@@ -4,7 +4,6 @@ import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { columns, data } from '../helpers/simpleArrayData';
 import { testScreenshot } from '../../../helpers/themeUtils';
-import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`CardView - Editing`
   .page(url(__dirname, '../../container.html'));
@@ -22,7 +21,7 @@ const baseConfig = {
   },
 };
 
-safeSizeTest('default render', async (t) => {
+test.meta({ browserSize: [1100, 700] })('default render', async (t) => {
   const cardView = new CardView(CARD_VIEW_SELECTOR);
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -31,9 +30,9 @@ safeSizeTest('default render', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [1100, 700]).before(async () => createWidget('dxCardView', baseConfig));
+}).before(async () => createWidget('dxCardView', baseConfig));
 
-safeSizeTest('render of add card popup', async (t) => {
+test.meta({ browserSize: [1100, 700] })('render of add card popup', async (t) => {
   const cardView = new CardView(CARD_VIEW_SELECTOR);
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -43,9 +42,9 @@ safeSizeTest('render of add card popup', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [1100, 700]).before(async () => createWidget('dxCardView', baseConfig));
+}).before(async () => createWidget('dxCardView', baseConfig));
 
-safeSizeTest('render of edit card popup', async (t) => {
+test.meta({ browserSize: [1100, 700] })('render of edit card popup', async (t) => {
   const cardView = new CardView(CARD_VIEW_SELECTOR);
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -55,4 +54,4 @@ safeSizeTest('render of edit card popup', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [1100, 700]).before(async () => createWidget('dxCardView', baseConfig));
+}).before(async () => createWidget('dxCardView', baseConfig));

e2e/testcafe-devextreme/tests/cardView/editing/editing.visual.ts

@@ -3,14 +3,13 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { testScreenshot } from '../../helpers/themeUtils';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
-import { safeSizeTest } from '../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`CardView - LoadPanel`
   .page(url(__dirname, '../container.html'));
 
 const CARD_VIEW_SELECTOR = '#container';
 
-safeSizeTest('Default render', async (t) => {
+test.meta({ browserSize: [800, 800] })('Default render', async (t) => {
   const cardView = new CardView(CARD_VIEW_SELECTOR);
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -19,7 +18,7 @@ safeSizeTest('Default render', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [800, 800]).before(async () => createWidget('dxCardView', {
+}).before(async () => createWidget('dxCardView', {
   width: 500,
   height: 300,
   dataSource: {
@@ -29,15 +28,15 @@ safeSizeTest('Default render', async (t) => {
   columns: ['A', 'B', 'C', 'D'],
 }));
 
-safeSizeTest('Default render when CardView has a large height', async (t) => {
+test.meta({ browserSize: [800, 800] })('Default render when CardView has a large height', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   await testScreenshot(t, takeScreenshot, 'load-panel-with-large-height.png');
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [800, 800]).before(async () => createWidget('dxCardView', {
+}).before(async () => createWidget('dxCardView', {
   width: 500,
   height: 3000,
   dataSource: {
@@ -47,7 +46,7 @@ safeSizeTest('Default render when CardView has a large height', async (t) => {
   columns: ['A', 'B', 'C', 'D'],
 }));
 
-safeSizeTest('The load panel should match the size of the component’s root container', async (t) => {
+test.meta({ browserSize: [800, 800] })('The load panel should match the size of the component’s root container', async (t) => {
   const cardView = new CardView(CARD_VIEW_SELECTOR);
   const loadPanel = cardView.getLoadPanel();
   const cardViewOffset = await cardView.getElementOffset();
@@ -59,7 +58,7 @@ safeSizeTest('The load panel should match the size of the component’s root con
     .eql(300)
     .expect(loadPanel.getShadowOffset())
     .eql(cardViewOffset);
-}, [800, 800]).before(async () => createWidget('dxCardView', {
+}).before(async () => createWidget('dxCardView', {
   width: 500,
   height: 300,
   dataSource: {

e2e/testcafe-devextreme/tests/cardView/loadPanel.visual.ts

@@ -4,7 +4,6 @@ import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { data } from '../helpers/simpleArrayData';
 import { testScreenshot } from '../../../helpers/themeUtils';
-import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`CardView - Sorting Behavior - Themes`
   .page(url(__dirname, '../../container.html'));
@@ -16,7 +15,7 @@ const baseConfig = {
   height: 500,
 };
 
-safeSizeTest('Default render', async (t) => {
+test('Default render', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);
 
@@ -45,7 +44,7 @@ safeSizeTest('Default render', async (t) => {
   });
 });
 
-safeSizeTest('Default multiple sorting render', async (t) => {
+test('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 });

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

@@ -1,12 +1,11 @@
 import TreeList from 'devextreme-testcafe-models/treeList';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`Adaptive Row`
   .page(url(__dirname, '../container.html'));
 
-safeSizeTest('Should be shown and hidden when the window is resized', async (t) => {
+test.meta({ browserSize: [400, 400] })('Should be shown and hidden when the window is resized', async (t) => {
   const treeList = new TreeList('#container');
   await treeList.isReady();
 
@@ -20,7 +19,7 @@ safeSizeTest('Should be shown and hidden when the window is resized', async (t)
 
   await t.expect(treeList.isAdaptiveColumnHidden()).ok();
   await t.expect(treeList.getAdaptiveRow(0).element.exists).notOk();
-}, [400, 400]).before(async () => createWidget('dxTreeList', {
+}).before(async () => createWidget('dxTreeList', {
   dataSource: [{
     ID: 1,
     Head_ID: -1,

e2e/testcafe-devextreme/tests/common/treeList/adaptiveRow.ts

@@ -4,7 +4,6 @@ import TreeList from 'devextreme-testcafe-models/treeList';
 import CheckBox from 'devextreme-testcafe-models/checkBox';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { safeSizeTest } from '../../../helpers/safeSizeTest';
 import { testScreenshot } from '../../../helpers/themeUtils';
 
 const scrollWindowTo = async (position: object) => {
@@ -106,7 +105,7 @@ test('The vertical scroll bar of the container\'s parent should not be displayed
 });
 
 // T1189118
-safeSizeTest('All items should be selected after select all and scroll down', async (t) => {
+test.meta({ browserSize: [800, 800] })('All items should be selected after select all and scroll down', async (t) => {
   // arrange
   const treeList = new TreeList('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -133,7 +132,7 @@ safeSizeTest('All items should be selected after select all and scroll down', as
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [800, 800]).before(async () => createWidget('dxTreeList', {
+}).before(async () => createWidget('dxTreeList', {
   dataSource: generateData(100),
   height: 400,
   rootValue: -1,

e2e/testcafe-devextreme/tests/common/treeList/scrolling.ts

@@ -2,7 +2,6 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import TreeList from 'devextreme-testcafe-models/treeList';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
-import { safeSizeTest } from '../../../../helpers/safeSizeTest';
 import { testScreenshot } from '../../../../helpers/themeUtils';
 
 const TREE_LIST_SELECTOR = '#container';
@@ -13,7 +12,7 @@ fixture.disablePageReloads`Sticky columns - Drag and Drop`
 // visual: generic.light
 // visual: material.blue.light
 // visual: fluent.blue.light
-safeSizeTest('Header hover should display correctly when there are fixed columns', async (t) => {
+test.meta({ browserSize: [900, 800] })('Header hover should display correctly when there are fixed columns', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const treeList = new TreeList(TREE_LIST_SELECTOR);
   const headerCell = treeList.getHeaders().getHeaderRow(0).getHeaderCell(13);
@@ -29,7 +28,7 @@ safeSizeTest('Header hover should display correctly when there are fixed columns
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [900, 800])
+})
   .before(async () => {
     await createWidget('dxTreeList', {
       dataSource: new Array(20).fill(null).map((_, index) => {

e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/stickyColumns.ts

@@ -22,8 +22,10 @@
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-quill.min.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-gantt.min.js"></script>
+    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-gantt.min.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.aspnet.data.js"></script>
+
     <style>
         * { caret-color: transparent !important; }
         .dx-scheduler .dx-scrollable-scroll { visibility: hidden !important; }

e2e/testcafe-devextreme/tests/container.html

@@ -1,12 +1,11 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`Adaptive Row`
   .page(url(__dirname, '../../container.html'));
 
-safeSizeTest('Should be shown and hidden when the window is resized', async (t) => {
+test.meta({ browserSize: [400, 400] })('Should be shown and hidden when the window is resized', async (t) => {
   const dataGrid = new DataGrid('#container');
   await dataGrid.isReady();
 
@@ -20,7 +19,7 @@ safeSizeTest('Should be shown and hidden when the window is resized', async (t)
 
   await t.expect(dataGrid.isAdaptiveColumnHidden()).ok();
   await t.expect(dataGrid.getAdaptiveRow(0).element.exists).notOk();
-}, [400, 400]).before(async () => createWidget('dxDataGrid', {
+}).before(async () => createWidget('dxDataGrid', {
   dataSource: [{
     ID: 1,
     Head_ID: -1,