Skip to content

Grids stabilize tests after toolbar KBN changes #34364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tucchhaa merged 9 commits into from
Jul 21, 2026
Merged

Grids stabilize tests after toolbar KBN changes #34364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5d237ab
temp fix
Jul 17, 2026
bf2e07f
temp
Jul 20, 2026
5e3da68
temp
Jul 20, 2026
3602cb4
Merge branch 'main' into fix_test_26_2
Tucchhaa Jul 20, 2026
b55c84c
remove t.wait
Jul 20, 2026
8ae2a3f
remove temp
Jul 20, 2026
90408d3
apply styles to the tests separately
Jul 21, 2026
a3f2c11
fix other tests too
Jul 21, 2026
977fcf6
apply review
Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 75 additions & 62 deletions e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {

@Tucchhaa Tucchhaa Jul 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this test was not flaky, but its test case is similar to the flaky one, so I have added styles to prevent its flakiness in the future

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) => {

@Tucchhaa Tucchhaa Jul 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this test was not flaky, but its test case is similar to the flaky one, so I have added styles to prevent its flakiness in the future

const dataGrid = new DataGrid('#container');
Expand All @@ -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,
Expand Down Expand Up @@ -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();
});
13 changes: 13 additions & 0 deletions e2e/testcafe-devextreme/tests/dataGrid/helpers/domUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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];
Expand Down Expand Up @@ -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<void> {
await insertStylesheetRulesToPage(`
.dx-group-panel-item:focus-visible:not(.dx-toolbar-item) {
outline: none !important;
}
`);
}
Binary file modified .../common/etalons/header_row_highlight_with_fixed_columns (fluent.blue.light).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 8 additions & 3 deletions e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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();

@bit-byte0 bit-byte0 Jul 21, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is the outline override still needed now that the explicit isHighlighted() wait is in place, or does the flaky outline still appear without it?

@Tucchhaa Tucchhaa Jul 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's still needed. I have added isHighlighted() to remove t.wait, but it doesn't resolve flakiness


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,
Expand All @@ -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) => {
Expand Down
9 changes: 9 additions & 0 deletions packages/testcafe-models/dataGrid/headers/row.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -37,4 +42,8 @@ export default class HeaderRow extends FocusableElement {
getCommandCell(index: number): CommandCell {
return new CommandCell(this.element, index, this.widgetName);
}

isHighlighted(): Promise<boolean> {
return this.element.hasClass(Widget.addClassPrefix(this.widgetName, CLASS.dropHighlight));
}
}
Loading