update etalons

.github/workflows/testcafe_tests.yml

@@ -81,25 +81,25 @@ jobs:
       fail-fast: false
       matrix:
         ARGS: [
-          # { componentFolder: "accessibility", name: "accessibility (1/5)", indices: "1/5" },
-          # { componentFolder: "accessibility", name: "accessibility (2/5)", indices: "2/5" },
-          # { componentFolder: "accessibility", name: "accessibility (3/5)", indices: "3/5" },
-          # { componentFolder: "accessibility", name: "accessibility (4/5)", indices: "4/5" },
-          # { componentFolder: "accessibility", name: "accessibility (5/5)", indices: "5/5" },
-          # { componentFolder: "accessibility", name: "accessibility - material (1/7)", theme: "material.blue.light", indices: "1/7" },
-          # { componentFolder: "accessibility", name: "accessibility - material (2/7)", theme: "material.blue.light", indices: "2/7" },
-          # { componentFolder: "accessibility", name: "accessibility - material (3/7)", theme: "material.blue.light", indices: "3/7" },
-          # { componentFolder: "accessibility", name: "accessibility - material (4/7)", theme: "material.blue.light", indices: "4/7" },
-          # { componentFolder: "accessibility", name: "accessibility - material (5/7)", theme: "material.blue.light", indices: "5/7" },
-          # { componentFolder: "accessibility", name: "accessibility - material (6/7)", theme: "material.blue.light", indices: "6/7" },
-          # { componentFolder: "accessibility", name: "accessibility - material (7/7)", theme: "material.blue.light", indices: "7/7" },
-          # { componentFolder: "accessibility", name: "accessibility - fluent (1/7)", theme: "fluent.blue.light", indices: "1/7" },
-          # { componentFolder: "accessibility", name: "accessibility - fluent (2/7)", theme: "fluent.blue.light", indices: "2/7" },
-          # { componentFolder: "accessibility", name: "accessibility - fluent (3/7)", theme: "fluent.blue.light", indices: "3/7" },
-          # { componentFolder: "accessibility", name: "accessibility - fluent (4/7)", theme: "fluent.blue.light", indices: "4/7" },
-          # { componentFolder: "accessibility", name: "accessibility - fluent (5/7)", theme: "fluent.blue.light", indices: "5/7" },
-          # { componentFolder: "accessibility", name: "accessibility - fluent (6/7)", theme: "fluent.blue.light", indices: "6/7" },
-          # { componentFolder: "accessibility", name: "accessibility - fluent (7/7)", theme: "fluent.blue.light", indices: "7/7" },
+          { componentFolder: "accessibility", name: "accessibility (1/5)", indices: "1/5" },
+          { componentFolder: "accessibility", name: "accessibility (2/5)", indices: "2/5" },
+          { componentFolder: "accessibility", name: "accessibility (3/5)", indices: "3/5" },
+          { componentFolder: "accessibility", name: "accessibility (4/5)", indices: "4/5" },
+          { componentFolder: "accessibility", name: "accessibility (5/5)", indices: "5/5" },
+          { componentFolder: "accessibility", name: "accessibility - material (1/7)", theme: "material.blue.light", indices: "1/7" },
+          { componentFolder: "accessibility", name: "accessibility - material (2/7)", theme: "material.blue.light", indices: "2/7" },
+          { componentFolder: "accessibility", name: "accessibility - material (3/7)", theme: "material.blue.light", indices: "3/7" },
+          { componentFolder: "accessibility", name: "accessibility - material (4/7)", theme: "material.blue.light", indices: "4/7" },
+          { componentFolder: "accessibility", name: "accessibility - material (5/7)", theme: "material.blue.light", indices: "5/7" },
+          { componentFolder: "accessibility", name: "accessibility - material (6/7)", theme: "material.blue.light", indices: "6/7" },
+          { componentFolder: "accessibility", name: "accessibility - material (7/7)", theme: "material.blue.light", indices: "7/7" },
+          { componentFolder: "accessibility", name: "accessibility - fluent (1/7)", theme: "fluent.blue.light", indices: "1/7" },
+          { componentFolder: "accessibility", name: "accessibility - fluent (2/7)", theme: "fluent.blue.light", indices: "2/7" },
+          { componentFolder: "accessibility", name: "accessibility - fluent (3/7)", theme: "fluent.blue.light", indices: "3/7" },
+          { componentFolder: "accessibility", name: "accessibility - fluent (4/7)", theme: "fluent.blue.light", indices: "4/7" },
+          { componentFolder: "accessibility", name: "accessibility - fluent (5/7)", theme: "fluent.blue.light", indices: "5/7" },
+          { componentFolder: "accessibility", name: "accessibility - fluent (6/7)", theme: "fluent.blue.light", indices: "6/7" },
+          { componentFolder: "accessibility", name: "accessibility - fluent (7/7)", theme: "fluent.blue.light", indices: "7/7" },
           { componentFolder: "common", name: "common" },
           { componentFolder: "common", name: "common - material", theme: 'material.blue.light' },
           { componentFolder: "common", name: "common - fluent", theme: 'fluent.blue.light' },
@@ -140,9 +140,9 @@ jobs:
           { componentFolder: "navigation", name: "navigation" },
           { componentFolder: "navigation", name: "navigation - material", theme: 'material.blue.light' },
           { componentFolder: "navigation", name: "navigation - fluent", theme: 'fluent.blue.light' },
-          # { componentFolder: "fileManager", name: "fileManager" },
-          # { componentFolder: "fileManager", name: "fileManager - material", theme: 'material.blue.light' },
-          # { componentFolder: "fileManager", name: "fileManager - fluent", theme: 'fluent.blue.light' },
+          { componentFolder: "fileManager", name: "fileManager" },
+          { componentFolder: "fileManager", name: "fileManager - material", theme: 'material.blue.light' },
+          { componentFolder: "fileManager", name: "fileManager - fluent", theme: 'fluent.blue.light' },
           # { componentFolder: "filterBuilder", name: "filterBuilder" },
           # { componentFolder: "filterBuilder", name: "filterBuilder - material", theme: 'material.blue.light' },
           # { componentFolder: "filterBuilder", name: "filterBuilder - fluent", theme: 'fluent.blue.light' },

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/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;

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/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[];
 
@@ -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: 380px; padding-left: 300px;');
 
   await t
     .click(menu.getItem(0))

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');

packages/testcafe-models/internal/dropDownList.ts

@@ -69,4 +69,14 @@ export default abstract class DropDownList extends TextBox {
       dependencies: { getInstance },
     })();
   }
+
+  close(): Promise<void> {
+    const { getInstance } = this;
+
+    return ClientFunction(() => {
+      (getInstance() as any).close();
+    }, {
+      dependencies: { getInstance },
+    })();
+  }
 }