TestCafe: bump version to 3.6.2

e2e/testcafe-devextreme/helpers/clearPage.js

@@ -2,7 +2,7 @@
 const testCafe = require('testcafe');
 
 module.exports = {
-    clearTestPage: async function() {
+    clearTestPage: async function(t) {
         const shadowDom = process.env.shadowDom === 'true';
 
         await testCafe.ClientFunction(() => {
@@ -46,6 +46,6 @@ module.exports = {
             dependencies: {
                 shadowDom,
             }
-        })();
+        }).with({ boundTestRun: t })();
     }
 };

e2e/testcafe-devextreme/package.json

@@ -17,6 +17,6 @@
     "minimist": "1.2.8",
     "mockdate": "3.0.5",
     "nconf": "0.12.1",
-    "testcafe": "2.5.0"
+    "testcafe": "3.6.2"
   }
 }

e2e/testcafe-devextreme/runner.js

@@ -113,24 +113,28 @@ createTestCafe({
             quarantineMode: { successThreshold: 1, attemptLimit: 5 },
         };
 
-        if(args.componentFolder.trim() !== 'renovation') {
-            runOptions.hooks = {
-                test: {
-                    before: async() => {
-                        if(args.shadowDom) {
-                            await addShadowRootTree();
-                        }
-
-                        if(args.theme) {
-                            await changeTheme(args.theme);
-                        }
-                    },
-                    after: async() => {
-                        await testPageUtils.clearTestPage();
+        runOptions.hooks = {
+            test: {
+                before: async() => {
+                    if(args.shadowDom) {
+                        await addShadowRootTree();
+                    }
+
+                    if(args.theme) {
+                        await changeTheme(args.theme);
                     }
                 },
-            };
-        }
+                after: async(t) => {
+                    await testPageUtils.clearTestPage(t);
+
+                    await createTestCafe.ClientFunction(() => {
+                        document.body.style.minHeight = '100px';
+                    }).with({ boundTestRun: t })();
+
+                    await t.click(createTestCafe.Selector('body'), { offsetX: -1, offsetY: 1 });
+                }
+            },
+        };
 
         if(args.browsers === 'chrome:docker') {
             runOptions.disableScreenshots = true;
@@ -158,7 +162,7 @@ function setShadowDom(args) {
 function expandBrowserAlias(browser) {
     switch(browser) {
         case 'chrome:devextreme-shr2':
-            return 'chrome:headless --disable-gpu --window-size=1200,800';
+            return 'chrome --headless=old --disable-gpu --window-size=1200,800';
         case 'chrome:docker':
             return 'chromium:headless --no-sandbox --disable-gpu --window-size=1200,800';
     }

e2e/testcafe-devextreme/tests/accessibility/map.ts

@@ -3,8 +3,10 @@ import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
 
-fixture.disablePageReloads`Accessibility`
-  .page(url(__dirname, '../container.html'));
+fixture`Accessibility`
+  .page(url(__dirname, '../container.html'))
+  // avoid `sj_evt is not defined` error
+  .skipJsErrors();
 
 const markersData = [
   { location: '40.7825, -73.966111' },
@@ -18,21 +20,27 @@ const options: Options<Properties> = {
   apiKey: [{
     bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
   }],
-  hint: [undefined, 'hint'],
   controls: [true, false],
   zoom: [undefined, 10],
   markers: [markersData],
 };
 
 const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
+  rules: {
+    'color-contrast': { enabled: false },
+    'aria-command-name': { enabled: false },
+  },
+};
+
+const created = async (t: TestController): Promise<void> => {
+  await t.wait(3000);
 };
 
 const configuration: Configuration = {
   component: 'dxMap',
   a11yCheckConfig,
   options,
+  created,
 };
 
 testAccessibility(configuration);

e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/keyboardNavigation.functional.ts

@@ -2166,6 +2166,7 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
     const dataGrid = new DataGrid('#container');
     const headers = dataGrid.getHeaders();
     const dataGridOffsetBottom = await dataGrid.element.getBoundingClientRectProperty('bottom');
+    await t.expect(dataGrid.isReady()).ok();
 
     async function checkNavigationOfAllCells(): Promise<void> {
       await t
@@ -2248,6 +2249,7 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
   test(`The cell focus should be restored on pressing shift and tab keys when command column is ${isCommandColumnFixed ? 'fixed' : 'unfixed'} and on the left side (T951849)`, async (t) => {
     const dataGrid = new DataGrid('#container');
     const headers = dataGrid.getHeaders();
+    await t.expect(dataGrid.isReady()).ok();
 
     async function checkNavigationOfAllCells(): Promise<void> {
       await t
@@ -2329,6 +2331,7 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
     const dataGrid = new DataGrid('#container');
     const headers = dataGrid.getHeaders();
     const dataGridOffsetBottom = await dataGrid.element.getBoundingClientRectProperty('bottom');
+    await t.expect(dataGrid.isReady()).ok();
 
     async function checkNavigationOfAllCells(): Promise<void> {
       await t
@@ -2412,6 +2415,7 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
 
   test(`The first cell should be focused on pressing shift and tab keys after clicking on the document when command column is ${isCommandColumnFixed ? 'fixed' : 'unfixed'} and on the right side (T951849)`, async (t) => {
     const dataGrid = new DataGrid('#container');
+    await t.expect(dataGrid.isReady()).ok();
     const headers = dataGrid.getHeaders();
     const dataGridOffsetBottom = await dataGrid.element.getBoundingClientRectProperty('bottom');
 
@@ -2447,14 +2451,15 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
     }
 
     await checkNavigationOfAllCells();
+    await t.expect(dataGrid.isReady()).ok();
 
     await t
       .click(Selector('body'), {
         offsetY: dataGridOffsetBottom + 10,
       })
       .pressKey('shift+tab')
-      .expect(dataGrid.getDataCell(0, 0).element.focused)
-      .ok();
+      .expect(dataGrid.isReady()).ok()
+      .expect(dataGrid.getDataCell(0, 0).element.focused).ok();
   }).before(async () => {
     await createWidget('dxDataGrid', {
       dataSource: [
@@ -2481,6 +2486,7 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
   test(`The cell focus should be restored on pressing shift and tab keys when command column is ${isCommandColumnFixed ? 'fixed' : 'unfixed'} and on the right side (T951849)`, async (t) => {
     const dataGrid = new DataGrid('#container');
     const headers = dataGrid.getHeaders();
+    await t.expect(dataGrid.isReady()).ok();
 
     async function checkNavigationOfAllCells(): Promise<void> {
       await t

e2e/testcafe-devextreme/tests/dataGrid/tagBox.ts

@@ -17,6 +17,8 @@ fixture.disablePageReloads`Tagbox Columns`.page(
       const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
       await t
         .click(dataGrid.getDataCell(0, 1).element)
+        .expect(dataGrid.isReady())
+        .ok()
         .expect(
           await takeScreenshot(
             `T1228720-grid-tagbox-on-edit_(${theme}).png`,

e2e/testcafe-devextreme/tests/editors/dateRangeBox/keyboard.ts

@@ -2,7 +2,7 @@ import { Selector } from 'testcafe';
 import DateRangeBox from 'devextreme-testcafe-models/dateRangeBox';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { appendElementTo } from '../../../helpers/domUtils';
+import { appendElementTo, insertStylesheetRulesToPage } from '../../../helpers/domUtils';
 
 fixture.disablePageReloads`DateRangeBox keyboard navigation`
   .page(url(__dirname, '../../container.html'));
@@ -1250,10 +1250,10 @@ test('DateRangeBox keyboard navigation via `shift+tab` key if applyValueMode is
 });
 
 test('DateRangeBox should not be closed by press shift+tab key on endDate input', async (t) => {
-  const dateRangeBox = new DateRangeBox('#container');
+  const dateRangeBox = new DateRangeBox('#dateRangeBox');
 
   await t
-    .click(Selector('body'), { offsetX: -50 })
+    .click(Selector('#nextFocusableElement'))
     .pressKey('shift+tab');
 
   await t
@@ -1279,18 +1279,29 @@ test('DateRangeBox should not be closed by press shift+tab key on endDate input'
     .eql(false)
     .expect(dateRangeBox.isFocused)
     .notOk();
-}).before(async () => createWidget('dxDateRangeBox', {
-  value: ['2021/09/17', '2021/10/24'],
-  openOnFieldClick: true,
-  opened: true,
-  width: 500,
-  dropDownOptions: {
-    hideOnOutsideClick: false,
-  },
-  calendarOptions: {
-    focusStateEnabled: false,
-  },
-}));
+}).before(async () => {
+  await insertStylesheetRulesToPage('#container { display: flex; }');
+
+  await appendElementTo('#container', 'div', 'dateRangeBox');
+  await appendElementTo('#container', 'div', 'nextFocusableElement');
+
+  await createWidget('dxDateRangeBox', {
+    value: ['2021/09/17', '2021/10/24'],
+    openOnFieldClick: true,
+    opened: true,
+    width: 500,
+    dropDownOptions: {
+      hideOnOutsideClick: false,
+    },
+    calendarOptions: {
+      focusStateEnabled: false,
+    },
+  }, '#dateRangeBox');
+
+  await createWidget('dxButton', {
+    text: 'Next Focusable Element',
+  }, '#nextFocusableElement');
+});
 
 [
   { key: 'left', offsetInDays: -1 },

e2e/testcafe-devextreme/tests/editors/lookup/common.ts

@@ -35,6 +35,8 @@ test('Popup should not be closed if lookup is placed at the page bottom (T101803
   await t
     .expect(await lookup.isOpened())
     .ok();
+
+  await lookup.close();
 }).before(async () => createWidget('dxLookup', {
   items: [1, 2, 3],
   usePopover: false,

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

@@ -103,7 +103,7 @@ safeSizeTest('Menu delimiter appearance when orientation is horizontal', async (
 
   await testScreenshot(t, takeScreenshot, 'Delimiter, horizontal menu, submenu less than root item.png');
 
-  await setAttribute('#container', 'style', 'padding-top: 450px;');
+  await setAttribute('#container', 'style', 'padding-top: 430px;');
 
   await t
     .click(menu.getItem(1))
@@ -117,15 +117,15 @@ safeSizeTest('Menu delimiter appearance when orientation is horizontal', async (
 
   await testScreenshot(t, takeScreenshot, 'Delimiter, horizontal menu, submenu less than root item, bottom collision.png');
 
-  await setAttribute('#container', 'style', 'padding-left: 100px;');
+  await setAttribute('#container', 'style', 'padding-left: 80px;');
 
   await t
     .click(menu.getItem(3))
     .pressKey('down');
 
   await testScreenshot(t, takeScreenshot, 'Delimiter, horizontal menu, right collision.png');
 
-  await setAttribute('#container', 'style', 'padding-top: 450px; padding-left: 100px;');
+  await setAttribute('#container', 'style', 'padding-top: 400px; padding-left: 80px;');
 
   await t
     .click(menu.getItem(2))
@@ -147,6 +147,9 @@ safeSizeTest('Menu delimiter appearance when orientation is horizontal', async (
     }, {
       id: '2_2',
       text: 'SuperLED 42',
+    }, {
+      id: '2_2',
+      text: 'SuperLED 60',
     }],
   }, {
     text: 'Monitors',
@@ -162,6 +165,12 @@ safeSizeTest('Menu delimiter appearance when orientation is horizontal', async (
     items: [{
       id: '4_1',
       text: 'Projector Plus',
+    }, {
+      id: '4_2',
+      text: 'Projector PlusHD',
+    }, {
+      id: '4_3',
+      text: 'Projector & Screens',
     }],
   }] as Item[];
 
@@ -178,7 +187,7 @@ safeSizeTest('Menu delimiter appearance when orientation is vertical', async (t)
 
   await testScreenshot(t, takeScreenshot, 'Delimiter appearance, orientation is vertical.png');
 
-  await setAttribute('#container', 'style', 'padding-top: 400px;');
+  await setAttribute('#container', 'style', 'padding-top: 300px;');
 
   await t
     .click(menu.getItem(1))
@@ -187,14 +196,14 @@ safeSizeTest('Menu delimiter appearance when orientation is vertical', async (t)
 
   await testScreenshot(t, takeScreenshot, 'Delimiter appearance, orientation is vertical, bottom collision.png');
 
-  await setAttribute('#container', 'style', 'padding-top: 0px; padding-left: 350px;');
+  await setAttribute('#container', 'style', 'padding-top: 0px; padding-left: 340px;');
 
   await t
     .click(menu.getItem(2));
 
   await testScreenshot(t, takeScreenshot, 'Delimiter appearance, orientation is vertical, right collision.png');
 
-  await setAttribute('#container', 'style', 'padding-top: 400px; padding-left: 350px;');
+  await setAttribute('#container', 'style', 'padding-top: 300px; padding-left: 300px;');
 
   await t
     .click(menu.getItem(0))
@@ -216,6 +225,18 @@ safeSizeTest('Menu delimiter appearance when orientation is vertical', async (t)
     }, {
       id: '2_2',
       text: 'SuperLED 42',
+    }, {
+      id: '2_3',
+      text: 'SuperLED 60',
+    }, {
+      id: '2_4',
+      text: 'SuperLED 72',
+    }, {
+      id: '2_5',
+      text: 'SuperLED 80',
+    }, {
+      id: '2_6',
+      text: 'SuperLED 91',
     }],
   }, {
     text: 'Monitors',

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

@@ -1,4 +1,3 @@
-import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Splitter from 'devextreme-testcafe-models/splitter';
 import url from '../../../helpers/getPageUrl';
@@ -37,8 +36,6 @@ fixture.disablePageReloads`Splitter_common`
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
     const splitter = new Splitter('#container');
 
-    await t.click(Selector('body'), { offsetX: -50 });
-
     await testScreenshot(t, takeScreenshot, getScreenshotName('normal'), { element: '#container' });
     await testScreenshot(t, takeScreenshot, getScreenshotName('normal'), { element: '#container', theme: darkTheme });
 

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

@@ -1,12 +1,10 @@
 import Splitter from 'devextreme-testcafe-models/splitter';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { clearTestPage } from '../../../helpers/clearPage';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`Splitter_integration`
-  .page(url(__dirname, '../../container.html'))
-  .afterEach(async () => clearTestPage());
+  .page(url(__dirname, '../../container.html'));
 
 safeSizeTest('non resizable pane should not change its size during resize', async (t) => {
   const splitter = new Splitter('#container');