update

Author: EugeniyKiyashko

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

@@ -4,6 +4,7 @@ import { ClientFunction } from 'testcafe';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
 import { getData } from '../../helpers/generateDataSourceData';
+import { isScrollAtEnd } from '../../helpers/rowDraggingHelpers';
 import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture`Keyboard Navigation.Visual`
@@ -19,6 +20,12 @@ const isKeyboardNavigationInProgress = ClientFunction(() => {
     .navigationToCellInProgress();
 });
 
+const waitForPaint = ClientFunction(() => new Promise<void>((resolve) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => resolve());
+  });
+}));
+
 const focusDataCell = async (
   t: TestController,
   dataGrid: DataGrid,
@@ -767,6 +774,13 @@ test('Navigate to first cell in the first row when virtual scrolling and columns
     await waitForKeyboardNavigation(t);
 
     await expectDataCellFocusState(t, dataGrid, 199, 34);
+    await t
+      .expect(dataGrid.isReady())
+      .ok({ timeout: KEYBOARD_NAVIGATION_TIMEOUT })
+      .expect(isScrollAtEnd('horizontal'))
+      .ok({ timeout: KEYBOARD_NAVIGATION_TIMEOUT });
+    await waitForPaint();
+
     await testScreenshot(t, takeScreenshot, `${useNative ? 'native' : 'simulated'}_scrolling_-_navigate_to_last_cell_row_dragging__virtual_scrolling__virtual_columns.png`, { element: dataGrid.element });
 
     // assert

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

@@ -798,13 +798,11 @@ test('Item should appear in a correct spot when dragging to a different page wit
   const dataGrid = new DataGrid('#container');
 
   await t.expect(dataGrid.isReady()).ok();
+  const rowHeight = await dataGrid.getDataRow(2).element.offsetHeight;
   const scrollOffsetForAutoScroll = await getOffsetToTriggerAutoScroll(2, 0.5, 'down');
 
-  await dragWithDisabledMouseUp(
-    t,
-    dataGrid.getDataRow(2).getDragCommand(),
-    { offsetX: 0, offsetY: scrollOffsetForAutoScroll, speed: 0.5 },
-  );
+  await dataGrid.moveRow(2, 0, rowHeight, true);
+  await dataGrid.moveRow(2, 0, scrollOffsetForAutoScroll);
 
   const expectedSequence = ['5-1', '3-1', '6-1'];
   const isTargetPageRendered = ClientFunction(() => {

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.tests.js

@@ -77,6 +77,8 @@ QUnit.module('Loading', {
         await waitForAsync(() => count === 1);
         scheduler.instance.option('currentView', 'week');
         await waitForAsync(() => count === 2);
+        // the panel hides after the load completes and the view re-renders, not exactly when count===2
+        await waitForAsync(() => $('.dx-loadpanel-wrapper').length === 0);
 
         assert.equal($('.dx-loadpanel-wrapper').length, 0, 'loading panel hide');
     });

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js

@@ -35,6 +35,7 @@ import ArrayStore from 'common/data/array_store';
 import {
     CHAT_EDITING_PREVIEW_CLASS,
     CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS,
+    CHAT_EDITING_PREVIEW_HIDING_CLASS,
 } from '__internal/ui/chat/message_box/editing_preview';
 import { CHAT_CONFIRMATION_POPUP_WRAPPER_CLASS } from '__internal/ui/chat/confirmationpopup';
 import { POPUP_CLASS } from '__internal/ui/popup/popup';
@@ -80,6 +81,16 @@ const waitForCondition = (condition, timeout = ANIMATION_TIMEOUT * 8, interval =
     }, interval);
 });
 
+// The editing preview removes its DOM node only on its CSS hide animation's animationend,
+// which is unreliable under CI load. Wait for the hiding to start, then fire animationend
+// so the node is removed synchronously.
+const waitForEditingPreviewToHide = async(getEditingPreview) => {
+    await waitForCondition(() => getEditingPreview().length === 0
+        || getEditingPreview().hasClass(CHAT_EDITING_PREVIEW_HIDING_CLASS));
+
+    getEditingPreview().get(0)?.dispatchEvent(new Event('animationend'));
+};
+
 export const MOCK_COMPANION_USER_ID = 'COMPANION_USER_ID';
 export const MOCK_CURRENT_USER_ID = 'CURRENT_USER_ID';
 export const NOW = 1721747399083;
@@ -1076,15 +1087,17 @@ QUnit.module('Chat', () => {
 
                     this.$sendButton.trigger('dxclick');
 
-                    const expectedLength = cancel ? 1 : 0;
+                    if(cancel) {
+                        // The update is cancelled, so the preview must stay visible. Give a bounded
+                        // window for an erroneous hide to start, then confirm it is still shown.
+                        await waitForCondition(() => this.getEditingPreview().hasClass(CHAT_EDITING_PREVIEW_HIDING_CLASS), ANIMATION_TIMEOUT);
 
-                    await waitForCondition(() => this.getEditingPreview().length === expectedLength);
+                        assert.strictEqual(this.getEditingPreview().length, 1, `Editing preview remains when cancel=${cancel}`);
+                    } else {
+                        await waitForEditingPreviewToHide(() => this.getEditingPreview());
 
-                    assert.strictEqual(
-                        this.getEditingPreview().length,
-                        expectedLength,
-                        `Editing preview ${cancel ? 'remains' : 'is hidden'} when cancel=${cancel}`
-                    );
+                        assert.strictEqual(this.getEditingPreview().length, 0, `Editing preview is hidden when cancel=${cancel}`);
+                    }
                 });
             });
         });
@@ -1158,9 +1171,11 @@ QUnit.module('Chat', () => {
 
             $applyButton.trigger('dxclick');
 
+            // The preview hides via a CSS animation; drive its removal deterministically.
+            await waitForEditingPreviewToHide(() => this.getEditingPreview());
+
             // The input is refocused asynchronously, only after the confirmation popup hides.
-            await waitForCondition(() => this.getEditingPreview().length === 0
-                && this.textArea.option('value') === ''
+            await waitForCondition(() => this.textArea.option('value') === ''
                 && this.$textArea.hasClass(FOCUSED_STATE_CLASS));
 
             assert.strictEqual(this.getEditingPreview().length, 0);
@@ -1227,16 +1242,18 @@ QUnit.module('Chat', () => {
             const $editButton = this.getContextMenuItems().eq(0);
             $editButton.trigger('dxclick');
 
-            // The input is focused asynchronously, only after the context menu finishes hiding.
-            // Wait until the editing mode is fully established (preview shown and input focused)
-            // before sending, so the focus assertion does not race with the menu hide animation.
-            await waitForCondition(() => this.getEditingPreview().length === 1
-                && this.$textArea.hasClass(FOCUSED_STATE_CLASS));
+            // Make sure the editing mode is established before sending.
+            await waitForCondition(() => this.getEditingPreview().length === 1);
 
             this.$sendButton.trigger('dxclick');
 
-            await waitForCondition(() => this.getEditingPreview().length === 0
-                && this.textArea.option('value') === '');
+            // The rejected cancel promise lets the update proceed, clearing the preview; its DOM
+            // node is removed only when the CSS hide animation ends, so drive that deterministically.
+            await waitForEditingPreviewToHide(() => this.getEditingPreview());
+
+            // The input is focused asynchronously, only after the context menu finishes hiding.
+            await waitForCondition(() => this.textArea.option('value') === ''
+                && this.$textArea.hasClass(FOCUSED_STATE_CLASS));
 
             assert.strictEqual(this.getEditingPreview().length, 0);
             assert.strictEqual(this.textArea.option('value'), '', 'input is empty');