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/common/pivotGrid/sort/localSort_T1150523.ts

@@ -2,11 +2,8 @@ import { RequestLogger, RequestMock } from 'testcafe';
 import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
-import { isMaterial } from '../../../../helpers/themeUtils';
 
-const testFixture = () => (isMaterial() ? fixture.skip : fixture);
-
-testFixture()`pivotGrid_sort`
+fixture`pivotGrid_sort`
   .page(url(__dirname, '../../../container.html'));
 
 const requestLogger = RequestLogger(/\/api\/data/);
@@ -55,6 +52,9 @@ test('Should sort without DataSource reload if scrolling mode isn\'t virtual', a
 
   await t.click(pivotGrid.getColumnHeaderArea().getField());
 
+  // Wait for sort operation to complete
+  await t.wait(300);
+
   const afterSortRequestCount = await requestLogger.count(() => true);
   const requestCount = afterSortRequestCount - initialRequestCount;
 

e2e/testcafe-devextreme/tests/common/pivotGrid/virtualScrolling_T1210807.ts

@@ -32,7 +32,6 @@ test('Row fields overlap data fields if dataFieldArea is set to "row" and virtua
   await t
     .click(firstHeaderRow);
   await pivotGrid.scrollBy({ top: 30000 });
-  await pivotGrid.scrollBy({ top: 30000 });
 
   await testScreenshot(t, takeScreenshot, 'rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807.png', { element: pivotGrid.element });
 

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(500)
 
       // assert
       .expect(dataGrid.dataRows.count)