fix qunit tests

Author: EugeniyKiyashko

e2e/testcafe-devextreme/tests/accessibility/dataGrid/fixedColumns.ts

@@ -160,15 +160,12 @@ test('Accessibility: Scrollable should have focusable element when navigate out
 
 test('Accessibility: Scrollable should have focusable when fixed on the right side columns are focused', async (t) => {
   const dataGrid = new DataGrid('#container');
+  const targetCell = dataGrid.getFixedDataCell(0, COLUMNS_LENGTH - 1);
 
-  // focus through headers
-  await pressKey(t, 'tab', COLUMNS_LENGTH);
-
-  // focus through data row till last cell (which is fixed)
-  await pressKey(t, 'tab', COLUMNS_LENGTH);
+  await t.click(targetCell.element);
 
   await t
-    .expect(dataGrid.getFixedDataCell(0, COLUMNS_LENGTH - 1).isFocused)
+    .expect(targetCell.element.focused)
     .ok();
 
   await a11yCheck(t);

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

@@ -1,11 +1,53 @@
+import { Selector } from 'testcafe';
 import CardView from 'devextreme-testcafe-models/cardView';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { getCardFieldCaptions } from '../helpers/cardUtils';
 
+const COLUMN_CHOOSER_DND_TIMEOUT = 3000;
+const SORTABLE_DRAGGING_SELECTOR = '.dx-sortable-dragging';
+
 fixture`CardView - ColumnChooser.Functional`
   .page(url(__dirname, '../../container.html'));
 
+const waitForDragEnd = async (t: TestController, cardView: CardView): Promise<void> => {
+  await t
+    .expect(Selector(SORTABLE_DRAGGING_SELECTOR).exists)
+    .notOk({ timeout: COLUMN_CHOOSER_DND_TIMEOUT })
+    .expect(cardView.isReady())
+    .ok({ timeout: COLUMN_CHOOSER_DND_TIMEOUT });
+};
+
+const dragHeaderColumnToColumnChooser = async (
+  t: TestController,
+  cardView: CardView,
+  columnIndex: number,
+): Promise<void> => {
+  await t.dragToElement(
+    cardView.getHeaderPanel().getHeaderItem(columnIndex).element,
+    cardView.getColumnChooser().content,
+    {
+      speed: 0.5,
+    },
+  );
+  await waitForDragEnd(t, cardView);
+};
+
+const dragColumnChooserColumnToHeaderPanel = async (
+  t: TestController,
+  cardView: CardView,
+  columnIndex: number,
+): Promise<void> => {
+  await t.dragToElement(
+    cardView.getColumnChooser().getColumn(columnIndex),
+    cardView.getHeaderPanel().element,
+    {
+      speed: 0.5,
+    },
+  );
+  await waitForDragEnd(t, cardView);
+};
+
 function testsFactory(testModel: {
   name: string;
   hideFirstColumn: (t: TestController, cardView: CardView) => Promise<void>;
@@ -99,16 +141,10 @@ testsFactory({
     },
   },
   async hideFirstColumn(t: TestController, cardView: CardView) {
-    await t.dragToElement(
-      cardView.getHeaderPanel().getHeaderItem(0).element,
-      cardView.getColumnChooser().content,
-    );
+    await dragHeaderColumnToColumnChooser(t, cardView, 0);
   },
   async showFirstColumn(t: TestController, cardView: CardView) {
-    await t.dragToElement(
-      cardView.getColumnChooser().getColumn(0),
-      cardView.getHeaderPanel().element,
-    );
+    await dragColumnChooserColumnToHeaderPanel(t, cardView, 0);
   },
   async assertFirstColumnVisible(t: TestController, cardView: CardView) {
     await t.expect(
@@ -222,18 +258,12 @@ test('cards should update when column is hidden via column chooser (dragAndDrop
 
   await cardView.apiShowColumnChooser();
 
-  await t.dragToElement(
-    cardView.getHeaderPanel().getHeaderItem(0).element,
-    cardView.getColumnChooser().content,
-  );
+  await dragHeaderColumnToColumnChooser(t, cardView, 0);
 
   const captionsAfterHide = await getCardFieldCaptions(t, cardView, 2);
   await t.expect(captionsAfterHide).eql(['B', 'C']);
 
-  await t.dragToElement(
-    cardView.getColumnChooser().getColumn(0),
-    cardView.getHeaderPanel().element,
-  );
+  await dragColumnChooserColumnToHeaderPanel(t, cardView, 0);
 
   const captionsAfterShow = await getCardFieldCaptions(t, cardView, 3);
   await t.expect(captionsAfterShow).eql(['A', 'B', 'C']);

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

@@ -318,7 +318,9 @@ test('cards should update when columns are reordered (T1324855)', async (t) => {
 
   await dragToHeaderPanel(t, cardView, firstHeader, 2);
 
-  await t.expect(cardView.getHeaders().getHeaderItemNth(0).element.innerText).notEql('A');
+  await t
+    .expect(cardView.getHeaders().getHeaderItemNth(0).element.innerText)
+    .notEql('A', { timeout: 3000 });
 
   const headerCaptions: string[] = [];
   const headersCount = await cardView.getHeaders().getHeaderItemsElements().count;

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

@@ -1,7 +1,10 @@
-import { ClientFunction } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 import CardView from 'devextreme-testcafe-models/cardView';
 import TreeView from 'devextreme-testcafe-models/treeView';
 
+const DRAG_ASSERTION_TIMEOUT = 3000;
+const HEADER_DROP_OFFSET_Y = 5;
+
 export const SELECTORS = {
   dragging: '.dx-sortable-dragging',
   treeView: '.dx-cardview-column-chooser .dx-treeview',
@@ -80,19 +83,31 @@ export const dragToHeaderPanel = async (
     await t.dragToElement(
       columnElement,
       insertBeforeColumn,
-      { destinationOffsetX: +5, destinationOffsetY: -20, speed: 0.5 },
+      {
+        destinationOffsetX: 5,
+        destinationOffsetY: HEADER_DROP_OFFSET_Y,
+        speed: 0.5,
+      },
     );
   } else {
     const insertAfterColumn = headers.getHeaderItemNth(columnsNum - 1).element;
 
     await t.dragToElement(
       columnElement,
       insertAfterColumn,
-      { destinationOffsetX: -5, destinationOffsetY: -20, speed: 0.5 },
+      {
+        destinationOffsetX: -5,
+        destinationOffsetY: HEADER_DROP_OFFSET_Y,
+        speed: 0.5,
+      },
     );
   }
 
-  await t.wait(300);
+  await t
+    .expect(Selector(SELECTORS.dragging).exists)
+    .notOk({ timeout: DRAG_ASSERTION_TIMEOUT })
+    .expect(cardView.isReady())
+    .ok({ timeout: DRAG_ASSERTION_TIMEOUT });
 };
 
 export const dragToColumnChooser = async (
@@ -139,8 +154,8 @@ export const expectColumns = async (
 
     await t
       .expect(column.exists)
-      .ok()
+      .ok({ timeout: DRAG_ASSERTION_TIMEOUT })
       .expect(column.innerText)
-      .eql(adjustedExpectedColumns[i]);
+      .eql(adjustedExpectedColumns[i], { timeout: DRAG_ASSERTION_TIMEOUT });
   }
 };

e2e/testcafe-devextreme/tests/cardView/helpers/cardUtils.ts

@@ -1,15 +1,21 @@
 import CardView from 'devextreme-testcafe-models/cardView';
 
+const FIELD_CAPTION_SELECTOR = '.dx-cardview-field-caption';
+const CARD_FIELD_CAPTION_TIMEOUT = 3000;
+
 const getCardFieldCaptions = async (
   t: TestController,
   cardView: CardView,
   expectedCount: number,
   cardIndex = 0,
 ): Promise<string[]> => {
   const card = cardView.getCard(cardIndex);
-  const captions = await card.getCaptions();
 
-  await t.expect(captions.length).eql(expectedCount);
+  await t
+    .expect(card.element.find(FIELD_CAPTION_SELECTOR).count)
+    .eql(expectedCount, { timeout: CARD_FIELD_CAPTION_TIMEOUT });
+
+  const captions = await card.getCaptions();
 
   return captions;
 };

e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling_with_fixed_columns-T1166649 (fluent.blue.light).png

@@ -1,5 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { ClientFunction } from 'testcafe';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
 import { getData } from '../../helpers/generateDataSourceData';
@@ -8,6 +9,47 @@ import { testScreenshot } from '../../../../helpers/themeUtils';
 fixture`Keyboard Navigation.Visual`
   .page(url(__dirname, '../../../container.html'));
 
+const KEYBOARD_NAVIGATION_TIMEOUT = 3000;
+
+const isKeyboardNavigationInProgress = ClientFunction(() => {
+  const dataGrid = ($('#container') as any).dxDataGrid('instance');
+
+  return dataGrid
+    .getController('keyboardNavigation')
+    .navigationToCellInProgress();
+});
+
+const focusDataCell = async (
+  t: TestController,
+  dataGrid: DataGrid,
+  rowIndex: number,
+  columnIndex: number,
+): Promise<void> => {
+  const cell = dataGrid.getDataCell(rowIndex, columnIndex);
+
+  await dataGrid.apiFocus(cell.element);
+  await t
+    .expect(cell.element.focused)
+    .ok({ timeout: KEYBOARD_NAVIGATION_TIMEOUT });
+};
+
+const expectDataCellFocusState = async (
+  t: TestController,
+  dataGrid: DataGrid,
+  rowIndex: number,
+  columnIndex: number,
+): Promise<void> => {
+  await t
+    .expect(dataGrid.getDataCell(rowIndex, columnIndex).isFocused)
+    .ok({ timeout: KEYBOARD_NAVIGATION_TIMEOUT });
+};
+
+const waitForKeyboardNavigation = async (t: TestController): Promise<void> => {
+  await t
+    .expect(isKeyboardNavigationInProgress())
+    .notOk({ timeout: KEYBOARD_NAVIGATION_TIMEOUT });
+};
+
 // Quick navigation through grid cells via Home and End keys
 test('Focus the last cell in the row that contains focus when pressing the End key', async (t) => {
   // arrange
@@ -522,12 +564,11 @@ test('Navigate to last cell in the last row when virtual scrolling is enabled',
     .ok();
 
   // act
-  await t
-    .click(dataGrid.getDataCell(0, 0).element)
-    .pressKey('ctrl+end')
-    .wait(100);
+  await focusDataCell(t, dataGrid, 0, 0);
+  await t.pressKey('ctrl+end');
+  await waitForKeyboardNavigation(t);
 
-  await t.expect(dataGrid.getDataCell(199, 14).element.focused).ok();
+  await expectDataCellFocusState(t, dataGrid, 199, 14);
   await testScreenshot(t, takeScreenshot, 'navigate_to_last_cell_in_last_row_when_virtual_scrolling_is_enabled.png', { element: dataGrid.element });
 
   // assert
@@ -566,12 +607,11 @@ test('Navigate to first cell in the first row when virtual scrolling is enabled'
   await testScreenshot(t, takeScreenshot, 'navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_1.png', { element: dataGrid.element });
 
   // act
-  await t
-    .click(dataGrid.getDataCell(199, 14).element)
-    .pressKey('ctrl+home')
-    .wait(1000);
+  await focusDataCell(t, dataGrid, 199, 14);
+  await t.pressKey('ctrl+home');
+  await waitForKeyboardNavigation(t);
 
-  await t.expect(dataGrid.getDataCell(0, 0).element.focused).ok();
+  await expectDataCellFocusState(t, dataGrid, 0, 0);
   await testScreenshot(t, takeScreenshot, 'navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_2.png', { element: dataGrid.element });
 
   // assert
@@ -600,15 +640,12 @@ test('Navigate to last cell in the last row when virtual scrolling and columns a
     .ok();
 
   // act
-  await t
-    .click(dataGrid.getDataCell(0, 0).element)
-    .pressKey('ctrl+end')
-    .wait(1000);
+  await focusDataCell(t, dataGrid, 0, 0);
+  await t.pressKey('ctrl+end');
+  await waitForKeyboardNavigation(t);
 
   // assert
-  await t
-    .expect(dataGrid.getDataCell(199, 34).element.focused)
-    .ok();
+  await expectDataCellFocusState(t, dataGrid, 199, 34);
 
   await testScreenshot(t, takeScreenshot, 'navigate_to_last_cell_in_last_row_when_virtual_scrolling_and_columns_are_enabled.png', { element: dataGrid.element });
 
@@ -645,15 +682,12 @@ test('Navigate to first cell in the first row when virtual scrolling and columns
   await testScreenshot(t, takeScreenshot, 'navigate_to_first_cell_in_first_row_when_virtual_scrolling_and_columns_are_enabled_1.png', { element: dataGrid.element });
 
   // act
-  await t
-    .click(dataGrid.getDataCell(199, 34).element)
-    .pressKey('ctrl+home')
-    .wait(300);
+  await focusDataCell(t, dataGrid, 199, 34);
+  await t.pressKey('ctrl+home');
+  await waitForKeyboardNavigation(t);
 
   // assert
-  await t
-    .expect(dataGrid.getDataCell(0, 0).element.focused)
-    .ok();
+  await expectDataCellFocusState(t, dataGrid, 0, 0);
 
   await testScreenshot(t, takeScreenshot, 'navigate_to_first_cell_in_first_row_when_virtual_scrolling_and_columns_are_enabled_2.png', { element: dataGrid.element });
 
@@ -682,28 +716,25 @@ test('Navigate to first cell in the first row when virtual scrolling and columns
       .ok();
 
     // act
-    await t
-      .click(dataGrid.getDataCell(0, 1).element)
-      .pressKey('ctrl+end')
-      .wait(1000);
+    await focusDataCell(t, dataGrid, 0, 1);
+    await t.pressKey('ctrl+end');
+    await waitForKeyboardNavigation(t);
 
     // assert
-    await t
-      .expect(dataGrid.getDataCell(199, 35).isFocused)
-      .ok();
+    await expectDataCellFocusState(t, dataGrid, 199, 35);
 
     // act
-    await t
-      .click(dataGrid.getDataCell(199, 35).element)
-      .pressKey('ctrl+home')
-      .wait(1000);
+    await focusDataCell(t, dataGrid, 199, 35);
+    await t.pressKey('ctrl+home');
+    await waitForKeyboardNavigation(t);
+
+    // assert
+    await expectDataCellFocusState(t, dataGrid, 0, 1);
 
     await testScreenshot(t, takeScreenshot, `${useNative ? 'native' : 'simulated'}_scrolling_-_navigate_to_first_cell_row_dragging__virtual_scrolling__virtual_columns.png`, { element: dataGrid.element });
 
     // assert
     await t
-      .expect(dataGrid.getDataCell(0, 1).isFocused)
-      .ok()
       .expect(compareResults.isValid())
       .ok(compareResults.errorMessages());
   }).before(async () => createWidget('dxDataGrid', {
@@ -731,12 +762,11 @@ test('Navigate to first cell in the first row when virtual scrolling and columns
       .ok();
 
     // act
-    await t
-      .click(dataGrid.getDataCell(0, 0).element)
-      .pressKey('ctrl+end')
-      .wait(1000);
+    await focusDataCell(t, dataGrid, 0, 1);
+    await t.pressKey('ctrl+end');
+    await waitForKeyboardNavigation(t);
 
-    await t.expect(dataGrid.getDataCell(199, 35).isFocused).ok();
+    await expectDataCellFocusState(t, dataGrid, 199, 34);
     await testScreenshot(t, takeScreenshot, `${useNative ? 'native' : 'simulated'}_scrolling_-_navigate_to_last_cell_row_dragging__virtual_scrolling__virtual_columns.png`, { element: dataGrid.element });
 
     // assert