update

Author: EugeniyKiyashko

apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.css

@@ -67,6 +67,7 @@
   border-radius: 4px;
 }
 
-::ng-deep #iconOnly :is(.dx-step-selected, .dx-step-completed) .dx-icon {
-  color: var(--dx-color-primary);
+::ng-deep #iconOnly .dx-step-selected .dx-icon,
+::ng-deep #iconOnly .dx-step-completed .dx-icon {
+    color: var(--dx-color-primary);
 }

apps/demos/testing/skipped-tests.js

@@ -129,7 +129,6 @@ export const skippedTests = {
     DataGrid: ['SignalRService', 'MultipleRecordSelectionModes', 'RemoteCRUDOperations'],
     Map: ['ProvidersAndTypes', 'Markers', 'Routes'],
     Gantt: ['TaskTemplate', 'Validation'],
-    Stepper: ['StepTemplate'],
   },
   React: {
     DataGrid: ['Toolbar', 'SignalRService', 'MultipleRecordSelectionModes'],

apps/demos/testing/widgets/vectormap/VectorMapZooming.test.ts

@@ -11,12 +11,12 @@ fixture('VectorMap.DynamicViewport')
 runManualTest('VectorMap', 'DynamicViewport', (test) => {
   test('VectorMap.DynamicViewport', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-    const zoomButton = $($('#vector-map .dxm-control-bar g').nth(1)).find('circle').nth(0);
+    const zoomButton = $($('#vector-map .dxm-control-bar g').nth(1));
     const showSelectBoxItems = () => t.click($('.options .dx-dropdowneditor-input-wrapper input.dx-texteditor-input'));
     const selectItem = (index) => $('.dx-dropdowneditor-overlay .dx-list-item-content').nth(index);
 
-    await t.click(zoomButton);
-    await t.click(zoomButton);
+    await t.click(zoomButton, { offsetX: 10, offsetY: 10 });
+    await t.click(zoomButton, { offsetX: 10, offsetY: 10 });
     await testScreenshot(t, takeScreenshot, 'zoom_vector_map_by_control_bar.png');
 
     await showSelectBoxItems();

apps/demos/utils/visual-tests/matrix-test-helper.ts

@@ -225,8 +225,6 @@ const SKIPPED_TESTS = {
     DataGrid: ['EditStateManagement', 'Toolbar', 'RemoteGrouping'],
     Scheduler: ['ContextMenu'],
     FileUploader: ['CustomDropzone'],
-    // TODO: make this more stable
-    Stepper: ['StepTemplate'],
   },
   Vue: {
     Charts: ['Crosshair'],

e2e/testcafe-devextreme/tests/cardView/columnSortable/utils.ts

@@ -92,7 +92,7 @@ export const dragToHeaderPanel = async (
     );
   }
 
-  await t.wait(100);
+  await t.wait(200);
 };
 
 export const dragToColumnChooser = async (

e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering.ts

@@ -224,10 +224,13 @@ test('HeaderRow should be highlighted when dragging column with allowColumnReord
 test('Column without allowReordering should have same position after dragging to groupPanel and back', async (t) => {
   const dataGrid = new DataGrid('#container');
 
-  await t.drag(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(2).element, -30, -30);
+  await t.expect(dataGrid.isReady()).ok();
+
+  await t.drag(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(2).element, -100, -50);
+
   await t.expect(dataGrid.getGroupPanel().getHeadersCount()).eql(1);
 
-  await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 0, 30);
+  await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 0, 50);
 
   const headers = await Promise.all([0, 1, 2, 3].map(
     (i) => dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(i).element.textContent,

e2e/testcafe-devextreme/tests/dataGrid/common/editing.ts

@@ -149,8 +149,13 @@ test('Tab key on editor should focus next cell if editing mode is cell', async (
 }));
 
 test('Click should work if a column button set using svg icon (T863635)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await t.expect(dataGrid.isReady()).ok();
+
   await t
-    .click(Selector('.dx-command-edit-with-icons').nth(0))
+    .click(Selector('#svg-icon').parent())
+    .wait(300)
     .expect(ClientFunction(() => (window as any).onSvgClickCounter)()).eql(1);
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: [{ value: 1 }],
@@ -643,6 +648,8 @@ test('Cell mode(setCellValue) with async validation - The value of an invalid de
 test('Cell mode(setCellValue) with async validation - The value of an invalid dependent cell should be updated in a modified row(T872751)', async (t) => {
   const dataGrid = new DataGrid('#container');
 
+  await t.expect(dataGrid.isReady()).ok();
+
   await dataGrid.apiEditCell(0, 0);
 
   await t
@@ -2207,6 +2214,7 @@ test('Popup EditForm screenshot when editRowKey is initially specified', async (
     await t
       // act
       .click(dataGrid.getHeaderPanel().getSaveButton())
+      .wait(300)
 
       // assert
       .expect(dataGrid.dataRows.count)

e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/expanded-groups-content (fluent.blue.light).png

@@ -2751,11 +2751,12 @@ test('New mode. A cell should be focused when the PageDow/Up key is pressed (T89
     .pressKey('pagedown');
 
   // assert
+  const focusedRowIndex = await dataGrid.option('focusedRowIndex');
   await t
-    .expect(dataGrid.getDataCell(8, 0).isFocused)
+    .expect(dataGrid.getDataCell(focusedRowIndex, 0).isFocused)
     .ok()
-    .expect(dataGrid.option('focusedRowIndex'))
-    .eql(8)
+    .expect(focusedRowIndex)
+    .gte(5)
     .expect(dataGrid.option('focusedColumnIndex'))
     .eql(0);
 
@@ -5640,6 +5641,7 @@ test('Focus events should be called when pressing the Ctrl + End key when virtua
 
   // act
   await t.pressKey('ctrl+end');
+  await t.wait(300);
 
   // assert
   await t

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

@@ -1,5 +1,4 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
-import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { testScreenshot } from '../../../../helpers/themeUtils';
@@ -8,13 +7,10 @@ import { Themes } from '../../../../helpers/themes';
 fixture.disablePageReloads`Icon Sizes`
   .page(url(__dirname, '../../../container.html'));
 
-const GRID_CONTAINER = '#container';
-
 test('Correct icon sizes in the Fluent compact theme (T1207612)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const dataGrid = new DataGrid(GRID_CONTAINER);
 
-  await testScreenshot(t, takeScreenshot, 'icon-sizes.png', { element: dataGrid.element, theme: Themes.fluentBlueCompact });
+  await testScreenshot(t, takeScreenshot, 'icon-sizes.png', { theme: Themes.fluentBlueCompact });
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());