Grids - Stabilize tests (Part 2 & 3)

e2e/testcafe-devextreme/tests/cardView/columnChooser/functional.ts

@@ -65,7 +65,6 @@ function testsFactory(testModel: {
     await testModel.assertFirstColumnHidden(t, cardView);
 
     await testModel.showFirstColumn(t, cardView);
-
     await testModel.assertFirstColumnVisible(t, cardView);
 
     await testModel.hideFirstColumn(t, cardView);

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

@@ -11,6 +11,7 @@ import {
   expectColumns,
   getColumnItem,
   triggerDragStart,
+  triggerDragEnd,
   SELECTORS,
 } from './utils';
 
@@ -29,12 +30,16 @@ fixture.disablePageReloads`CardView - ColumnSortable.Functional`
 
     await triggerDragStart(columnElement);
 
-    const draggingElement = Selector(SELECTORS.dragging);
+    try {
+      const draggingElement = Selector(SELECTORS.dragging);
 
-    if (result) {
-      await t.expect(draggingElement.exists).ok();
-    } else {
-      await t.expect(draggingElement.exists).notOk();
+      if (result) {
+        await t.expect(draggingElement.exists).ok();
+      } else {
+        await t.expect(draggingElement.exists).notOk();
+      }
+    } finally {
+      await triggerDragEnd(columnElement);
     }
   }).before(async () => createWidget('dxCardView', {
     allowColumnReordering,
@@ -59,12 +64,16 @@ fixture.disablePageReloads`CardView - ColumnSortable.Functional`
 
     await triggerDragStart(columnElement);
 
-    const draggingElement = Selector(SELECTORS.dragging);
+    try {
+      const draggingElement = Selector(SELECTORS.dragging);
 
-    if (result) {
-      await t.expect(draggingElement.exists).ok();
-    } else {
-      await t.expect(draggingElement.exists).notOk();
+      if (result) {
+        await t.expect(draggingElement.exists).ok();
+      } else {
+        await t.expect(draggingElement.exists).notOk();
+      }
+    } finally {
+      await triggerDragEnd(columnElement);
     }
   }).before(async () => createWidget('dxCardView', {
     allowColumnReordering: true,
@@ -102,18 +111,18 @@ fixture.disablePageReloads`CardView - ColumnSortable.Functional`
 
 [0, 1].forEach((columnIndex) => {
   [0, 1, 2].forEach((gapIndex) => {
-    test.meta({ unstable: true })(`drag from columnChooser to headerPanel: from index ${columnIndex} to index ${gapIndex}`, async (t) => {
+    test(`drag from columnChooser to headerPanel: from index ${columnIndex} to index ${gapIndex}`, async (t) => {
       const cardView = new CardView('#container');
       await cardView.apiShowColumnChooser();
 
       const columnElement = getColumnItem(cardView, columnIndex, 'columnChooser');
 
       await dragToHeaderPanel(t, cardView, columnElement, gapIndex);
 
-      const headerPanelColumns = [2, 3, 4];
+      const headerPanelColumns = [2, 3];
       headerPanelColumns.splice(gapIndex, 0, columnIndex);
 
-      const chooserColumns = [0, 1, 2, 3, 4].filter((c) => !headerPanelColumns.includes(c));
+      const chooserColumns = [0, 1].filter((c) => c !== columnIndex);
 
       await expectColumns(t, cardView, headerPanelColumns);
       await expectColumns(t, cardView, chooserColumns, 'columnChooser');
@@ -124,7 +133,6 @@ fixture.disablePageReloads`CardView - ColumnSortable.Functional`
         { dataField: 'Column 1', visible: false },
         { dataField: 'Column 2' },
         { dataField: 'Column 3' },
-        { dataField: 'Column 4' },
       ],
     }));
   });

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

@@ -79,24 +79,26 @@ export const dragToHeaderPanel = async (
 
   if (gapIndex < columnsNum) {
     const insertBeforeColumn = headers.getHeaderItemNth(gapIndex).element;
+    const { width } = await insertBeforeColumn.boundingClientRect;
 
     await t.dragToElement(
       columnElement,
       insertBeforeColumn,
       {
-        destinationOffsetX: 5,
+        destinationOffsetX: -(Math.floor(width) + 3), // 3px left of the left edge
         destinationOffsetY: HEADER_DROP_OFFSET_Y,
         speed: 0.5,
       },
     );
   } else {
     const insertAfterColumn = headers.getHeaderItemNth(columnsNum - 1).element;
+    const { width } = await insertAfterColumn.boundingClientRect;
 
     await t.dragToElement(
       columnElement,
       insertAfterColumn,
       {
-        destinationOffsetX: -5,
+        destinationOffsetX: (Math.floor(width) + 3), // 3px right of the right edge
         destinationOffsetY: HEADER_DROP_OFFSET_Y,
         speed: 0.5,
       },
@@ -119,6 +121,12 @@ export const dragToColumnChooser = async (
   const treeView = columnChooser.element.find(SELECTORS.treeView);
 
   await t.dragToElement(columnElement, treeView);
+
+  await t
+    .expect(Selector(SELECTORS.dragging).exists)
+    .notOk({ timeout: DRAG_ASSERTION_TIMEOUT })
+    .expect(cardView.isReady())
+    .ok({ timeout: DRAG_ASSERTION_TIMEOUT });
 };
 
 export const arrayMoveToGap = (arr: number[], index: number, gapIndex: number): number[] => {
@@ -139,23 +147,20 @@ export const expectColumns = async (
   expectedColumns: number[],
   source: 'headerPanel' | 'columnChooser' = 'headerPanel',
 ): Promise<void> => {
+  const actualColumns: string[] = [];
   const adjustedExpectedColumns = expectedColumns.map((columnIndex) => `Column ${columnIndex}`);
 
-  for (let i = 0; i < expectedColumns.length; i += 1) {
-    // eslint-disable-next-line @typescript-eslint/init-declarations
-    let column: Selector;
-
-    if (source === 'headerPanel') {
-      column = cardView.getHeaders().getHeaderItemNth(i)?.element;
-    } else {
-      const treeView = new TreeView(cardView.getColumnChooser().element.find(SELECTORS.treeView));
-      column = treeView.getNodeItem(i);
-    }
-
-    await t
-      .expect(column.exists)
-      .ok({ timeout: DRAG_ASSERTION_TIMEOUT })
-      .expect(column.innerText)
-      .eql(adjustedExpectedColumns[i], { timeout: DRAG_ASSERTION_TIMEOUT });
+  const actualColumnsCount = source === 'headerPanel'
+    ? await cardView.getHeaders().getHeaderItemsElements().count
+    : await cardView.getColumnChooser().getColumns().count;
+
+  for (let i = 0; i < actualColumnsCount; i += 1) {
+    const column = source === 'headerPanel'
+      ? cardView.getHeaders().getHeaderItemNth(i).element
+      : cardView.getColumnChooser().getColumn(i);
+
+    actualColumns.push(await column.innerText);
   }
+
+  await t.expect(actualColumns).eql(adjustedExpectedColumns, 'Columns order should match');
 };

e2e/testcafe-devextreme/tests/common/treeList/toast.ts

@@ -1,19 +1,29 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import TreeList from 'devextreme-testcafe-models/treeList';
+import { ClientFunction } from 'testcafe';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { testScreenshot } from '../../../helpers/themeUtils';
 
-fixture.disablePageReloads`Toasts in TreeList`
+fixture`Toasts in TreeList`
   .page(url(__dirname, '../../container.html'));
 
-test('Toast should be visible after calling and should be not visible after default display time', async (t) => {
+const setToastDisplayTime = (displayTime: number) => ClientFunction(() => {
+  (window as any).DevExpress.ui.dxToast.defaultOptions({
+    options: {
+      displayTime,
+    },
+  });
+}, { dependencies: { displayTime } })();
+
+test('Toast should be visible after calling', async (t) => {
   const treeList = new TreeList('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   await t
     .expect(treeList.isReady())
     .ok();
 
+  await setToastDisplayTime(100000);
   await treeList.apiShowErrorToast();
   await t.expect(treeList.getToast().exists).ok();
 
@@ -22,7 +32,25 @@ test('Toast should be visible after calling and should be not visible after defa
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-  await t.expect(treeList.getToast().exists).notOk();
+}).before(async () => {
+  await createWidget('dxTreeList', {});
+});
+
+test('Toast should hide after the display time', async (t) => {
+  const treeList = new TreeList('#container');
+
+  await t
+    .expect(treeList.isReady())
+    .ok();
+
+  await setToastDisplayTime(100);
+  await treeList.apiShowErrorToast();
+  await t
+    .expect(treeList.getToast().exists).ok();
+
+  await t
+    .wait(150)
+    .expect(treeList.getToast().exists).notOk();
 }).before(async () => {
   await createWidget('dxTreeList', {});
 });

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts

@@ -24,6 +24,8 @@ const checkAIColumnTexts = async (
   }
 };
 
+const isAIRequestPending = ClientFunction(() => !!(window as any).aiResolve);
+
 const resolveAIRequest = ClientFunction((): void => {
   const { aiResponseData } = (window as any);
   const { aiResolve } = (window as any);
@@ -41,12 +43,14 @@ const deleteGlobalVariables = ClientFunction((): void => {
   delete (window as any).aiResolve;
 });
 
-test.meta({ unstable: true })('DataGrid should send an AI request for rendered rows after scrolling without changing the page index', async (t) => {
+test('DataGrid should send an AI request for rendered rows after scrolling without changing the page index', async (t) => {
   // arrange
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
 
   // assert
   await t
+    .expect(isAIRequestPending())
+    .ok()
     .expect(dataGrid.getLoadPanel().isVisible())
     .ok();
 
@@ -72,6 +76,8 @@ test.meta({ unstable: true })('DataGrid should send an AI request for rendered r
     .eql(0)
     .expect(dataGrid.getDataCell(20, 0).element.textContent)
     .eql('21')
+    .expect(isAIRequestPending())
+    .ok()
     .expect(dataGrid.getLoadPanel().isVisible())
     .ok();
 
@@ -144,13 +150,15 @@ test.meta({ unstable: true })('DataGrid should send an AI request for rendered r
     await deleteGlobalVariables();
   });
 
-test.meta({ unstable: true })('DataGrid should send an AI request for rendered rows after scrolling with changing the page index', async (t) => {
+test('DataGrid should send an AI request for rendered rows after scrolling with changing the page index', async (t) => {
   // arrange
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
 
   // assert
   await t
     .expect(dataGrid.getLoadPanel().isVisible())
+    .ok()
+    .expect(isAIRequestPending())
     .ok();
 
   // act
@@ -175,6 +183,8 @@ test.meta({ unstable: true })('DataGrid should send an AI request for rendered r
     .eql(1)
     .expect(dataGrid.getDataCell(20, 0).element.textContent)
     .eql('21')
+    .expect(isAIRequestPending())
+    .ok()
     .expect(dataGrid.getLoadPanel().isVisible())
     .ok();
 

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

@@ -409,6 +409,7 @@ editingModes.forEach((mode) => {
 
           await clickCellEditor(t, mode, columnInfo, form, cell, editor);
           await setEditorValue(t, mode, columnInfo, editor, false, useMask);
+          await t.expect(dataGrid.isReady()).ok();
         }
 
         const saveButton = getSaveButton(mode, form);

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

@@ -68,9 +68,18 @@ test('DataGrid - The "Cannot read properties of undefined error" occurs when usi
   await t
     .click(dataGrid.getDataCell(0, 0).element)
     .typeText(dataGrid.getDataCell(0, 0).element, 'new_value')
-    .pressKey('enter tab tab');
+    .pressKey('enter')
+    .expect(dataGrid.isReady())
+    .ok()
+    .pressKey('tab tab')
+    .expect(dataGrid.getDataCell(2, 0).isFocused)
+    .ok();
+
   await resolveOnSavingDeferred();
-  await t.expect(dataGrid.getDataCell(2, 0).isFocused).ok();
+
+  await t
+    .expect(dataGrid.isReady()).ok()
+    .expect(dataGrid.getDataCell(2, 0).isFocused).ok();
 }).before(async () => {
   await ClientFunction(() => {
     (window as any).deferred = $.Deferred();
@@ -94,6 +103,10 @@ test('DataGrid - The "Cannot read properties of undefined error" occurs when usi
       e.promise = (window as any).deferred;
     },
   });
+}).after(async () => {
+  await ClientFunction(() => {
+    delete (window as any).deferred;
+  })();
 });
 
 test('Tab key on editor should focus next cell if editing mode is cell', async (t) => {
@@ -2318,7 +2331,9 @@ test('Cells should be focused correctly on click when cell editing mode is used
     .typeText(dataGrid.getDataCell(0, 0).getEditor().element, '1')
     .click(dataGrid.getDataCell(1, 0).getEditor().element);
 
-  await t.expect(getStoredName(1)).eql('Name 11');
+  await t
+    .expect(dataGrid.isReady()).ok()
+    .expect(getStoredName(1)).eql('Name 11');
 
   // assert
   await t
@@ -2334,7 +2349,9 @@ test('Cells should be focused correctly on click when cell editing mode is used
     .typeText(dataGrid.getDataCell(1, 0).getEditor().element, '2')
     .click(dataGrid.getDataCell(2, 0).getEditor().element);
 
-  await t.expect(getStoredName(2)).eql('Name 22');
+  await t
+    .expect(dataGrid.isReady()).ok()
+    .expect(getStoredName(2)).eql('Name 22');
 
   // assert
   await t
@@ -2343,14 +2360,18 @@ test('Cells should be focused correctly on click when cell editing mode is used
     .expect(dataGrid.getDataCell(2, 0).isFocused)
     .ok()
     .expect(dataGrid.getDataCell(2, 0).getEditor().element.focused)
+    .ok()
+    .expect(dataGrid.isReady())
     .ok();
 
   // act
   await t
     .typeText(dataGrid.getDataCell(2, 0).getEditor().element, '3')
     .click(dataGrid.getDataCell(1, 0).getEditor().element);
 
-  await t.expect(getStoredName(3)).eql('Name 33');
+  await t
+    .expect(dataGrid.isReady()).ok()
+    .expect(getStoredName(3)).eql('Name 33');
 
   // assert
   await t
@@ -2366,7 +2387,9 @@ test('Cells should be focused correctly on click when cell editing mode is used
     .typeText(dataGrid.getDataCell(1, 0).getEditor().element, '2')
     .click(dataGrid.getDataCell(0, 0).getEditor().element);
 
-  await t.expect(getStoredName(2)).eql('Name 222');
+  await t
+    .expect(dataGrid.isReady()).ok()
+    .expect(getStoredName(2)).eql('Name 222');
 
   // assert
   await t