diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/bugs.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/bugs.ts
index 4a1b7a8ccd1d..880c3fb90412 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/bugs.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/bugs.ts
@@ -3,7 +3,7 @@ import { createWidget } from '../../../../helpers/createWidget';
import url from '../../../../helpers/getPageUrl';
import { getData } from '../../helpers/generateDataSourceData';
-fixture`Accessibility bugs`
+fixture.disablePageReloads`Accessibility bugs`
.page(url(__dirname, '../../../container.html'));
test('T1187314 - DataGrid displays an incorrect row count in "aria-label" if there is no data after filtering', async (t) => {
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts
index 77f7612dfa18..37bbd64a5e2b 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts
@@ -2,1183 +2,586 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
import DataGrid from 'devextreme-testcafe-models/dataGrid';
import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter';
-import { a11yCheck } from '../../../../helpers/accessibility/utils';
import url from '../../../../helpers/getPageUrl';
import { createWidget } from '../../../../helpers/createWidget';
import { getData } from '../../helpers/generateDataSourceData';
-import { Themes } from '../../../../helpers/themes';
-import { changeTheme } from '../../../../helpers/changeTheme';
-fixture`Common tests with axe`
+fixture.disablePageReloads`Common tests`
.page(url(__dirname, '../../../container.html'));
const DATA_GRID_SELECTOR = '#container';
-[
- Themes.genericLight,
- Themes.genericDark,
- Themes.materialBlue,
- Themes.materialBlueDark,
- Themes.fluentBlue,
- Themes.fluentBlueDark,
-].forEach((theme) => {
- const a11yCheckConfig = theme === Themes.genericLight ? {} : {
- runOnly: 'color-contrast',
- };
- const isFluent = theme === Themes.fluentBlue || theme === Themes.fluentBlueDark;
- const screenshotCheck = async (
- t: TestController,
- screenshotName: string,
- themeName: string,
- element: Selector,
- ) => {
- const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
- await t
- .expect(await takeScreenshot(`${screenshotName}_${themeName}.png`, element))
- .ok()
- .expect(compareResults.isValid())
- .ok(compareResults.errorMessages());
- };
-
- test(`Grid without data in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'no-data', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: [],
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Sorting and group panel in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'sorting-and-group-panel', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- groupPanel: {
- visible: true,
- },
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- {
- dataField: 'field_3',
- sortOrder: 'asc',
- sortIndex: 0,
- },
- {
- dataField: 'field_4',
- sortOrder: 'desc',
- sortIndex: 1,
- },
- ],
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Paging with displayMode is 'full' in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'paging-full-display-mode', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(100, 5),
- keyExpr: 'field_0',
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- paging: {
- pageSize: 5,
- },
- pager: {
- visible: true,
- allowedPageSizes: [5, 10, 'all'],
- showPageSizeSelector: true,
- showInfo: true,
- showNavigationButtons: true,
- displayMode: 'full',
- },
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Paging with displayMode is 'compact' in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'paging-compact-display-mode', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(100, 5),
- keyExpr: 'field_0',
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- paging: {
- pageSize: 5,
- },
- pager: {
- visible: true,
- allowedPageSizes: [5, 10, 'all'],
- showPageSizeSelector: true,
- showInfo: true,
- showNavigationButtons: true,
- displayMode: 'compact',
- },
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Grouping and Summary in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'grouping-and-summary', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(60, 5),
- keyExpr: 'field_0',
- columns: [
- 'field_0',
- {
- dataField: 'field_1',
- groupIndex: 0,
- },
- {
- dataField: 'field_2',
- groupIndex: 1,
- },
- 'field_3',
- 'field_4',
- ],
- paging: {
- pageSize: 10,
- },
- groupPanel: {
- visible: true,
- },
- summary: {
- groupItems: [{
- column: 'field_3',
- summaryType: 'count',
- showInGroupFooter: true,
- }, {
- column: 'field_4',
- summaryType: 'count',
- showInGroupFooter: false,
- alignByColumn: true,
- }],
- totalItems: [{
- column: 'field_0',
- summaryType: 'count',
- }],
- },
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Filter row - filter menu in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await t.click(filterEditor.menuButton);
-
- // assert
- await t
- .expect(filterEditor.menu.isOpened)
- .ok();
-
- // act
- await a11yCheck(t, {
- ...a11yCheckConfig,
- runOnly: '',
- rules: {
- 'aria-command-name': { enabled: true },
- },
- });
- if (isFluent) {
- await screenshotCheck(t, 'filter-row-menu', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5).map((item, index) => ({ ...item, index })),
- keyExpr: 'field_0',
- filterRow: {
- visible: true,
- },
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- {
- dataField: 'index',
- dataType: 'number',
- selectedFilterOperation: 'between',
- filterValue: [1, 7],
- },
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Header filter - filter menu in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const headerCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0);
- const filterIconElement = headerCell.getFilterIcon();
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await t.click(filterIconElement);
-
- // assert
- await t
- .expect(new HeaderFilter().element.exists)
- .ok();
-
- // act
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, 'header-filter-menu', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- headerFilter: {
- visible: true,
- },
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Filter panel in ${theme}`, async (t) => {
+// visual: fluent.blue.light
+// visual: fluent.blue.dark
+const screenshotCheck = async (
+ t: TestController,
+ screenshotName: string,
+) => {
+ const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+ await t
+ .expect(await takeScreenshot(`${screenshotName}.png`))
+ .ok()
+ .expect(compareResults.isValid())
+ .ok(compareResults.errorMessages());
+};
+
+test('Grid without data', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'no-data');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: [],
+}));
+
+test('Sorting and group panel', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'sorting-and-group-panel');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ groupPanel: {
+ visible: true,
+ },
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ {
+ dataField: 'field_3',
+ sortOrder: 'asc',
+ sortIndex: 0,
+ },
+ {
+ dataField: 'field_4',
+ sortOrder: 'desc',
+ sortIndex: 1,
+ },
+ ],
+}));
+
+test('Paging with displayMode is \'full\'', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'paging-full-display-mode');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(100, 5),
+ keyExpr: 'field_0',
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+ paging: {
+ pageSize: 5,
+ },
+ pager: {
+ visible: true,
+ allowedPageSizes: [5, 10, 'all'],
+ showPageSizeSelector: true,
+ showInfo: true,
+ showNavigationButtons: true,
+ displayMode: 'full',
+ },
+}));
+
+test('Paging with displayMode is \'compact\'', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'paging-compact-display-mode');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(100, 5),
+ keyExpr: 'field_0',
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+ paging: {
+ pageSize: 5,
+ },
+ pager: {
+ visible: true,
+ allowedPageSizes: [5, 10, 'all'],
+ showPageSizeSelector: true,
+ showInfo: true,
+ showNavigationButtons: true,
+ displayMode: 'compact',
+ },
+}));
+
+test('Grouping and Summary', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'grouping-and-summary');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(60, 5),
+ keyExpr: 'field_0',
+ columns: [
+ 'field_0',
+ {
+ dataField: 'field_1',
+ groupIndex: 0,
+ },
+ {
+ dataField: 'field_2',
+ groupIndex: 1,
+ },
+ 'field_3',
+ 'field_4',
+ ],
+ paging: {
+ pageSize: 10,
+ },
+ groupPanel: {
+ visible: true,
+ },
+ summary: {
+ groupItems: [{
+ column: 'field_3',
+ summaryType: 'count',
+ showInGroupFooter: true,
+ }, {
+ column: 'field_4',
+ summaryType: 'count',
+ showInGroupFooter: false,
+ alignByColumn: true,
+ }],
+ totalItems: [{
+ column: 'field_0',
+ summaryType: 'count',
+ }],
+ },
+}));
+
+test('Filter row - filter menu', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await t.click(filterEditor.menuButton);
+
+ await t
+ .expect(filterEditor.menu.isOpened)
+ .ok();
+
+ await screenshotCheck(t, 'filter-row-menu');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5).map((item, index) => ({ ...item, index })),
+ keyExpr: 'field_0',
+ filterRow: {
+ visible: true,
+ },
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ {
+ dataField: 'index',
+ dataType: 'number',
+ selectedFilterOperation: 'between',
+ filterValue: [1, 7],
+ },
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Header filter - filter menu', async (t) => {
// arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const filterPanel = dataGrid.getFilterPanel();
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok()
- .expect(filterPanel.getFilterText().element.textContent)
- .eql('[Field 1] Contains \'val\'');
-
- // act
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, 'filter-panel', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- filterPanel: {
- visible: true,
- },
- columns: [
- 'field_0',
- {
- dataField: 'field_1',
- filterValue: 'val',
- },
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Filter panel - popup with filter builder in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const filterPanel = dataGrid.getFilterPanel();
- const filterPanelIcon = filterPanel.getIconFilter();
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await t.click(filterPanelIcon.element);
-
- // assert
- await t
- .expect(filterPanel.isOpened)
- .ok();
-
- // act
- await a11yCheck(t, {
- ...a11yCheckConfig,
- runOnly: '',
- rules: {
- 'color-contrast': { enabled: false },
- },
- });
- if (isFluent) {
- await screenshotCheck(t, 'filter-builder', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- filterPanel: {
- visible: true,
- },
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Search panel in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'search-panel', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- searchPanel: {
- visible: true,
- },
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Search panel - highlight in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t, {
- ...a11yCheckConfig,
- runOnly: '',
- rules: {
- 'color-contrast': { enabled: false },
- },
- }, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'search-panel-highlight', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- searchPanel: {
- visible: true,
- text: 'val',
- },
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Selection in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- await t
- .expect(dataGrid.isReady())
- .ok()
- .expect(dataGrid.getDataRow(1).isSelected)
- .ok()
- .expect(dataGrid.getDataRow(2).isSelected)
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'selection', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- selection: {
- mode: 'multiple',
- showCheckBoxesMode: 'always',
- },
- selectedRowKeys: ['val_1_0', 'val_2_0'],
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Focused row in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok()
- .expect(dataGrid.getDataRow(1).isFocusedRow)
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'focused-row', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- focusedRowEnabled: true,
- focusedRowKey: 'val_1_0',
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Fixed columns in ${theme}`, async (t) => {
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'fixed-columns', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 7),
- keyExpr: 'field_0',
- columnFixing: {
- // @ts-expect-error private option
- legacyMode: true,
- },
- columns: [
- {
- dataField: 'field_0',
- fixed: true,
- },
- {
- dataField: 'field_1',
- fixed: true,
- },
- 'field_2',
- 'field_3',
- 'field_4',
- {
- dataField: 'field_5',
- fixed: true,
- fixedPosition: 'right',
- },
- {
- dataField: 'field_6',
- fixed: true,
- fixedPosition: 'right',
- },
- ],
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Column chooser with the 'dragAndDrop' mode in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const columnChooser = dataGrid.getColumnChooser();
- const columnChooserButton = dataGrid.getColumnChooserButton();
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await t.click(columnChooserButton);
-
- // assert
- await t
- .expect(columnChooser.isOpened)
- .ok();
-
- // act, assert
- await a11yCheck(t, a11yCheckConfig);
- if (isFluent) {
- await screenshotCheck(t, 'column-chooser-drag_and_drop-mode', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 7),
- keyExpr: 'field_0',
- columnChooser: {
- enabled: true,
- mode: 'dragAndDrop',
- },
- columns: [
- {
- dataField: 'field_0',
- visible: false,
- },
- {
- dataField: 'field_1',
- visible: false,
- },
- 'field_2',
- 'field_3',
- 'field_4',
- 'field_5',
- 'field_6',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Column chooser with the 'select' mode in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const columnChooser = dataGrid.getColumnChooser();
- const columnChooserButton = dataGrid.getColumnChooserButton();
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await t.click(columnChooserButton);
-
- // assert
- await t
- .expect(columnChooser.isOpened)
- .ok();
-
- // act, assert
- await a11yCheck(t, {
- ...a11yCheckConfig,
- runOnly: '',
- rules: {
- 'scrollable-region-focusable': { enabled: false },
- },
- });
- if (isFluent) {
- await screenshotCheck(t, 'column-chooser-select-mode', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 7),
- keyExpr: 'field_0',
- columnChooser: {
- enabled: true,
- mode: 'select',
- },
- columns: [
- {
- dataField: 'field_0',
- visible: false,
- },
- {
- dataField: 'field_1',
- visible: false,
- },
- 'field_2',
- 'field_3',
- 'field_4',
- 'field_5',
- 'field_6',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Empty column chooser in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const columnChooser = dataGrid.getColumnChooser();
- const columnChooserButton = dataGrid.getColumnChooserButton();
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await t.click(columnChooserButton);
-
- // assert
- await t
- .expect(columnChooser.isOpened)
- .ok();
-
- // act, assert
- await a11yCheck(t, {
- ...a11yCheckConfig,
- runOnly: '',
- rules: {
- 'aria-required-children': { enabled: false },
- },
- });
- if (isFluent) {
- await screenshotCheck(t, 'empty-column-chooser', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- columnChooser: {
- enabled: true,
- },
- columns: [
- 'field_0',
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- [false, true].forEach((useIcons) => {
- test(`Row editing mode with useIcons=${useIcons} in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act, assert
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, `row-editing-mode-with-useIcons=${useIcons}`, theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'row',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- useIcons,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Row in edit state with useIcons=${useIcons} in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await dataGrid.apiEditRow(0);
-
- // assert
- await t
- .expect(dataGrid.getDataRow(0).isEdited)
- .ok();
-
- // act, assert
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, `row-edit-state-with-useIcons=${useIcons}`, theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'row',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- useIcons,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
- });
-
- test(`Row editing mode in ${theme} - confirm delete message`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const isDialogOpened = dataGrid.getDialog().exists;
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await dataGrid.apiDeleteRow(0);
-
- // assert
- await t
- .expect(isDialogOpened)
- .ok();
-
- // act, assert
- await a11yCheck(t, {
- ...a11yCheckConfig,
- runOnly: '',
- });
- if (isFluent) {
- await screenshotCheck(t, 'row-editing-mode', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'row',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Batch editing mode in ${theme} - edit cell`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await dataGrid.apiEditCell(0, 0);
-
- // assert
- await t
- .expect(dataGrid.getDataCell(0, 0).isEditCell)
- .ok();
-
- // act, assert
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'batch-editing-mode-edit_cell', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'batch',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Batch editing mode in ${theme} - modified cell`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await dataGrid.apiCellValue(0, 0, 'test');
-
- // assert
- await t
- .expect(dataGrid.getDataCell(0, 0).isModified)
- .ok();
-
- // act, assert
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'row-editing-mode-modified_cell', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'batch',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Batch editing mode in ${theme} - delete row`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await dataGrid.apiDeleteRow(0);
-
- // assert
- await t
- .expect(dataGrid.getDataRow(0).isRemoved)
- .ok();
-
- // act, assert
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, 'row-editing-mode-delete_row', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'batch',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Form editing mode in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await dataGrid.apiEditRow(0);
-
- // assert
- await t
- .expect(dataGrid.getEditForm().element.exists)
- .ok();
-
- // act, assert
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, 'form-editing-mode', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'form',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Popup editing mode in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await dataGrid.apiEditRow(0);
-
- // assert
- await t
- .expect(dataGrid.getPopupEditForm().element.exists)
- .ok();
-
- // act, assert
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, 'popup-editing-mode', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'popup',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Validation in cell editing mode in ${theme}`, async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const headerCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0);
+ const filterIconElement = headerCell.getFilterIcon();
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await t.click(filterIconElement);
+
+ // assert
+ await t
+ .expect(new HeaderFilter().element.exists)
+ .ok();
+
+ await screenshotCheck(t, 'header-filter-menu');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ headerFilter: {
+ visible: true,
+ },
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Filter panel', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const filterPanel = dataGrid.getFilterPanel();
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok()
+ .expect(filterPanel.getFilterText().element.textContent)
+ .eql('[Field 1] Contains \'val\'');
+
+ await screenshotCheck(t, 'filter-panel');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ filterPanel: {
+ visible: true,
+ },
+ columns: [
+ 'field_0',
+ {
+ dataField: 'field_1',
+ filterValue: 'val',
+ },
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Filter panel - popup with filter builder', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const filterPanel = dataGrid.getFilterPanel();
+ const filterPanelIcon = filterPanel.getIconFilter();
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await t.click(filterPanelIcon.element);
+
+ // assert
+ await t
+ .expect(filterPanel.isOpened)
+ .ok();
+
+ await screenshotCheck(t, 'filter-builder');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ filterPanel: {
+ visible: true,
+ },
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Search panel', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'search-panel');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ searchPanel: {
+ visible: true,
+ },
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}));
+
+test('Search panel - highlight', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'search-panel-highlight');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ searchPanel: {
+ visible: true,
+ text: 'val',
+ },
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}));
+
+test('Selection', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ await t
+ .expect(dataGrid.isReady())
+ .ok()
+ .expect(dataGrid.getDataRow(1).isSelected)
+ .ok()
+ .expect(dataGrid.getDataRow(2).isSelected)
+ .ok();
+
+ await screenshotCheck(t, 'selection');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ selection: {
+ mode: 'multiple',
+ showCheckBoxesMode: 'always',
+ },
+ selectedRowKeys: ['val_1_0', 'val_2_0'],
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}));
+
+test('Focused row', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok()
+ .expect(dataGrid.getDataRow(1).isFocusedRow)
+ .ok();
+
+ await screenshotCheck(t, 'focused-row');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ focusedRowEnabled: true,
+ focusedRowKey: 'val_1_0',
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}));
+
+test('Fixed columns', async (t) => {
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'fixed-columns');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 7),
+ keyExpr: 'field_0',
+ columnFixing: {
+ // @ts-expect-error private option
+ legacyMode: true,
+ },
+ columns: [
+ {
+ dataField: 'field_0',
+ fixed: true,
+ },
+ {
+ dataField: 'field_1',
+ fixed: true,
+ },
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ {
+ dataField: 'field_5',
+ fixed: true,
+ fixedPosition: 'right',
+ },
+ {
+ dataField: 'field_6',
+ fixed: true,
+ fixedPosition: 'right',
+ },
+ ],
+}));
+
+test('Column chooser with the \'dragAndDrop\' mode', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const columnChooser = dataGrid.getColumnChooser();
+ const columnChooserButton = dataGrid.getColumnChooserButton();
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await t.click(columnChooserButton);
+
+ // assert
+ await t
+ .expect(columnChooser.isOpened)
+ .ok();
+
+ await screenshotCheck(t, 'column-chooser-drag_and_drop-mode');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 7),
+ keyExpr: 'field_0',
+ columnChooser: {
+ enabled: true,
+ mode: 'dragAndDrop',
+ },
+ columns: [
+ {
+ dataField: 'field_0',
+ visible: false,
+ },
+ {
+ dataField: 'field_1',
+ visible: false,
+ },
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ 'field_5',
+ 'field_6',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Column chooser with the \'select\' mode', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const columnChooser = dataGrid.getColumnChooser();
+ const columnChooserButton = dataGrid.getColumnChooserButton();
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await t.click(columnChooserButton);
+
+ // assert
+ await t
+ .expect(columnChooser.isOpened)
+ .ok();
+
+ await screenshotCheck(t, 'column-chooser-select-mode');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 7),
+ keyExpr: 'field_0',
+ columnChooser: {
+ enabled: true,
+ mode: 'select',
+ },
+ columns: [
+ {
+ dataField: 'field_0',
+ visible: false,
+ },
+ {
+ dataField: 'field_1',
+ visible: false,
+ },
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ 'field_5',
+ 'field_6',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Empty column chooser', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const columnChooser = dataGrid.getColumnChooser();
+ const columnChooserButton = dataGrid.getColumnChooserButton();
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await t.click(columnChooserButton);
+
+ // assert
+ await t
+ .expect(columnChooser.isOpened)
+ .ok();
+
+ await screenshotCheck(t, 'empty-column-chooser');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ columnChooser: {
+ enabled: true,
+ },
+ columns: [
+ 'field_0',
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+[false, true].forEach((useIcons) => {
+ test(`Row editing mode with useIcons=${useIcons}`, async (t) => {
// arrange
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
@@ -1187,52 +590,26 @@ const DATA_GRID_SELECTOR = '#container';
.expect(dataGrid.isReady())
.ok();
- // act
- await t
- .click(dataGrid.getDataCell(0, 0).element)
- .pressKey('ctrl+a backspace enter');
-
- // assert
- await t
- .expect(dataGrid.getRevertTooltip().exists)
- .ok()
- .expect(dataGrid.getInvalidMessageTooltip().exists)
- .ok();
-
- // act, assert
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, 'validation-in-cell-editing-mode', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'cell',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- },
- columns: [
- {
- dataField: 'field_1',
- validationRules: [{ type: 'required' }],
- },
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Error row in ${theme}`, async (t) => {
+ await screenshotCheck(t, `row-editing-mode-with-useIcons=${useIcons}`);
+ }).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'row',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ useIcons,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+ }, DATA_GRID_SELECTOR));
+
+ test(`Row in edit state with useIcons=${useIcons}`, async (t) => {
// arrange
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
@@ -1249,211 +626,431 @@ const DATA_GRID_SELECTOR = '#container';
.expect(dataGrid.getDataRow(0).isEdited)
.ok();
- // act
- await dataGrid.apiCellValue(0, 0, 'test');
- await dataGrid.apiSaveEditData();
-
- // assert
- await t
- .expect(dataGrid.getErrorRow().exists)
- .ok();
-
- // act, assert
- await a11yCheck(t);
- if (isFluent) {
- await screenshotCheck(t, 'error-row', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- editing: {
- mode: 'row',
- allowUpdating: true,
- allowDeleting: true,
- allowAdding: true,
- },
- columns: [
- 'field_1',
- 'field_2',
- 'field_3',
- 'field_4',
- ],
- onRowValidating(e) {
- e.isValid = false;
- e.errorText = 'Test';
- },
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Adaptability in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await dataGrid.apiExpandAdaptiveDetailRow('val_0_0');
-
- // assert
- await t
- .expect(dataGrid.getAdaptiveRow(0).element.exists)
- .ok();
-
- // act, assert
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'adaptive-row', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 10),
- keyExpr: 'field_0',
- columnWidth: 100,
- width: 800,
- columnHidingEnabled: true,
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Row drag and drop in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act, assert
- await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
- if (isFluent) {
- await screenshotCheck(t, 'row-drag-and-drop', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- rowDragging: {
- allowReordering: true,
- showDragIcons: true,
- },
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Export in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const headerPanel = dataGrid.getHeaderPanel();
- const exportButton = headerPanel.getExportButton();
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await t.click(exportButton.element);
-
- // assert
- await t
- .expect(exportButton.isOpened)
- .ok();
-
- // act, assert
- await a11yCheck(t, {
- ...a11yCheckConfig,
- runOnly: '',
- });
- if (isFluent) {
- await screenshotCheck(t, 'export-button', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- export: {
- enabled: true,
- formats: ['xlsx', 'pdf'],
- allowExportSelectedData: true,
- },
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
-
- test(`Context menu in ${theme}`, async (t) => {
- // arrange
- const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
- const contextMenu = dataGrid.getContextMenu();
- const headerRow = dataGrid.getHeaders().getHeaderRow(0);
-
- // assert
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- // act
- await t.rightClick(headerRow.element);
-
- // assert
- await t
- .expect(contextMenu.isOpened)
- .ok();
-
- // act, assert
- await a11yCheck(t, {
- ...a11yCheckConfig,
- runOnly: '',
- rules: {
- region: { enabled: false },
- },
- });
- if (isFluent) {
- await screenshotCheck(t, 'context-menu', theme, dataGrid.element);
- }
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- dataSource: getData(10, 5),
- keyExpr: 'field_0',
- columnFixing: {
- enabled: true,
- // @ts-expect-error private option
- legacyMode: true,
- },
- sorting: {
- mode: 'multiple',
- },
- }, DATA_GRID_SELECTOR, {
- disableFxAnimation: true,
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
+ await screenshotCheck(t, `row-edit-state-with-useIcons=${useIcons}`);
+ }).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'row',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ useIcons,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+ }, DATA_GRID_SELECTOR));
});
+
+test('Row editing mode - confirm delete message', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const isDialogOpened = dataGrid.getDialog().exists;
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await dataGrid.apiDeleteRow(0);
+
+ // assert
+ await t
+ .expect(isDialogOpened)
+ .ok();
+
+ await screenshotCheck(t, 'row-editing-mode');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'row',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Batch editing mode - edit cell', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await dataGrid.apiEditCell(0, 0);
+
+ // assert
+ await t
+ .expect(dataGrid.getDataCell(0, 0).isEditCell)
+ .ok();
+
+ await screenshotCheck(t, 'batch-editing-mode-edit_cell');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'batch',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Batch editing mode - modified cell', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await dataGrid.apiCellValue(0, 0, 'test');
+
+ // assert
+ await t
+ .expect(dataGrid.getDataCell(0, 0).isModified)
+ .ok();
+
+ await screenshotCheck(t, 'row-editing-mode-modified_cell');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'batch',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Batch editing mode - delete row', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await dataGrid.apiDeleteRow(0);
+
+ // assert
+ await t
+ .expect(dataGrid.getDataRow(0).isRemoved)
+ .ok();
+
+ await screenshotCheck(t, 'row-editing-mode-delete_row');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'batch',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Form editing mode', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await dataGrid.apiEditRow(0);
+
+ // assert
+ await t
+ .expect(dataGrid.getEditForm().element.exists)
+ .ok();
+
+ await screenshotCheck(t, 'form-editing-mode');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'form',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Popup editing mode', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await dataGrid.apiEditRow(0);
+
+ // assert
+ await t
+ .expect(dataGrid.getPopupEditForm().element.exists)
+ .ok();
+
+ await screenshotCheck(t, 'popup-editing-mode');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'popup',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Validation in cell editing mode', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await t
+ .click(dataGrid.getDataCell(0, 0).element)
+ .pressKey('ctrl+a backspace enter');
+
+ // assert
+ await t
+ .expect(dataGrid.getRevertTooltip().exists)
+ .ok()
+ .expect(dataGrid.getInvalidMessageTooltip().exists)
+ .ok();
+
+ await screenshotCheck(t, 'validation-in-cell-editing-mode');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'cell',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ },
+ columns: [
+ {
+ dataField: 'field_1',
+ validationRules: [{ type: 'required' }],
+ },
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+}, DATA_GRID_SELECTOR));
+
+test('Error row', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await dataGrid.apiEditRow(0);
+
+ // assert
+ await t
+ .expect(dataGrid.getDataRow(0).isEdited)
+ .ok();
+
+ // act
+ await dataGrid.apiCellValue(0, 0, 'test');
+ await dataGrid.apiSaveEditData();
+
+ // assert
+ await t
+ .expect(dataGrid.getErrorRow().exists)
+ .ok();
+
+ await screenshotCheck(t, 'error-row');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ editing: {
+ mode: 'row',
+ allowUpdating: true,
+ allowDeleting: true,
+ allowAdding: true,
+ },
+ columns: [
+ 'field_1',
+ 'field_2',
+ 'field_3',
+ 'field_4',
+ ],
+ onRowValidating(e) {
+ e.isValid = false;
+ e.errorText = 'Test';
+ },
+}, DATA_GRID_SELECTOR));
+
+test('Adaptability', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await dataGrid.apiExpandAdaptiveDetailRow('val_0_0');
+
+ // assert
+ await t
+ .expect(dataGrid.getAdaptiveRow(0).element.exists)
+ .ok();
+
+ await screenshotCheck(t, 'adaptive-row');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 10),
+ keyExpr: 'field_0',
+ columnWidth: 100,
+ width: 800,
+ columnHidingEnabled: true,
+}, DATA_GRID_SELECTOR));
+
+test('Row drag and drop', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ await screenshotCheck(t, 'row-drag-and-drop');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ rowDragging: {
+ allowReordering: true,
+ showDragIcons: true,
+ },
+}, DATA_GRID_SELECTOR));
+
+test('Export', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const headerPanel = dataGrid.getHeaderPanel();
+ const exportButton = headerPanel.getExportButton();
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await t.click(exportButton.element);
+
+ // assert
+ await t
+ .expect(exportButton.isOpened)
+ .ok();
+
+ await screenshotCheck(t, 'export-button');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ export: {
+ enabled: true,
+ formats: ['xlsx', 'pdf'],
+ allowExportSelectedData: true,
+ },
+}, DATA_GRID_SELECTOR));
+
+test('Context menu', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+ const contextMenu = dataGrid.getContextMenu();
+ const headerRow = dataGrid.getHeaders().getHeaderRow(0);
+
+ // assert
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+
+ // act
+ await t.rightClick(headerRow.element);
+
+ // assert
+ await t
+ .expect(contextMenu.isOpened)
+ .ok();
+
+ await screenshotCheck(t, 'context-menu');
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(10, 5),
+ keyExpr: 'field_0',
+ columnFixing: {
+ enabled: true,
+ // @ts-expect-error private option
+ legacyMode: true,
+ },
+ sorting: {
+ mode: 'multiple',
+ },
+}, DATA_GRID_SELECTOR));
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts
index 6fbb7dce59d3..c5dfd3935c81 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts
@@ -4,102 +4,81 @@ import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTex
import url from '../../../../helpers/getPageUrl';
import { createWidget } from '../../../../helpers/createWidget';
import { getData } from '../../helpers/generateDataSourceData';
-import { Themes } from '../../../../helpers/themes';
-import { changeTheme } from '../../../../helpers/changeTheme';
fixture.disablePageReloads`DataGrid - contrast`
.page(url(__dirname, '../../../container.html'));
// T1257970
-[
- Themes.genericLight,
- Themes.fluentBlue,
- Themes.materialBlue,
-].forEach((theme) => {
- test('DataGrid - Contrast between icons in the Filter Row menu and their background doesn\'t comply with WCAG accessibility standards', async (t) => {
- const dataGrid = new DataGrid('#container');
- const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
- const searchButton = filterEditor.menuButton;
- const filterMenu = filterEditor.menu;
- const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+// visual: generic.light
+// visual: fluent.blue.light
+// visual: material.blue.light
+test('DataGrid - Contrast between icons in the Filter Row menu and their background doesn\'t comply with WCAG accessibility standards', async (t) => {
+ const dataGrid = new DataGrid('#container');
+ const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+ const searchButton = filterEditor.menuButton;
+ const filterMenu = filterEditor.menu;
+ const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
- await t
- .expect(dataGrid.isReady())
- .ok();
- await t
- .click(searchButton)
- .expect(filterMenu.element.exists)
- .ok();
- await t
- .expect(await takeScreenshot(`T1257970-datagrid-menu-icon-contrast-${theme}.png`, dataGrid.element))
- .ok()
- .expect(compareResults.isValid())
- .ok(compareResults.errorMessages());
- }).before(
- async () => {
- await changeTheme(theme);
- await createWidget('dxDataGrid', {
- dataSource: getData(5, 5),
- filterRow: {
- visible: true,
- },
- });
- },
- ).after(
- async () => {
- if (theme === Themes.genericLight) {
- return;
- }
- await changeTheme(Themes.genericLight);
- },
- );
-});
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
+ await t
+ .click(searchButton)
+ .expect(filterMenu.element.exists)
+ .ok();
+ await t
+ .expect(await takeScreenshot('T1257970-datagrid-menu-icon-contrast-generic.light.png', dataGrid.element))
+ .ok()
+ .expect(compareResults.isValid())
+ .ok(compareResults.errorMessages());
+}).before(
+ async () => {
+ await createWidget('dxDataGrid', {
+ dataSource: getData(5, 5),
+ filterRow: {
+ visible: true,
+ },
+ });
+ },
+);
// T1286345
-[
- Themes.genericLight,
- Themes.fluentBlue,
- Themes.materialBlue,
-].forEach((theme) => {
- test('DataGrid - Filter icon should remain visible when it\'s focused', async (t) => {
- const dataGrid = new DataGrid('#container');
- const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+// visual: generic.light
+// visual: fluent.blue.light
+// visual: material.blue.light
+test('DataGrid - Filter icon should remain visible when it\'s focused', async (t) => {
+ const dataGrid = new DataGrid('#container');
+ const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
- await t
- .expect(dataGrid.isReady())
- .ok();
+ await t
+ .expect(dataGrid.isReady())
+ .ok();
- const searchIconContainer = dataGrid
- .getHeaders()
- .getFilterRow()
- .getFilterCell(1)
- .getSearchIcon()
- .element;
+ const searchIconContainer = dataGrid
+ .getHeaders()
+ .getFilterRow()
+ .getFilterCell(1)
+ .getSearchIcon()
+ .element;
- await t
- .click(dataGrid.getFilterCell(0))
- .pressKey('tab')
- .expect(searchIconContainer.focused)
- .ok();
+ await t
+ .click(dataGrid.getFilterCell(0))
+ .pressKey('tab')
+ .expect(searchIconContainer.focused)
+ .ok();
- await t
- .expect(await takeScreenshot(`T1286345-datagrid-menu-icon-when-focused-${theme}.png`, dataGrid.element))
- .ok()
- .expect(compareResults.isValid())
- .ok(compareResults.errorMessages());
- }).before(
- async () => {
- await changeTheme(theme);
- await createWidget('dxDataGrid', {
- dataSource: getData(2, 2),
- filterRow: {
- visible: true,
- },
- });
- },
- ).after(
- async () => {
- await changeTheme(Themes.genericLight);
- },
- );
-});
+ await t
+ .expect(await takeScreenshot('T1286345-datagrid-menu-icon-when-focused-generic.light.png', dataGrid.element))
+ .ok()
+ .expect(compareResults.isValid())
+ .ok(compareResults.errorMessages());
+}).before(
+ async () => {
+ await createWidget('dxDataGrid', {
+ dataSource: getData(2, 2),
+ filterRow: {
+ visible: true,
+ },
+ });
+ },
+);
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/editing.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/editing.ts
deleted file mode 100644
index 092e1b351cb0..000000000000
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/editing.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import { a11yCheck } from '../../../../helpers/accessibility/utils';
-import url from '../../../../helpers/getPageUrl';
-import { createWidget } from '../../../../helpers/createWidget';
-import { getData } from '../../helpers/generateDataSourceData';
-
-fixture`Editing tests with axe`
- .page(url(__dirname, '../../../container.html'));
-
-([
- 'cell',
- 'batch',
- 'row',
- 'form',
- 'popup',
-] as const).forEach((mode) => {
- test(`Embedded editors in ${mode} edit mode shoud have aria-label attribute`, async (t) => {
- const dataGrid = new DataGrid('#container');
-
- await t
- .click(dataGrid.getToolbar().getItem(0));
-
- await a11yCheck(t);
- }).before(() => createWidget('dxDataGrid', {
- dataSource: getData(3, 2),
- height: 400,
- showBorders: true,
- editing: {
- mode,
- allowUpdating: true,
- allowAdding: true,
- },
- toolbar: {
- items: [
- {
- name: 'addRowButton',
- showText: 'always',
- },
- ],
- },
- }));
-});
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-fluent.blue.light.png
deleted file mode 100644
index 617b4a1b5ddb..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-material.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-material.blue.light.png
deleted file mode 100644
index 68da16cc264f..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-material.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused-fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused-fluent.blue.light.png
deleted file mode 100644
index ee1c5cde62b7..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused-fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused-material.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused-material.blue.light.png
deleted file mode 100644
index db35c5e4dd28..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused-material.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row.png
new file mode 100644
index 000000000000..0893a53d3d64
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row_fluent.blue.dark.png
index c23bb5782947..d2ff2b877a53 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row_fluent.blue.dark.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row_fluent.blue.dark.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row_fluent.blue.light.png
index 5d4459dac097..86716595a519 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row_fluent.blue.light.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row_fluent.blue.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell.png
new file mode 100644
index 000000000000..5b12ed4faf4d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell_fluent.blue.dark.png
index 59f186d78868..1695ac7495b2 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell_fluent.blue.dark.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell_fluent.blue.dark.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell_fluent.blue.light.png
deleted file mode 100644
index dfab632b2b56..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode.png
new file mode 100644
index 000000000000..8ba59a241486
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode_fluent.blue.dark.png
deleted file mode 100644
index 52f23fb8b2b8..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode_fluent.blue.light.png
index 16df8e58c307..48bfdf4e6877 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode_fluent.blue.light.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode_fluent.blue.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode.png
new file mode 100644
index 000000000000..ae3e7fbfdda5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode_fluent.blue.dark.png
deleted file mode 100644
index ab9e2da102e1..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode_fluent.blue.light.png
index 9044647c66f1..c45960c67a9d 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode_fluent.blue.light.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode_fluent.blue.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu.png
new file mode 100644
index 000000000000..25459341b6e8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu_fluent.blue.dark.png
deleted file mode 100644
index 15157643d125..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu_fluent.blue.light.png
index 7e1f4830ca09..c88c46c607c3 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu_fluent.blue.light.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu_fluent.blue.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser.png
new file mode 100644
index 000000000000..52edb6c1f3b2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser_fluent.blue.dark.png
deleted file mode 100644
index 16b0adf9a267..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser_fluent.blue.light.png
index 331328cb2883..340c25aaba7a 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser_fluent.blue.light.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser_fluent.blue.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row.png
new file mode 100644
index 000000000000..bf942f64b2b6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row_fluent.blue.dark.png
deleted file mode 100644
index 2641c6a2c117..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row_fluent.blue.light.png
deleted file mode 100644
index 59b1c9368c5a..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button.png
new file mode 100644
index 000000000000..d32f391660e5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button_fluent.blue.dark.png
deleted file mode 100644
index 1d163f52c3d1..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button_fluent.blue.light.png
deleted file mode 100644
index a232d30e111e..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder.png
new file mode 100644
index 000000000000..496ee5417c8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder_fluent.blue.dark.png
deleted file mode 100644
index 04a9430b2da5..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder_fluent.blue.light.png
deleted file mode 100644
index ff6c819269aa..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel.png
new file mode 100644
index 000000000000..6dacd06c2de7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel_fluent.blue.dark.png
deleted file mode 100644
index 6a4d55aa49f0..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel_fluent.blue.light.png
deleted file mode 100644
index 15ea00b1eb0e..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu.png
new file mode 100644
index 000000000000..bb86d7da8270
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu_fluent.blue.dark.png
deleted file mode 100644
index 519d7ea926bc..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu_fluent.blue.light.png
deleted file mode 100644
index 5d4667515f3b..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns.png
new file mode 100644
index 000000000000..f55fc88d22b0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns_fluent.blue.dark.png
deleted file mode 100644
index b784fe23eb95..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns_fluent.blue.light.png
deleted file mode 100644
index 0f3c3036a700..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row.png
new file mode 100644
index 000000000000..a6ea9260ac6e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row_fluent.blue.dark.png
deleted file mode 100644
index 9b3b2a2ff83e..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row_fluent.blue.light.png
deleted file mode 100644
index a1b9864ecea2..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode.png
new file mode 100644
index 000000000000..8ae7bcf76691
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode_fluent.blue.dark.png
deleted file mode 100644
index 8155b09a604c..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode_fluent.blue.light.png
deleted file mode 100644
index 39f52301e4b8..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary.png
new file mode 100644
index 000000000000..0944610acd81
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary_fluent.blue.dark.png
deleted file mode 100644
index 0062c2310eda..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary_fluent.blue.light.png
deleted file mode 100644
index 4989a6de952f..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu.png
new file mode 100644
index 000000000000..8212654d1b5f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu_fluent.blue.dark.png
deleted file mode 100644
index 9b7bcca248e8..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu_fluent.blue.light.png
deleted file mode 100644
index 8401a5f243a8..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data.png
new file mode 100644
index 000000000000..2351db7ccb61
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data_fluent.blue.dark.png
deleted file mode 100644
index cf02a79d94c1..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data_fluent.blue.light.png
deleted file mode 100644
index bbdb3639be86..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode.png
new file mode 100644
index 000000000000..bfabf3ae8448
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode_fluent.blue.dark.png
deleted file mode 100644
index 2bd921dcb6ff..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode_fluent.blue.light.png
deleted file mode 100644
index ddfd800cf511..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode.png
new file mode 100644
index 000000000000..d776a2a7d784
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode_fluent.blue.dark.png
deleted file mode 100644
index edbb8f2e3b3c..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode_fluent.blue.light.png
deleted file mode 100644
index dd5792d7c6d8..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode.png
new file mode 100644
index 000000000000..a763439db822
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode_fluent.blue.dark.png
deleted file mode 100644
index 2a6643b750f6..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode_fluent.blue.light.png
deleted file mode 100644
index 4e393c7a8e70..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop.png
new file mode 100644
index 000000000000..9324047a91ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop_fluent.blue.dark.png
index 5d941a163342..1b3df4d2f703 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop_fluent.blue.dark.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop_fluent.blue.dark.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop_fluent.blue.light.png
index 5e6f571be9b8..fd24aa361502 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop_fluent.blue.light.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop_fluent.blue.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false.png
new file mode 100644
index 000000000000..5f36bfad0001
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false_fluent.blue.dark.png
deleted file mode 100644
index 1b80d11a1fa3..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false_fluent.blue.light.png
deleted file mode 100644
index bcc0b38ef0cd..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true.png
new file mode 100644
index 000000000000..eaca10f14a18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true_fluent.blue.dark.png
deleted file mode 100644
index 5d7ad2ab4480..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true_fluent.blue.light.png
deleted file mode 100644
index a5ab54156839..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row.png
new file mode 100644
index 000000000000..8e5635d9d922
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row_fluent.blue.dark.png
deleted file mode 100644
index 0b4a11175091..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row_fluent.blue.light.png
deleted file mode 100644
index a81ee36df39a..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell.png
new file mode 100644
index 000000000000..60a8dd6b5b81
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell_fluent.blue.dark.png
deleted file mode 100644
index cf580dfdaee2..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell_fluent.blue.light.png
deleted file mode 100644
index 3b4f04fa63e4..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false.png
new file mode 100644
index 000000000000..f64cb5e8d51d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false_fluent.blue.dark.png
deleted file mode 100644
index 573d704ce318..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false_fluent.blue.light.png
deleted file mode 100644
index 6b44711821f5..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true.png
new file mode 100644
index 000000000000..f0bf943d06cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true_fluent.blue.dark.png
deleted file mode 100644
index 2f2bbe5759d3..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true_fluent.blue.light.png
deleted file mode 100644
index 98ecc6fd7372..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode.png
new file mode 100644
index 000000000000..0f1f87a8da74
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode_fluent.blue.dark.png
deleted file mode 100644
index 0314914e904c..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode_fluent.blue.light.png
deleted file mode 100644
index d75b9c664912..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight.png
new file mode 100644
index 000000000000..74fdbb32b2fb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight_fluent.blue.dark.png
deleted file mode 100644
index 3fd30e6125b6..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight_fluent.blue.light.png
deleted file mode 100644
index 9ed98c229e67..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel.png
new file mode 100644
index 000000000000..bfc22f7798a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel_fluent.blue.dark.png
deleted file mode 100644
index e1d2fc2590d4..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel_fluent.blue.light.png
deleted file mode 100644
index 3aa4c5aa0802..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection.png
new file mode 100644
index 000000000000..35e6515ecc29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection_fluent.blue.dark.png
index 8efddf393a99..4dc5eb092b13 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection_fluent.blue.dark.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection_fluent.blue.dark.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection_fluent.blue.light.png
index c404fd520ed8..d000d9a4ad61 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection_fluent.blue.light.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection_fluent.blue.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel.png
new file mode 100644
index 000000000000..6493f0367557
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel_fluent.blue.dark.png
deleted file mode 100644
index 454fbd272153..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel_fluent.blue.light.png
deleted file mode 100644
index 00f38fcd5fd6..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode.png
new file mode 100644
index 000000000000..29f6fe9e4986
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode_fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode_fluent.blue.dark.png
deleted file mode 100644
index 02a03ecb7a2d..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode_fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode_fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode_fluent.blue.light.png
deleted file mode 100644
index 472d159e51ae..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode_fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/scrolling.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/scrolling.ts
deleted file mode 100644
index e721b0ac9e7c..000000000000
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/scrolling.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import { a11yCheck } from '../../../../helpers/accessibility/utils';
-import url from '../../../../helpers/getPageUrl';
-import { createWidget } from '../../../../helpers/createWidget';
-import { getData } from '../../helpers/generateDataSourceData';
-
-fixture`Scrolling with axe`
- .page(url(__dirname, '../../../container.html'));
-
-test('Infinite scrolling', async (t) => {
- const dataGrid = new DataGrid('#container');
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t);
-}).before(() => createWidget('dxDataGrid', {
- dataSource: getData(1000, 2),
- height: 400,
- showBorders: true,
- scrolling: {
- mode: 'infinite',
- },
-}));
-
-test('Horizontal Virtual Scrolling', async (t) => {
- const dataGrid = new DataGrid('#container');
-
- await t
- .expect(dataGrid.isReady())
- .ok();
-
- await a11yCheck(t);
-}).before(() => createWidget('dxDataGrid', {
- dataSource: getData(20, 100),
- columnWidth: 100,
- height: 400,
- width: 900,
- showBorders: true,
- scrolling: {
- columnRenderingMode: 'virtual',
- },
-}));
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/status.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/status.ts
deleted file mode 100644
index b2644d45d2c1..000000000000
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/status.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter';
-import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
-import { a11yCheck } from '../../../../helpers/accessibility/utils';
-import url from '../../../../helpers/getPageUrl';
-import { createWidget } from '../../../../helpers/createWidget';
-
-fixture`Status areas tests`
- .page(url(__dirname, '../../../container.html'));
-
-const DATA_SOURCE = [
- {
- id: 0,
- label: 'A',
- value: 350,
- },
- {
- id: 1,
- label: 'B',
- value: 1200,
- },
- {
- id: 2,
- label: 'C',
- value: 750,
- },
-];
-
-test('Accessibility: DataGrid general status should contains correct text', async (t) => {
- const expectedStatusText = '';
- const dataGrid = new DataGrid('#container');
-
- const statusText = await dataGrid.getGeneralStatusContainer().textContent;
-
- await a11yCheck(t);
- await t.expect(statusText).eql(expectedStatusText);
-}).before(async () => createWidget('dxDataGrid', {
- dataSource: DATA_SOURCE,
- keyExpr: 'id',
- columns: ['label', 'value'],
-}));
-
-test('Accessibility: DataGrid general status should contains correct text after header filter interaction', async (t) => {
- const expectedStatusText = 'Data grid with 1 rows and 2 columns';
- const dataGrid = new DataGrid('#container');
- const headerFilter = new HeaderFilter();
-
- const headerFilterIcon = dataGrid
- .getHeaders()
- .getHeaderRow(0)
- .getHeaderCell(0)
- .getFilterIcon();
- const headerFilterList = headerFilter.getList();
- const headerFilterButtons = headerFilter.getButtons();
-
- await t.click(headerFilterIcon)
- .click(headerFilterList.getItem(1).element())
- .click(headerFilterButtons.nth(0));
-
- const statusText = await dataGrid.getGeneralStatusContainer().textContent;
-
- await a11yCheck(t);
- await t.expect(statusText).eql(expectedStatusText);
-}).before(async () => createWidget('dxDataGrid', {
- dataSource: DATA_SOURCE,
- keyExpr: 'id',
- headerFilter: {
- visible: true,
- },
- columns: ['label', 'value'],
-}));
-
-test('Accessibility: DataGrid general status should contains correct text after filter row interaction', async (t) => {
- const expectedStatusText = 'Data grid with 1 rows and 2 columns';
- const dataGrid = new DataGrid('#container');
- const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
-
- // await t.debug();
-
- const applyFilterBtn = dataGrid.getHeaderPanel().getApplyFilterButton();
- await t.typeText(filterEditor.input(), 'A')
- .click(applyFilterBtn);
-
- const statusText = await dataGrid.getGeneralStatusContainer().textContent;
-
- await a11yCheck(t);
- await t.expect(statusText).eql(expectedStatusText);
-}).before(async () => createWidget('dxDataGrid', {
- dataSource: DATA_SOURCE,
- keyExpr: 'id',
- filterRow: {
- visible: true,
- applyFilter: 'onClick',
- },
- columns: ['label', 'value'],
-}));
-
-test('Accessibility: DataGrid general status should contains correct text after search panel interaction', async (t) => {
- const expectedStatusText = 'Data grid with 1 rows and 2 columns';
- const dataGrid = new DataGrid('#container');
-
- const searchInput = dataGrid.getSearchBox();
- await t.typeText(searchInput.input(), 'A')
- // NOTE: Unfortunately DataGrid has hardcoded filter's timeout 700ms
- // (grid_core/search/m_search FILTERING_TIMEOUT)
- // So, we only can waiting 1s here
- .wait(1000);
-
- const statusText = await dataGrid.getGeneralStatusContainer().textContent;
-
- await a11yCheck(t);
- await t.expect(statusText).eql(expectedStatusText);
-}).before(async () => createWidget('dxDataGrid', {
- dataSource: DATA_SOURCE,
- keyExpr: 'id',
- searchPanel: {
- visible: true,
- },
- columns: ['label', 'value'],
-}));
-
-test('Accessibility: DataGrid general status should contains correct text after column count change', async (t) => {
- const expectedStatusText = 'Data grid with 3 rows and 1 columns';
- const dataGrid = new DataGrid('#container');
-
- const columnChooserBtn = dataGrid.getColumnChooserButton();
- await t.click(columnChooserBtn);
-
- const columnChooser = dataGrid.getColumnChooser();
- const checkbox = columnChooser.getCheckbox(1);
- await t.click(checkbox);
-
- const statusText = await dataGrid.getGeneralStatusContainer().textContent;
-
- await a11yCheck(t);
- await t.expect(statusText).eql(expectedStatusText);
-}).before(async () => createWidget('dxDataGrid', {
- dataSource: DATA_SOURCE,
- keyExpr: 'id',
- columnChooser: {
- enabled: true,
- mode: 'select',
- },
- columns: ['label', 'value'],
-}));
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/templates.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/templates.ts
deleted file mode 100644
index 94228b68db85..000000000000
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/templates.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import { a11yCheck } from '../../../../helpers/accessibility/utils';
-import url from '../../../../helpers/getPageUrl';
-import { createWidget } from '../../../../helpers/createWidget';
-
-fixture`Templates tests with axe`
- .page(url(__dirname, '../../../container.html'));
-
-test('Accessibility: DataGrid with dataRowTemplate', async (t) => {
- const dataGrid = new DataGrid('#container');
-
- await t.expect(dataGrid.isReady()).ok();
-
- await a11yCheck(t);
-}).before(async () => createWidget('dxDataGrid', {
- dataSource: [...new Array(10)].map((_, i) => ({
- ID: i + 1,
- CompanyName: `company name ${i + 1}`,
- City: `city ${i + 1}`,
- Notes: `test ${i + 1}`,
- })),
- keyExpr: 'ID',
- columns: ['ID', 'CompanyName', 'City'],
- dataRowTemplate(container, { data }) {
- const markup = '
'
- + `| ${data.ID} | `
- + `${data.CompanyName} | `
- + `${data.City} | `
- + '
'
- + '
'
- + `${data.Notes} | `
- + '
';
-
- container.append(markup);
- },
- rowAlternationEnabled: true,
- columnAutoWidth: true,
- showBorders: true,
-}));
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts
index dcb1fd92be04..87e848bd5925 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts
@@ -5,50 +5,46 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
import url from '../../../helpers/getPageUrl';
import { createWidget } from '../../../helpers/createWidget';
import { getData } from '../helpers/generateDataSourceData';
-import { changeTheme } from '../../../helpers/changeTheme';
fixture.disablePageReloads`Column chooser`
.page(url(__dirname, '../../container.html'));
-['generic.light', 'material.blue.light', 'fluent.blue.light'].forEach((theme) => {
- ['dragAndDrop', 'select'].forEach((mode: any) => {
- test(`Column chooser screenshot in mode=${mode}, theme=${theme}`, async (t) => {
- const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
- const dataGrid = new DataGrid('#container');
-
- await dataGrid.apiShowColumnChooser();
-
- await t
- .expect(await takeScreenshot(`column-chooser-${mode}-mode (${theme}).png`, dataGrid.element))
- .ok()
- .expect(compareResults.isValid())
- .ok(compareResults.errorMessages());
- }).before(async () => {
- await changeTheme(theme);
- return createWidget('dxDataGrid', {
- dataSource: getData(20, 3),
- height: 400,
- showBorders: true,
- columns: [{
- dataField: 'field_0',
- dataType: 'string',
- }, {
- dataField: 'field_1',
- dataType: 'string',
- }, {
- dataField: 'field_2',
- dataType: 'string',
- visible: false,
- }],
- columnChooser: {
- enabled: true,
- mode,
- },
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
- });
+// visual: generic.light
+// visual: material.blue.light
+// visual: fluent.blue.light
+
+['dragAndDrop', 'select'].forEach((mode: any) => {
+ test(`Column chooser screenshot in mode=${mode}`, async (t) => {
+ const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+ const dataGrid = new DataGrid('#container');
+
+ await dataGrid.apiShowColumnChooser();
+
+ await t
+ .expect(await takeScreenshot(`column-chooser-${mode}-mode (generic.light).png`, dataGrid.element))
+ .ok()
+ .expect(compareResults.isValid())
+ .ok(compareResults.errorMessages());
+ }).before(async () => createWidget('dxDataGrid', {
+ dataSource: getData(20, 3),
+ height: 400,
+ showBorders: true,
+ columns: [{
+ dataField: 'field_0',
+ dataType: 'string',
+ }, {
+ dataField: 'field_1',
+ dataType: 'string',
+ }, {
+ dataField: 'field_2',
+ dataType: 'string',
+ visible: false,
+ }],
+ columnChooser: {
+ enabled: true,
+ mode,
+ },
+ }));
});
test('Column chooser checkboxes should be aligned correctly with plain structure', async (t) => {
@@ -192,3 +188,89 @@ test('Check the behavior of pressing the Esc button when dragging a column from
mode: 'dragAndDrop',
},
}));
+
+test(
+ 'Should take into account column options change during general option change (T1267471)',
+ async (t) => {
+ const dataGrid = new DataGrid('#container');
+ const columnChooserBtn = dataGrid.getColumnChooserButton();
+
+ await t.click(columnChooserBtn);
+
+ const columnChooser = dataGrid.getColumnChooser();
+ const lastItemCheckbox = columnChooser.getCheckbox(1);
+
+ await t.expect(columnChooser.isCheckboxDisabled(0)).notOk();
+ await t.expect(columnChooser.isCheckboxDisabled(1)).notOk();
+
+ await t.click(lastItemCheckbox);
+
+ await t.expect(columnChooser.isCheckboxDisabled(0)).ok();
+ await t.expect(columnChooser.isCheckboxDisabled(1)).notOk();
+ },
+).before(async () => createWidget('dxDataGrid', {
+ dataSource: [
+ { id: 0, A: 'A', B: 'B' },
+ ],
+ keyExpr: 'id',
+ columns: ['A', 'B'],
+ columnChooser: {
+ enabled: true,
+ mode: 'select',
+ },
+ onOptionChanged: ({ component, fullName }) => {
+ if (!/columns\[\d+\]\.visible/.test(fullName)) {
+ return;
+ }
+
+ const visibleColumns = component.getVisibleColumns();
+ const [{ dataField: lastColumnDataField }] = visibleColumns;
+
+ if (!lastColumnDataField) {
+ return;
+ }
+
+ component.columnOption(lastColumnDataField, 'allowHiding', false);
+ },
+}));
+
+test('ColumnChooser should receive and render custom texts', async (t) => {
+ const dataGrid = new DataGrid('#container');
+ await dataGrid.isReady();
+ const columnChooserBtn = dataGrid.getColumnChooserButton();
+ await t.click(columnChooserBtn);
+ const columnChooser = dataGrid.getColumnChooser();
+ const title = columnChooser.getTitle();
+ const emptyMessage = columnChooser.getEmptyMessage();
+ const titleText = await title.innerText;
+ const emptyMessageText = await emptyMessage.innerText;
+
+ await t.expect(titleText).eql('customTitle');
+ await t.expect(emptyMessageText).eql('customEmptyText');
+}).before(async (t) => {
+ await t.eval(() => {
+ (window as any).DevExpress.localization.loadMessages({
+ en: {
+ 'dxDataGrid-columnChooserTitle': 'customTitle',
+ 'dxDataGrid-columnChooserEmptyText': 'customEmptyText',
+ },
+ });
+ });
+
+ return createWidget('dxDataGrid', {
+ columnChooser: {
+ height: '340px',
+ enabled: true,
+ mode: 'dragAndDrop',
+ position: {
+ my: 'right top',
+ at: 'right bottom',
+ of: '.dx-datagrid-column-chooser-button',
+ },
+ },
+ dataSource: [],
+ columns: [],
+ });
+}).after(async (t) => {
+ await t.eval(() => location.reload());
+});
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering.ts
index 93ea791c88da..aea79aca1412 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering.ts
@@ -136,7 +136,7 @@ test('The separator should display correctly when dragging column', async (t) =>
allowColumnResizing: true,
}));
-test.meta({ unstable: true })('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 MouseUpEvents.disable(MouseAction.dragToOffset);
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts
index ce20a0656e88..7830d5be6593 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts
@@ -4,7 +4,7 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
import url from '../../../helpers/getPageUrl';
import { createWidget } from '../../../helpers/createWidget';
-fixture`Column resizing`
+fixture.disablePageReloads`Column resizing`
.page(url(__dirname, '../../container.html'));
test('column separator should starts from the parent', async (t) => {
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/editing.ts
index c8b3a0a12bc6..78b9b76ad41d 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/editing.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/editing.ts
@@ -9,7 +9,6 @@ import url from '../../../helpers/getPageUrl';
import { createWidget } from '../../../helpers/createWidget';
import { changeTheme } from '../../../helpers/changeTheme';
import { getData } from '../helpers/generateDataSourceData';
-import { Themes } from '../../../helpers/themes';
fixture.disablePageReloads`Editing`
.page(url(__dirname, '../../container.html'));
@@ -2433,28 +2432,12 @@ test('Popup EditForm screenshot when editRowKey is initially specified', async (
})();
});
});
-
-[
- {
- theme: 'material.blue.light',
- useIcons: true,
- },
- {
- theme: 'generic.light',
- useIcons: true,
- },
- {
- theme: 'material.blue.light',
- useIcons: false,
- },
- {
- theme: 'generic.light',
- useIcons: false,
- },
-].forEach(({ theme, useIcons }) => {
+// visual: generic.light
+// visual: material.blue.light
+[true, false].forEach((useIcons) => {
// T1179114
// TODO Chrome133: skipped during chrome update
- test.skip(`The disabled state should be correct for a custom button when given as a SVG image (${theme})`, async (t) => {
+ test.skip('The disabled state should be correct for a custom button when given as a SVG image', async (t) => {
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
const dataGrid = new DataGrid('#container');
const commandCell = dataGrid.getDataRow(0).getCommandCell(2);
@@ -2466,52 +2449,46 @@ test('Popup EditForm screenshot when editRowKey is initially specified', async (
.eql(20)
.expect(secondCustomIcon.clientWidth)
.eql(20)
- .expect(await takeScreenshot(`T1179114-grid-edit-custom-button-in-${theme.split('.')[0]}-theme-when-useicons-is-${useIcons}.png`, dataGrid.element))
+ .expect(await takeScreenshot(`T1179114-grid-edit-custom-button-in-generic-theme-when-useicons-is-${useIcons}.png`, dataGrid.element))
.ok()
.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
- }).before(async () => {
- await changeTheme(theme);
-
- return createWidget('dxDataGrid', {
- width: 600,
- dataSource: [{
- Id: 0,
- name: 'test',
- }],
- keyExpr: 'Id',
- editing: {
- mode: 'row',
- allowUpdating: true,
- allowDeleting: true,
- useIcons,
- },
- columns: ['Id', 'name', {
- type: 'buttons',
- width: 200,
- buttons: [
- {
- name: 'delete',
- disabled: false,
- },
- {
- name: 'delete',
- disabled: true,
- },
- {
- icon: encodedIcon,
- disabled: false,
- },
- {
- icon: encodedIcon,
- disabled: true,
- },
- ],
- }],
- });
- }).after(async () => {
- await changeTheme('generic.light');
- });
+ }).before(async () => createWidget('dxDataGrid', {
+ width: 600,
+ dataSource: [{
+ Id: 0,
+ name: 'test',
+ }],
+ keyExpr: 'Id',
+ editing: {
+ mode: 'row',
+ allowUpdating: true,
+ allowDeleting: true,
+ useIcons,
+ },
+ columns: ['Id', 'name', {
+ type: 'buttons',
+ width: 200,
+ buttons: [
+ {
+ name: 'delete',
+ disabled: false,
+ },
+ {
+ name: 'delete',
+ disabled: true,
+ },
+ {
+ icon: encodedIcon,
+ disabled: false,
+ },
+ {
+ icon: encodedIcon,
+ disabled: true,
+ },
+ ],
+ }],
+ }));
});
test('Component sends unexpected filtering request after inserting a new row if focusedRowEnabled is true and key set in data source (T1181477)', async (t) => {
@@ -2774,41 +2751,186 @@ test('DataGrid - A new row is added above the existing row if the data source is
],
}));
-[
- Themes.genericLight,
- Themes.fluentBlue,
- Themes.materialBlue,
-].forEach((theme) => {
- test('DataGrid - ColorBox in DataGrid causes input value to appear behind color preview (T1280023)', async (t) => {
- const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
- const dataGrid = new DataGrid('#container');
+// visual: generic.light
+// visual: fluent.blue.light
+// visual: material.blue.light
+test('DataGrid - ColorBox in DataGrid causes input value to appear behind color preview (T1280023)', async (t) => {
+ const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+ const dataGrid = new DataGrid('#container');
- await t.click(dataGrid.getDataCell(0, 0).element);
+ await t.click(dataGrid.getDataCell(0, 0).element);
+
+ await t
+ .expect(await takeScreenshot('grid-form-editing-with-color-box_(generic.light)', dataGrid.element))
+ .ok()
+ .expect(compareResults.isValid())
+ .ok(compareResults.errorMessages());
+})
+ .before(async () => {
+ await createWidget('dxDataGrid', {
+ dataSource: [
+ { Color: 'red' },
+ ],
+ showBorders: true,
+ editing: {
+ allowUpdating: true,
+ mode: 'cell',
+ },
+ onEditorPreparing(e) {
+ if (e.dataField === 'Color') {
+ e.editorName = 'dxColorBox';
+ e.editorOptions.readOnly = false;
+ }
+ },
+ });
+ });
+
+// T1291087
+test('The editCellTemplate template should not be called after clicking on a cell in another row and column', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid('#container');
+ const firstCellOfFirstRow = dataGrid.getDataCell(0, 0);
+ const secondCellOfSecondRow = dataGrid.getDataCell(1, 1);
+ const checkEditCellTemplateCallArgs = async () => {
+ const templateCallArgs = await ClientFunction(() => (window as any).editCellTemplateCallArgs)();
await t
- .expect(await takeScreenshot(`grid-form-editing-with-color-box_(${theme})`, dataGrid.element))
- .ok()
- .expect(compareResults.isValid())
- .ok(compareResults.errorMessages());
- })
- .before(async () => {
- await changeTheme(theme);
- await createWidget('dxDataGrid', {
- dataSource: [
- { Color: 'red' },
- ],
- showBorders: true,
- editing: {
- allowUpdating: true,
- mode: 'cell',
- },
- onEditorPreparing(e) {
- if (e.dataField === 'Color') {
- e.editorName = 'dxColorBox';
- e.editorOptions.readOnly = false;
- }
- },
+ .expect(templateCallArgs.length)
+ .eql(1, 'editCellTemplate should be called only once')
+ .expect(templateCallArgs[0])
+ .eql('Column1', 'editCellTemplate should be called for the first column only');
+ };
+
+ // act
+ await t.click(firstCellOfFirstRow.element);
+
+ // assert
+ await t
+ .expect(firstCellOfFirstRow.isEditCell)
+ .ok('The first cell of the first row should be in edit mode')
+ .expect(firstCellOfFirstRow.getEditor().element.focused)
+ .ok('The first cell of the first row should be focused');
+
+ await checkEditCellTemplateCallArgs();
+
+ // act
+ await t.click(secondCellOfSecondRow.element);
+
+ // assert
+ await t
+ .expect(secondCellOfSecondRow.isEditCell)
+ .ok('The second cell of the second row should be in edit mode')
+ .expect(secondCellOfSecondRow.getEditor().element.focused)
+ .ok('The second cell of the second row should be focused');
+
+ await checkEditCellTemplateCallArgs();
+}).before(async () => {
+ await ClientFunction(() => {
+ (window as any).editCellTemplateCallArgs = [];
+ })();
+
+ return createWidget('dxDataGrid', {
+ dataSource: [
+ {
+ ID: 1, Column1: 'a', Column2: 'b', Column3: 'c',
+ },
+ {
+ ID: 2, Column1: 'd', Column2: 'e', Column3: 'f',
+ },
+ {
+ ID: 3, Column1: 'g', Column2: 'h', Column3: 'i',
+ },
+ ],
+ keyExpr: 'ID',
+ columns: [{
+ dataField: 'Column1',
+ editCellTemplate(_, cellInfo) {
+ (window as any).editCellTemplateCallArgs.push(cellInfo.column.dataField);
+
+ return ($('
') as any).dxTextBox({
+ value: cellInfo.value,
+ onValueChanged: (args) => cellInfo.setValue(args.value),
+ });
+ },
+ }, 'Column2', 'Column3'],
+ showBorders: true,
+ editing: { mode: 'batch', allowUpdating: true },
+ });
+}).after(async () => {
+ await ClientFunction(() => {
+ delete (window as any).editCellTemplateCallArgs;
+ })();
+});
+
+// T1291087
+test('The onEditorPreparing event should be called once after clicking on a cell in another row and column', async (t) => {
+ // arrange
+ const dataGrid = new DataGrid('#container');
+ const firstCellOfFirstRow = dataGrid.getDataCell(0, 0);
+ const secondCellOfSecondRow = dataGrid.getDataCell(1, 1);
+ const checkOnEditorPreparingCallArgs = async (expectedCallCount, expectedArgs) => {
+ const eventCallArgs = await ClientFunction(() => (window as any).onEditorPreparingCallArgs)();
+
+ await t
+ .expect(eventCallArgs.length)
+ .eql(expectedCallCount, 'number of the onEditorPreparing event calls is correct')
+ .expect(eventCallArgs[expectedCallCount - 1])
+ .eql(expectedArgs, 'onEditorPreparing event called for expected cell');
+ };
+
+ // act
+ await t.click(firstCellOfFirstRow.element);
+
+ // assert
+ await t
+ .expect(firstCellOfFirstRow.isEditCell)
+ .ok('The first cell of the first row should be in edit mode')
+ .expect(firstCellOfFirstRow.getEditor().element.focused)
+ .ok('The first cell of the first row should be focused');
+
+ await checkOnEditorPreparingCallArgs(1, { dataField: 'Column1', rowIndex: 0 });
+
+ // act
+ await t.click(secondCellOfSecondRow.element);
+
+ // assert
+ await t
+ .expect(secondCellOfSecondRow.isEditCell)
+ .ok('The second cell of the second row should be in edit mode')
+ .expect(secondCellOfSecondRow.getEditor().element.focused)
+ .ok('The second cell of the second row should be focused');
+
+ await checkOnEditorPreparingCallArgs(2, { dataField: 'Column2', rowIndex: 1 });
+}).before(async () => {
+ await ClientFunction(() => {
+ (window as any).onEditorPreparingCallArgs = [];
+ })();
+
+ return createWidget('dxDataGrid', {
+ dataSource: [
+ {
+ ID: 1, Column1: 'a', Column2: 'b', Column3: 'c',
+ },
+ {
+ ID: 2, Column1: 'd', Column2: 'e', Column3: 'f',
+ },
+ {
+ ID: 3, Column1: 'g', Column2: 'h', Column3: 'i',
+ },
+ ],
+ keyExpr: 'ID',
+ columns: ['Column1', 'Column2', 'Column3'],
+ showBorders: true,
+ editing: { mode: 'batch', allowUpdating: true },
+ onEditorPreparing(e) {
+ (window as any).onEditorPreparingCallArgs.push({
+ dataField: e.dataField,
+ rowIndex: e.row?.rowIndex,
});
- })
- .after(async () => changeTheme(Themes.genericLight));
+ },
+ });
+}).after(async () => {
+ await ClientFunction(() => {
+ delete (window as any).onEditorPreparingCallArgs;
+ })();
});
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/T1154721_editingCellFocus.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/T1154721_editingCellFocus.ts
index be20fd4a29af..9abffbe6af7c 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/T1154721_editingCellFocus.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/T1154721_editingCellFocus.ts
@@ -3,7 +3,7 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
import { createWidget } from '../../../../helpers/createWidget';
import url from '../../../../helpers/getPageUrl';
-fixture`Editing - cell focus`
+fixture.disablePageReloads`Editing - cell focus`
.page(url(__dirname, '../../../container.html'));
const apiRequestMock = RequestMock()
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/editingEvents.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/editingEvents.ts
index bf4aaf4e2f72..c95dfa8be838 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/editingEvents.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/editingEvents.ts
@@ -6,7 +6,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
import { createWidget } from '../../../../helpers/createWidget';
import url from '../../../../helpers/getPageUrl';
-fixture`Editing events`
+fixture.disablePageReloads`Editing events`
.page(url(__dirname, '../../../container.html'));
// T1186997
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/initNewRow.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/initNewRow.ts
index f64f39c02ac8..3ffbdd3d7908 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/initNewRow.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/initNewRow.ts
@@ -3,7 +3,7 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
import { createWidget } from '../../../../helpers/createWidget';
import url from '../../../../helpers/getPageUrl';
-fixture`initNewRow`
+fixture.disablePageReloads`initNewRow`
.page(url(__dirname, '../../../container.html'));
// T1274123
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/undefinedValues.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/undefinedValues.ts
index 6048e7a739cf..c1545f1ab58d 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/undefinedValues.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/undefinedValues.ts
@@ -2,7 +2,7 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
import { createWidget } from '../../../../helpers/createWidget';
import url from '../../../../helpers/getPageUrl';
-fixture`Editing - undefined values`
+fixture.disablePageReloads`Editing - undefined values`
.disablePageReloads
.page(url(__dirname, '../../../container.html'));
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1045321-generic.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1045321-generic.light.png
index 75de3613b122..9a68ffb6114d 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1045321-generic.light.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1045321-generic.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1045321-material.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1045321-material.blue.light.png
deleted file mode 100644
index 9608182263db..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1045321-material.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1179114-grid-edit-custom-button-in-material-theme-when-useicons-is-false.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1179114-grid-edit-custom-button-in-material-theme-when-useicons-is-false.png
deleted file mode 100644
index 3624e6b555d5..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1179114-grid-edit-custom-button-in-material-theme-when-useicons-is-false.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1179114-grid-edit-custom-button-in-material-theme-when-useicons-is-true.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1179114-grid-edit-custom-button-in-material-theme-when-useicons-is-true.png
deleted file mode 100644
index 928badb5b390..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1179114-grid-edit-custom-button-in-material-theme-when-useicons-is-true.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1180834-grid-hover-row-after-scrolling-1.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1180834-grid-hover-row-after-scrolling-1.png
index c08515356532..48799667e9e5 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1180834-grid-hover-row-after-scrolling-1.png and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1180834-grid-hover-row-after-scrolling-1.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1180834-grid-hover-row-after-scrolling-1_mask.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1180834-grid-hover-row-after-scrolling-1_mask.png
new file mode 100644
index 000000000000..d3ffa0bdc2ca
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1180834-grid-hover-row-after-scrolling-1_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit_(fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit_(fluent.blue.light).png
deleted file mode 100644
index 428446b72e2a..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit_(fluent.blue.light).png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit_(material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit_(material.blue.light).png
deleted file mode 100644
index 3a155b0eb1ae..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit_(material.blue.light).png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-native-scrolling-with-grouping-and-summary-generic.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-native-scrolling-with-grouping-and-summary-generic.light.png
new file mode 100644
index 000000000000..e2f832adfba0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-native-scrolling-with-grouping-and-summary-generic.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-simulated-scrolling-with-grouping-and-summary-generic.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-simulated-scrolling-with-grouping-and-summary-generic.light.png
new file mode 100644
index 000000000000..39d177079d92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-simulated-scrolling-with-grouping-and-summary-generic.light.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (fluent.blue.light).png
deleted file mode 100644
index ed64c3930e33..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (fluent.blue.light).png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (material.blue.light).png
deleted file mode 100644
index b09ad36c7d1f..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (material.blue.light).png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (fluent.blue.light).png
deleted file mode 100644
index 8ffbd493e6e2..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (fluent.blue.light).png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (material.blue.light).png
deleted file mode 100644
index e230603b87bc..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (material.blue.light).png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-generic-light-compact-theme.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-generic-light-compact-theme.png
deleted file mode 100644
index e7e15e36a803..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-generic-light-compact-theme.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-material-blue-light-compact-theme.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-material-blue-light-compact-theme.png
deleted file mode 100644
index 745c96dd35d9..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-material-blue-light-compact-theme.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-material-blue-light-theme.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-material-blue-light-theme.png
deleted file mode 100644
index 9665fb58d46e..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager-in-the-material-blue-light-theme.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__column-chooser.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__column-chooser.png
new file mode 100644
index 000000000000..6abc76a2b879
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__column-chooser.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__grouping.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__grouping.png
new file mode 100644
index 000000000000..a031aab71474
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__grouping.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__reoder.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__reoder.png
new file mode 100644
index 000000000000..cc9f8e045c55
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__reoder.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-fluent.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-fluent.blue.dark.png
deleted file mode 100644
index d598db34c7be..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-fluent.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-fluent.blue.light.png
deleted file mode 100644
index c570fb689516..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-generic.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-generic.dark.png
deleted file mode 100644
index daf1a39abab5..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-generic.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-material.blue.dark.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-material.blue.dark.png
deleted file mode 100644
index a16a182ea1cb..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-material.blue.dark.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-material.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-material.blue.light.png
deleted file mode 100644
index 454727839f0f..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons-material.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-form-editing-with-color-box_(fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-form-editing-with-color-box_(fluent.blue.light).png
deleted file mode 100644
index 5b5f2ebb9392..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-form-editing-with-color-box_(fluent.blue.light).png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-form-editing-with-color-box_(material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-form-editing-with-color-box_(material.blue.light).png
deleted file mode 100644
index 1ebe85ae44b9..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-form-editing-with-color-box_(material.blue.light).png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-when-grouped-column-has-showWhenGrouped.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-when-grouped-column-has-showWhenGrouped.png
new file mode 100644
index 000000000000..9f137d4a8086
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-when-grouped-column-has-showWhenGrouped.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons-fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons-fluent.blue.light.png
deleted file mode 100644
index a1306ae8cd3d..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons-fluent.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons-material.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons-material.blue.light.png
deleted file mode 100644
index 4e8afab7ad63..000000000000
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons-material.blue.light.png and /dev/null differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused-with-sticky.png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused-with-sticky.png
new file mode 100644
index 000000000000..0fd084982c89
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused-with-sticky.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.ts
index 9569e99e11b0..eedb5daa6cda 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.ts
@@ -4,7 +4,7 @@ import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTex
import { createWidget } from '../../../../helpers/createWidget';
import url from '../../../../helpers/getPageUrl';
-fixture`Header Filter T1163100 change filter icon`
+fixture.disablePageReloads`Header Filter T1163100 change filter icon`
.page(url(__dirname, '../../../container.html'));
const GRID_SELECTOR = '#container';
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/filterRow.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/filterRow.ts
index 31bc19c6a0b4..1e7e377475bf 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/filterRow.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/filterRow.ts
@@ -237,7 +237,7 @@ test('DataGrid - The `between` filter dropdown sticks to the viewport edge durin
.click(filterEditor.menuButton)
.click(filterEditor.menu.getItemByText('Between'));
- await dataGrid.scrollBy({ x: 999 });
+ await dataGrid.scrollBy(t, { x: 999 });
await t
.expect(await takeScreenshot('filter-row-filter-range-hide-on-scroll.png', dataGrid.element))
.ok()
@@ -259,3 +259,37 @@ test('DataGrid - The `between` filter dropdown sticks to the viewport edge durin
columnWidth: 400,
width: 500,
}));
+
+// T1290381
+test('DataGrid - filter row\'s search-box\'s aria-label should be customizable via localization', async (t) => {
+ const dataGrid = new DataGrid('#container');
+ const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+
+ await dataGrid.isReady();
+
+ const ariaLabel = await filterEditor.menuButton.getAttribute('aria-label');
+
+ await t
+ .expect(ariaLabel)
+ .eql('custom text');
+}).before(async (t) => {
+ await t.eval(() => {
+ (window as any).DevExpress.localization.loadMessages({
+ en: {
+ 'dxDataGrid-ariaSearchBox': 'custom text',
+ },
+ });
+ });
+
+ return createWidget('dxDataGrid', {
+ columns: [{
+ dataField: 'test',
+ dataType: 'string',
+ }],
+ filterRow: {
+ visible: true,
+ },
+ });
+}).after(async (t) => {
+ await t.eval(() => location.reload());
+});
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns.ts
index c3010ebe2965..ff4e2abd8421 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns.ts
@@ -8,7 +8,7 @@ import { makeRowsViewTemplatesAsync } from '../helpers/asyncTemplates';
const DATA_GRID_SELECTOR = '#container';
-fixture`FixedColumns`
+fixture.disablePageReloads`FixedColumns`
.page(url(__dirname, '../../container.html'));
// T1156153
@@ -436,3 +436,212 @@ test('DataGrid - Group summary is not updated when a column is fixed on the righ
},
],
}));
+
+const mockCountries = [
+ {
+ ID: 1,
+ Country: 'Brazil',
+ Area: 8515767,
+ Population_Urban: 0.85,
+ Population_Rural: 0.15,
+ Population_Total: 205809000,
+ GDP_Agriculture: 0.054,
+ GDP_Industry: 0.274,
+ GDP_Services: 0.672,
+ GDP_Total: 2353025,
+ },
+ {
+ ID: 2,
+ Country: 'China',
+ Area: 9388211,
+ Population_Urban: 0.54,
+ Population_Rural: 0.46,
+ Population_Total: 1375530000,
+ GDP_Agriculture: 0.091,
+ GDP_Industry: 0.426,
+ GDP_Services: 0.483,
+ GDP_Total: 10380380,
+ },
+ {
+ ID: 3,
+ Country: 'France',
+ Area: 675417,
+ Population_Urban: 0.79,
+ Population_Rural: 0.21,
+ Population_Total: 64529000,
+ GDP_Agriculture: 0.019,
+ GDP_Industry: 0.183,
+ GDP_Services: 0.798,
+ GDP_Total: 2846889,
+ },
+];
+
+test('Warning should be shown when trying to set fixed state for child columns', async (t) => {
+ const consoleMessages = await t.getBrowserConsoleMessages();
+ const warnings = consoleMessages?.warn.filter((message) => message.startsWith('W1028')) || [];
+ await t.expect(warnings.length).eql(1, 'There is warning W1028');
+}).before(async () => {
+ await createWidget(
+ 'dxDataGrid',
+ {
+ dataSource: mockCountries,
+ keyExpr: 'ID',
+ columnAutoWidth: true,
+ allowColumnReordering: true,
+ width: 600,
+ showBorders: true,
+ columnChooser: { enabled: true },
+ columns: [
+ {
+ dataField: 'Country',
+ fixed: true,
+ fixedPosition: 'left',
+ },
+ {
+ dataField: 'Area',
+ fixed: true,
+ fixedPosition: 'left',
+ },
+ {
+ caption: 'Population',
+ columns: [
+ {
+ caption: 'Total',
+ dataField: 'Population_Total',
+ format: 'fixedPoint',
+ fixed: true,
+ fixedPosition: 'left',
+ },
+ {
+ caption: 'Urban',
+ dataField: 'Population_Urban',
+ format: 'percent',
+ fixed: true,
+ fixedPosition: 'left',
+ },
+ ],
+ },
+ ],
+ },
+ '#container',
+ );
+});
+
+test('Warning should work when columns changed in real time', async (t) => {
+ const grid = new DataGrid('#container');
+
+ let consoleMessages = await t.getBrowserConsoleMessages();
+ let warnings = consoleMessages?.warn.filter((message) => message.startsWith('W1028')) || [];
+
+ await t.expect(warnings.length).eql(0, 'There is not any warning W1028');
+
+ await grid.option('columns', [
+ {
+ dataField: 'test3',
+ caption: 'test3',
+ },
+ {
+ caption: 'test3 group',
+ columns: [
+ {
+ dataField: 'test4',
+ caption: 'test4',
+ fixed: true,
+ },
+ {
+ dataField: 'test5',
+ caption: 'test5',
+ fixed: true,
+ },
+ ],
+ },
+ ]);
+ consoleMessages = await t.getBrowserConsoleMessages();
+ warnings = consoleMessages?.warn.filter((message) => message.startsWith('W1028')) || [];
+ await t.expect(warnings.length).eql(1, 'There is warning W1028');
+}).before(async () => {
+ await createWidget(
+ 'dxDataGrid',
+ {
+ dataSource: [],
+ },
+ '#container',
+ );
+});
+
+test('Warning should be shown one time for every dataGrid instance', async (t) => {
+ const otherGrid = new DataGrid('#otherContainer');
+
+ await otherGrid.apiAddColumn({
+ dataField: 'test',
+ caption: 'test',
+ columns: [
+ {
+ dataField: 'test1',
+ caption: 'test1',
+ fixed: true,
+ },
+ {
+ dataField: 'test2',
+ caption: 'test2',
+ fixed: true,
+ },
+ ],
+ });
+ const consoleMessages = await t.getBrowserConsoleMessages();
+ const warnings = consoleMessages?.warn.filter((message) => message.startsWith('W1028')) || [];
+ await t.expect(warnings.length).eql(2, 'There are two warnings W1028');
+}).before(async () => {
+ await createWidget(
+ 'dxDataGrid',
+ {
+ dataSource: mockCountries,
+ keyExpr: 'ID',
+ columnAutoWidth: true,
+ allowColumnReordering: true,
+ width: 600,
+ showBorders: true,
+ columnChooser: { enabled: true },
+ columns: [
+ {
+ dataField: 'Country',
+ fixed: true,
+ fixedPosition: 'left',
+ },
+ {
+ dataField: 'Area',
+ fixed: true,
+ fixedPosition: 'left',
+ },
+ {
+ caption: 'Population',
+ columns: [
+ {
+ caption: 'Total',
+ dataField: 'Population_Total',
+ format: 'fixedPoint',
+ fixed: true,
+ fixedPosition: 'left',
+ },
+ {
+ caption: 'Urban',
+ dataField: 'Population_Urban',
+ format: 'percent',
+ fixed: true,
+ fixedPosition: 'left',
+ },
+ ],
+ },
+ ],
+ },
+ '#container',
+ );
+
+ await createWidget(
+ 'dxDataGrid',
+ {
+ dataSource: [],
+ },
+ '#otherContainer',
+ );
+});
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts
index e5e2ade0c3dd..50c135bdda70 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts
@@ -188,8 +188,8 @@ test('DataGrid - FilterRow cell loses focus when focusedRowEnabled is true and e
.ok();
// act
- await grid.scrollBy({ y: 200 });
- await grid.scrollBy({ y: 200 });
+ await grid.scrollBy(t, { y: 200 });
+ await grid.scrollBy(t, { y: 200 });
await grid.scrollTo(t, { top: 0 });
await t.wait(300);
@@ -298,3 +298,77 @@ test('DataGrid - FocusedRowChanged event isnt raised when the push API is used t
},
}));
});
+
+test('DataGrid - Focused cell appearance is applied to non-editable CheckBox cells on mouse clicks (T1282082)', async (t) => {
+ const grid = new DataGrid(GRID_SELECTOR);
+
+ await t
+ .click(grid.getDataCell(0, 0).element)
+ .click(grid.getDataCell(0, 1).element)
+ .click(grid.getDataCell(0, 0).element)
+ .expect(grid.getDataCell(0, 0).isFocused)
+ .notOk();
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: [
+ { BoolOne: false, BoolTwo: false },
+ ],
+ columns: [
+ 'BoolOne',
+ 'BoolTwo',
+ ],
+}));
+
+// T1293309
+test('Focus method should focus the first data cell', async (t) => {
+ const dataGrid = new DataGrid(GRID_SELECTOR);
+
+ await t.expect(dataGrid.isReady()).ok();
+
+ await dataGrid.apiFocus();
+
+ await t
+ .expect(dataGrid.getDataCell(0, 0).element.focused)
+ .ok();
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: [
+ { id: 1, name: 'name 1' },
+ { id: 2, name: 'name 2' },
+ { id: 3, name: 'name 3' },
+ ],
+ keyExpr: 'id',
+ columns: [
+ 'id',
+ {
+ dataField: 'name',
+ cellTemplate: (_, options) => $('
').attr('tabindex', 0).text(options.text),
+ },
+ ],
+}));
+
+// T1293309
+test('Focus method should focus the first data row when focusedRowEnabled = true', async (t) => {
+ const dataGrid = new DataGrid(GRID_SELECTOR);
+
+ await t.expect(dataGrid.isReady()).ok();
+
+ await dataGrid.apiFocus();
+
+ await t
+ .expect(dataGrid.getDataRow(0).element.focused)
+ .ok();
+}).before(async () => createWidget('dxDataGrid', {
+ dataSource: [
+ { id: 1, name: 'name 1' },
+ { id: 2, name: 'name 2' },
+ { id: 3, name: 'name 3' },
+ ],
+ keyExpr: 'id',
+ focusedRowEnabled: true,
+ columns: [
+ 'id',
+ {
+ dataField: 'name',
+ cellTemplate: (_, options) => $('