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,
@@ -90,7 +99,10 @@ fixture.disablePageReloads`CardView - ColumnSortable.Functional`
 
       const columnElement = getColumnItem(cardView, columnIndex);
 
-      await dragToHeaderPanel(t, cardView, columnElement, gapIndex);
+      // dropping next to the dragged column is a no-op, so no placeholder appears
+      const isNoOp = gapIndex === columnIndex || gapIndex === columnIndex + 1;
+
+      await dragToHeaderPanel(t, cardView, columnElement, gapIndex, isNoOp);
 
       await expectColumns(t, cardView, expectedColumns);
     }).before(async () => createWidget('dxCardView', {
@@ -102,18 +114,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 +136,6 @@ fixture.disablePageReloads`CardView - ColumnSortable.Functional`
         { dataField: 'Column 1', visible: false },
         { dataField: 'Column 2' },
         { dataField: 'Column 3' },
-        { dataField: 'Column 4' },
       ],
     }));
   });
@@ -178,7 +189,10 @@ fixture.disablePageReloads`CardView - ColumnSortable.Functional`
     const cardView = new CardView('#container');
     const columnElement = getColumnItem(cardView, draggingColumnIndex);
 
-    await dragToHeaderPanel(t, cardView, columnElement, gapIndex);
+    // dropping next to the dragged column is a no-op, so no placeholder appears
+    const isNoOp = gapIndex === draggingColumnIndex || gapIndex === draggingColumnIndex + 1;
+
+    await dragToHeaderPanel(t, cardView, columnElement, gapIndex, isNoOp);
 
     await expectColumns(t, cardView, expectedColumns);
   }).before(async () => createWidget('dxCardView', {

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

@@ -1,8 +1,8 @@
 import { ClientFunction, Selector } from 'testcafe';
 import CardView from 'devextreme-testcafe-models/cardView';
 import TreeView from 'devextreme-testcafe-models/treeView';
+import { MouseUpEvents, MouseAction } from '../../../helpers/mouseUpEvents';
 
-const DRAG_ASSERTION_TIMEOUT = 1000;
 const HEADER_DROP_OFFSET_Y = 5;
 
 export const SELECTORS = {
@@ -73,41 +73,58 @@ export const dragToHeaderPanel = async (
   cardView: CardView,
   columnElement: Selector,
   gapIndex: number,
+  isNoOp = false,
 ): Promise<void> => {
   const headers = cardView.getHeaders();
   const columnsNum = await headers.getHeaderItemsElements().count;
 
+  await MouseUpEvents.disable(MouseAction.dragToElement);
+
   if (gapIndex < columnsNum) {
     const insertBeforeColumn = headers.getHeaderItemNth(gapIndex).element;
+    const { width } = await insertBeforeColumn.boundingClientRect;
 
     await t.dragToElement(
       columnElement,
       insertBeforeColumn,
       {
-        destinationOffsetX: 5,
+        offsetX: 5,
+        offsetY: 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,
+        offsetX: 5,
+        offsetY: 5,
+        destinationOffsetX: (Math.floor(width) + 3), // 3px right of the right edge
         destinationOffsetY: HEADER_DROP_OFFSET_Y,
         speed: 0.5,
       },
     );
   }
 
+  if (!isNoOp) {
+    await t
+      .expect(cardView.getHeaderPanel().getDropPlaceholder().exists)
+      .ok();
+  }
+
+  await MouseUpEvents.enable(MouseAction.dragToElement);
+
+  await t.dispatchEvent(columnElement, 'mouseup');
+
   await t
     .expect(Selector(SELECTORS.dragging).exists)
-    .notOk({ timeout: DRAG_ASSERTION_TIMEOUT })
-    .expect(cardView.isReady())
-    .ok({ timeout: DRAG_ASSERTION_TIMEOUT });
+    .notOk();
 };
 
 export const dragToColumnChooser = async (
@@ -119,6 +136,10 @@ export const dragToColumnChooser = async (
   const treeView = columnChooser.element.find(SELECTORS.treeView);
 
   await t.dragToElement(columnElement, treeView);
+
+  await t
+    .expect(Selector(SELECTORS.dragging).exists)
+    .notOk();
 };
 
 export const arrayMoveToGap = (arr: number[], index: number, gapIndex: number): number[] => {
@@ -139,23 +160,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;
+  const actualColumnsCount = source === 'headerPanel'
+    ? await cardView.getHeaders().getHeaderItemsElements().count
+    : await cardView.getColumnChooser().getColumns().count;
 
-    if (source === 'headerPanel') {
-      column = cardView.getHeaders().getHeaderItemNth(i)?.element;
-    } else {
-      const treeView = new TreeView(cardView.getColumnChooser().element.find(SELECTORS.treeView));
-      column = treeView.getNodeItem(i);
-    }
+  for (let i = 0; i < actualColumnsCount; i += 1) {
+    const column = source === 'headerPanel'
+      ? cardView.getHeaders().getHeaderItemNth(i).element
+      : cardView.getColumnChooser().getColumn(i);
 
-    await t
-      .expect(column.exists)
-      .ok({ timeout: DRAG_ASSERTION_TIMEOUT })
-      .expect(column.innerText)
-      .eql(adjustedExpectedColumns[i], { timeout: DRAG_ASSERTION_TIMEOUT });
+    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(1000);
+  await treeList.apiShowErrorToast();
+  await t
+    .expect(treeList.getToast().exists).ok();
+
+  await t
+    .wait(1100)
+    .expect(treeList.getToast().exists).notOk();
 }).before(async () => {
   await createWidget('dxTreeList', {});
 });

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

@@ -8,10 +8,6 @@ fixture`Ai Column.Virtual Scrolling.Functional`
 
 const DATA_GRID_SELECTOR = '#container';
 
-const CLASS = {
-  loadPanelContent: 'dx-loadpanel-content',
-};
-
 const checkAIColumnTexts = async (
   t: TestController,
   component: DataGrid,
@@ -28,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);
@@ -51,7 +49,9 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho
 
   // assert
   await t
-    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
+    .expect(isAIRequestPending())
+    .ok()
+    .expect(dataGrid.getLoadPanel().isVisible())
     .ok();
 
   // act
@@ -61,7 +61,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
+    .expect(dataGrid.getLoadPanel().isVisible())
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 11);
 
@@ -76,7 +76,9 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho
     .eql(0)
     .expect(dataGrid.getDataCell(20, 0).element.textContent)
     .eql('21')
-    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
+    .expect(isAIRequestPending())
+    .ok()
+    .expect(dataGrid.getLoadPanel().isVisible())
     .ok();
 
   // act
@@ -86,7 +88,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
+    .expect(dataGrid.getLoadPanel().isVisible())
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 12);
 })
@@ -154,7 +156,9 @@ test('DataGrid should send an AI request for rendered rows after scrolling with
 
   // assert
   await t
-    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
+    .expect(isAIRequestPending())
+    .ok()
+    .expect(dataGrid.getLoadPanel().isVisible())
     .ok();
 
   // act
@@ -164,7 +168,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
+    .expect(dataGrid.getLoadPanel().isVisible())
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 11);
 
@@ -179,7 +183,9 @@ test('DataGrid should send an AI request for rendered rows after scrolling with
     .eql(1)
     .expect(dataGrid.getDataCell(20, 0).element.textContent)
     .eql('21')
-    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
+    .expect(isAIRequestPending())
+    .ok()
+    .expect(dataGrid.getLoadPanel().isVisible())
     .ok();
 
   // act
@@ -189,7 +195,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
+    .expect(dataGrid.getLoadPanel().isVisible())
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 12);
 })