diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts index d90a8fffb623..6155431df013 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts @@ -4,97 +4,108 @@ import url from '../../../../helpers/getPageUrl'; import { createWidget } from '../../../../helpers/createWidget'; import { MouseAction, MouseUpEvents } from '../../../../helpers/mouseUpEvents'; import { testScreenshot } from '../../../../helpers/themeUtils'; +import { insertStylesToSuppressGroupPanelFocusOutline } from '../../helpers/domUtils'; +import { removeStylesheetRulesFromPage } from '../../../../helpers/domUtils'; fixture.disablePageReloads`Column reordering.Visual` .page(url(__dirname, '../../../container.html')); -test.skip('column separator should work properly with expand columns', async (t) => { +test('column separator should work properly with expand columns', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const dataGrid = new DataGrid('#container'); await t.expect(dataGrid.isReady()).ok(); - await MouseUpEvents.disable(MouseAction.dragToOffset); await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 0, 30); await testScreenshot(t, takeScreenshot, 'column-separator-with-expand-columns.png'); await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); +}).before(async () => { + await MouseUpEvents.disable(MouseAction.dragToOffset); + await insertStylesToSuppressGroupPanelFocusOutline(); - await MouseUpEvents.enable(MouseAction.dragToOffset); -}).before(async () => createWidget('dxDataGrid', { - width: 800, - dataSource: [ - { - field1: 'test1', field2: 'test2', field3: 'test3', field4: 'test4', - }, - ], - groupPanel: { - visible: true, - }, - columns: [ - { - dataField: 'field1', - width: 200, - groupIndex: 0, - }, { - dataField: 'field2', - width: 200, - groupIndex: 1, - }, { - dataField: 'field3', - width: 200, - }, { - dataField: 'field4', - width: 200, + return createWidget('dxDataGrid', { + width: 800, + dataSource: [ + { + field1: 'test1', field2: 'test2', field3: 'test3', field4: 'test4', + }, + ], + groupPanel: { + visible: true, }, - ], - allowColumnReordering: true, -})); + columns: [ + { + dataField: 'field1', + width: 200, + groupIndex: 0, + }, { + dataField: 'field2', + width: 200, + groupIndex: 1, + }, { + dataField: 'field3', + width: 200, + }, { + dataField: 'field4', + width: 200, + }, + ], + allowColumnReordering: true, + }); +}).after(async () => { + await MouseUpEvents.enable(MouseAction.dragToOffset); + await removeStylesheetRulesFromPage(); +}); test('HeaderRow should be highlighted when dragging column with allowColumnReordering=false', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const dataGrid = new DataGrid('#container'); await t.expect(dataGrid.isReady()).ok(); - await MouseUpEvents.disable(MouseAction.dragToOffset); - await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 0, 30); await testScreenshot(t, takeScreenshot, 'headerRow-highlight-on-drag.png'); await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); +}).before(async () => { + await MouseUpEvents.disable(MouseAction.dragToOffset); + await insertStylesToSuppressGroupPanelFocusOutline(); - await MouseUpEvents.enable(MouseAction.dragToOffset); -}).before(async () => createWidget('dxDataGrid', { - width: 800, - dataSource: [ - { - field1: 'test1', field2: 'test2', field3: 'test3', field4: 'test4', - }, - ], - groupPanel: { - visible: true, - }, - columns: [ - { - dataField: 'field1', - width: 200, - groupIndex: 0, - }, { - dataField: 'field2', - width: 200, - groupIndex: 1, - }, { - dataField: 'field3', - width: 200, - }, { - dataField: 'field4', - width: 200, + return createWidget('dxDataGrid', { + width: 800, + dataSource: [ + { + field1: 'test1', field2: 'test2', field3: 'test3', field4: 'test4', + }, + ], + groupPanel: { + visible: true, }, - ], - allowColumnReordering: false, -})); + columns: [ + { + dataField: 'field1', + width: 200, + groupIndex: 0, + }, { + dataField: 'field2', + width: 200, + groupIndex: 1, + }, { + dataField: 'field3', + width: 200, + }, { + dataField: 'field4', + width: 200, + }, + ], + allowColumnReordering: false, + }); +}).after(async () => { + await MouseUpEvents.enable(MouseAction.dragToOffset); + await removeStylesheetRulesFromPage(); +}); test('The group separator should not appear when dragging a grouped column to the same position', async (t) => { const dataGrid = new DataGrid('#container'); @@ -110,6 +121,7 @@ test('The group separator should not appear when dragging a grouped column to th .ok(compareResults.errorMessages()); }).before(async () => { await MouseUpEvents.disable(MouseAction.dragToOffset); + await insertStylesToSuppressGroupPanelFocusOutline(); return createWidget('dxDataGrid', { width: 800, @@ -141,4 +153,5 @@ test('The group separator should not appear when dragging a grouped column to th }); }).after(async () => { await MouseUpEvents.enable(MouseAction.dragToOffset); + await removeStylesheetRulesFromPage(); }); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/helpers/domUtils.ts b/e2e/testcafe-devextreme/tests/dataGrid/helpers/domUtils.ts index 16b028bbca4e..e72f44524d1b 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/helpers/domUtils.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/helpers/domUtils.ts @@ -1,4 +1,5 @@ import type DataGrid from 'devextreme-testcafe-models/dataGrid'; +import { insertStylesheetRulesToPage } from '../../../helpers/domUtils'; // [borderLeftWidth, borderRightWidth] in pixels type Borders = [left: number, right: number]; @@ -131,3 +132,15 @@ export async function checkSummaryCellBorders( } } } + +/* + Overrides the toolbar items' :focus-visible outline, + because in e2e tests flaky outline would appear + */ +export async function insertStylesToSuppressGroupPanelFocusOutline(): Promise { + await insertStylesheetRulesToPage(` + .dx-group-panel-item:focus-visible:not(.dx-toolbar-item) { + outline: none !important; + } + `); +} diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/header_row_highlight_with_fixed_columns (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/header_row_highlight_with_fixed_columns (fluent.blue.light).png index 47f4dccbad7a..8a400d2513d6 100644 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/header_row_highlight_with_fixed_columns (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/header_row_highlight_with_fixed_columns (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts index a3a8e21767dd..4b7c89e35c2b 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts @@ -5,6 +5,8 @@ import url from '../../../../helpers/getPageUrl'; import { defaultConfig } from '../helpers/data'; import { MouseAction, MouseUpEvents } from '../../../../helpers/mouseUpEvents'; import { testScreenshot } from '../../../../helpers/themeUtils'; +import { removeStylesheetRulesFromPage } from '../../../../helpers/domUtils'; +import { insertStylesToSuppressGroupPanelFocusOutline } from '../../helpers/domUtils'; const DATA_GRID_SELECTOR = '#container'; @@ -181,22 +183,24 @@ test.meta({ browserSize: [900, 800] })('Sticky columns with grouping - overflow // visual: generic.light // visual: material.blue.light // visual: fluent.blue.light -test.meta({ browserSize: [900, 800] })('The header row should be highlighted correctly when dragging column when there are fixed columns and allowColumnReordering=false (generic.light theme)', async (t) => { +test.meta({ browserSize: [900, 800] })('The header row should be highlighted correctly when dragging column when there are fixed columns and allowColumnReordering=false', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const dataGrid = new DataGrid('#container'); await t.expect(dataGrid.isReady()).ok(); - await t.wait(300); await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 200, 35); - await t.wait(200); + + await t.expect(dataGrid.getHeaders().getHeaderRow(0).isHighlighted()).ok(); await testScreenshot(t, takeScreenshot, 'header_row_highlight_with_fixed_columns.png', { element: dataGrid.element }); + await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); }).before(async () => { await MouseUpEvents.disable(MouseAction.dragToOffset); + await insertStylesToSuppressGroupPanelFocusOutline(); return createWidget('dxDataGrid', { ...defaultConfig, @@ -210,6 +214,7 @@ test.meta({ browserSize: [900, 800] })('The header row should be highlighted cor }); }).after(async () => { await MouseUpEvents.enable(MouseAction.dragToOffset); + await removeStylesheetRulesFromPage(); }); test.meta({ browserSize: [900, 800] })('The group separator should be visible when dragging a fixed column into the group panel', async (t) => { diff --git a/packages/testcafe-models/dataGrid/headers/row.ts b/packages/testcafe-models/dataGrid/headers/row.ts index d7e228f6656f..279817b89d5e 100644 --- a/packages/testcafe-models/dataGrid/headers/row.ts +++ b/packages/testcafe-models/dataGrid/headers/row.ts @@ -1,6 +1,11 @@ import FocusableElement from '../../internal/focusable'; import HeaderCell from './cell'; import CommandCell from '../commandCell'; +import Widget from '../../internal/widget'; + +const CLASS = { + dropHighlight: 'drop-highlight', +}; export default class HeaderRow extends FocusableElement { widgetName: string; @@ -37,4 +42,8 @@ export default class HeaderRow extends FocusableElement { getCommandCell(index: number): CommandCell { return new CommandCell(this.element, index, this.widgetName); } + + isHighlighted(): Promise { + return this.element.hasClass(Widget.addClassPrefix(this.widgetName, CLASS.dropHighlight)); + } }