update etalons

DevExpress · Oct 11, 2024 · 2427523 · 2427523
1 parent 91e1fd4
commit 2427523
Show file tree

Hide file tree

Showing 53 changed files with 106 additions and 74 deletions.
diff --git a/.github/workflows/testcafe_tests.yml b/.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' },

diff --git a/e2e/testcafe-devextreme/helpers/clearPage.js b/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 })();
     }
 };
diff --git a/e2e/testcafe-devextreme/runner.js b/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;

diff --git a/e2e/testcafe-devextreme/tests/accessibility/map.ts b/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);
diff --git a/...s/chat/etalons/Messagebox when input contains long text (fluent-blue-light).png b/...s/chat/etalons/Messagebox when input contains long text (fluent-blue-light).png
diff --git a/...tests/chat/etalons/Messagebox when input contains long text (generic-light).png b/...tests/chat/etalons/Messagebox when input contains long text (generic-light).png
diff --git a/...chat/etalons/Messagebox when input contains long text (material-blue-light).png b/...chat/etalons/Messagebox when input contains long text (material-blue-light).png
diff --git a/...ests/chat/etalons/Messagebox when send button has focus (fluent-blue-light).png b/...ests/chat/etalons/Messagebox when send button has focus (fluent-blue-light).png
diff --git a/...me/tests/chat/etalons/Messagebox when send button has focus (generic-light).png b/...me/tests/chat/etalons/Messagebox when send button has focus (generic-light).png
diff --git a/...ts/chat/etalons/Messagebox when send button has focus (material-blue-light).png b/...ts/chat/etalons/Messagebox when send button has focus (material-blue-light).png
diff --git a/... scroll position after rendering in invisible container (fluent-blue-light).png b/... scroll position after rendering in invisible container (fluent-blue-light).png
diff --git a/...list scrollbar middle position after typing in textarea (fluent-blue-light).png b/...list scrollbar middle position after typing in textarea (fluent-blue-light).png
diff --git a/...sagelist scrollbar middle position after typing in textarea (generic-light).png b/...sagelist scrollbar middle position after typing in textarea (generic-light).png
diff --git a/...st scrollbar middle position after typing in textarea (material-blue-light).png b/...st scrollbar middle position after typing in textarea (material-blue-light).png
diff --git a/...Messagelist scrollbar position after typing in textarea (fluent-blue-light).png b/...Messagelist scrollbar position after typing in textarea (fluent-blue-light).png
diff --git a/...ons/Messagelist scrollbar position after typing in textarea (generic-light).png b/...ons/Messagelist scrollbar position after typing in textarea (generic-light).png
diff --git a/...ssagelist scrollbar position after typing in textarea (material-blue-light).png b/...ssagelist scrollbar position after typing in textarea (material-blue-light).png
diff --git a/...ons/DRB range, hover is end in view & start in row, rtl (fluent-blue-light).png b/...ons/DRB range, hover is end in view & start in row, rtl (fluent-blue-light).png
diff --git a/..., startDate is end in view & row, hover inside row, rtl (fluent-blue-light).png b/..., startDate is end in view & row, hover inside row, rtl (fluent-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/keyboard.ts b/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 },

diff --git a/...sts/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (generic-light).png b/...sts/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (generic-light).png
diff --git a/...itors/dropDownBox/etalons/T1245111-dropDownBox-resize (material-blue-light).png b/...itors/dropDownBox/etalons/T1245111-dropDownBox-resize (material-blue-light).png
diff --git a/...t/etalons/First item should not be focused when deleted (fluent-blue-light).png b/...t/etalons/First item should not be focused when deleted (fluent-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/editors/lookup/common.ts b/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,

diff --git a/...itors/selectBox/etalons/SelectBox Customize DropDown Button (generic-light).png b/...itors/selectBox/etalons/SelectBox Customize DropDown Button (generic-light).png
diff --git a/...selectBox/etalons/SelectBox Customize DropDown Button (material-blue-light).png b/...selectBox/etalons/SelectBox Customize DropDown Button (material-blue-light).png
diff --git a/...s/tagBox/etalons/TagBox label with stylingMode=filled (material-blue-light).png b/...s/tagBox/etalons/TagBox label with stylingMode=filled (material-blue-light).png
diff --git a/...tagBox/etalons/TagBox label with stylingMode=outlined (material-blue-light).png b/...tagBox/etalons/TagBox label with stylingMode=outlined (material-blue-light).png
diff --git a/...gBox/etalons/TagBox label with stylingMode=underlined (material-blue-light).png b/...gBox/etalons/TagBox label with stylingMode=underlined (material-blue-light).png
diff --git a/.../navigation/drawer/etalons/drawer_overlap_shading_EmptyDrawerHidden_#popup1.png b/.../navigation/drawer/etalons/drawer_overlap_shading_EmptyDrawerHidden_#popup1.png
diff --git a/...sts/navigation/drawer/etalons/drawer_push_shading_EmptyDrawerHidden_#popup1.png b/...sts/navigation/drawer/etalons/drawer_push_shading_EmptyDrawerHidden_#popup1.png
diff --git a/...s/navigation/drawer/etalons/drawer_shrink_shading_EmptyDrawerHidden_#popup1.png b/...s/navigation/drawer/etalons/drawer_shrink_shading_EmptyDrawerHidden_#popup1.png
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/common.ts b/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: 420px; padding-left: 80px;');
 
   await t
     .click(menu.getItem(2))
@@ -187,14 +187,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: 430px; padding-left: 340px;');
 
   await t
     .click(menu.getItem(0))

diff --git a/...arance, orientation is vertical, bottom right collision (fluent-blue-light).png b/...arance, orientation is vertical, bottom right collision (fluent-blue-light).png
diff --git a/...appearance, orientation is vertical, bottom right collision (generic-light).png b/...appearance, orientation is vertical, bottom right collision (generic-light).png
diff --git a/...ance, orientation is vertical, bottom right collision (material-blue-light).png b/...ance, orientation is vertical, bottom right collision (material-blue-light).png
diff --git a/...er appearance, orientation is vertical, right collision (fluent-blue-light).png b/...er appearance, orientation is vertical, right collision (fluent-blue-light).png
diff --git a/...imiter appearance, orientation is vertical, right collision (generic-light).png b/...imiter appearance, orientation is vertical, right collision (generic-light).png
diff --git a/... appearance, orientation is vertical, right collision (material-blue-light).png b/... appearance, orientation is vertical, right collision (material-blue-light).png
diff --git a/.../etalons/Delimiter, horizontal menu, bottom right collision (generic-light).png b/.../etalons/Delimiter, horizontal menu, bottom right collision (generic-light).png
diff --git a/...ns/Delimiter, horizontal menu, bottom right collision (material-blue-light).png b/...ns/Delimiter, horizontal menu, bottom right collision (material-blue-light).png
diff --git a/...on/menu/etalons/Delimiter, horizontal menu, right collision (generic-light).png b/...on/menu/etalons/Delimiter, horizontal menu, right collision (generic-light).png
diff --git a/...tal menu, submenu less than root item, bottom collision (fluent-blue-light).png b/...tal menu, submenu less than root item, bottom collision (fluent-blue-light).png
diff --git a/...izontal menu, submenu less than root item, bottom collision (generic-light).png b/...izontal menu, submenu less than root item, bottom collision (generic-light).png
diff --git a/...l menu, submenu less than root item, bottom collision (material-blue-light).png b/...l menu, submenu less than root item, bottom collision (material-blue-light).png
diff --git a/...tal menu, submenu more than root item, bottom collision (fluent-blue-light).png b/...tal menu, submenu more than root item, bottom collision (fluent-blue-light).png
diff --git a/...izontal menu, submenu more than root item, bottom collision (generic-light).png b/...izontal menu, submenu more than root item, bottom collision (generic-light).png
diff --git a/...l menu, submenu more than root item, bottom collision (material-blue-light).png b/...l menu, submenu more than root item, bottom collision (material-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/common.ts b/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 });
 

diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/resize.ts b/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');

diff --git a/...s/Toolbar widgets render rtl=true,items[]locateInMenu=never (generic-light).png b/...s/Toolbar widgets render rtl=true,items[]locateInMenu=never (generic-light).png
diff --git a/packages/testcafe-models/internal/dropDownList.ts b/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 },
+    })();
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml