diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-false (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-false (fluent.blue.light)_mask.png new file mode 100644 index 000000000000..3136bdeece13 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-false (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts index 192b03d82eb9..5daf6dd1d704 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts @@ -458,129 +458,6 @@ test('Fixed columns', async (t) => { ], })); -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 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 deleted file mode 100644 index be1edbd3ccc9..000000000000 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode (fluent.blue.light).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 deleted file mode 100644 index 6ff60aabfac9..000000000000 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode (fluent.blue.light).png and /dev/null differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts index 88e3bd86b9e4..8887ed7fe04f 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts @@ -13,7 +13,7 @@ fixture.disablePageReloads`Column chooser` // visual: generic.light // visual: material.blue.light // visual: fluent.blue.light - +// visual: fluent.blue.dark ['dragAndDrop', 'select'].forEach((mode: any) => { test(`Column chooser screenshot in mode=${mode}`, async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); @@ -21,6 +21,10 @@ fixture.disablePageReloads`Column chooser` await dataGrid.apiShowColumnChooser(); + await t + .expect(dataGrid.getColumnChooser().isOpened) + .ok(); + await testScreenshot(t, takeScreenshot, `column-chooser-${mode}-mode.png`, { element: dataGrid.element }); await t .expect(compareResults.isValid()) @@ -47,6 +51,47 @@ fixture.disablePageReloads`Column chooser` })); }); +// visual: fluent.blue.light +// visual: fluent.blue.dark +test('Empty column chooser', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + // arrange + const dataGrid = new DataGrid('#container'); + 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 testScreenshot(t, takeScreenshot, 'empty-column-chooser.png'); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).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', + ], +}, '#container')); + test('Column chooser checkboxes should be aligned correctly with plain structure', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); 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/etalons/empty-column-chooser (fluent.blue.light).png similarity index 100% rename from e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/empty-column-chooser (fluent.blue.light).png rename to e2e/testcafe-devextreme/tests/dataGrid/common/etalons/empty-column-chooser (fluent.blue.light).png diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-overlay (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-overlay (fluent.blue.light).png index 9b6c5a85c71d..b68c31891fd4 100644 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-overlay (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-overlay (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts index bff66fc0b8b2..5060033d7b36 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts @@ -32,7 +32,7 @@ test.meta({ showBorders: true, })); -test.meta({ unstable: true })('FilterRow range overlay screenshot', async (t) => { +test('FilterRow range overlay screenshot', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const dataGrid = new DataGrid('#container'); const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox); @@ -42,7 +42,7 @@ test.meta({ unstable: true })('FilterRow range overlay screenshot', async (t) => await t .click(filterEditor.menu.getItemByText('Between')); // act - await testScreenshot(t, takeScreenshot, 'filter-row-overlay.png', { element: dataGrid.element }); + await testScreenshot(t, takeScreenshot, 'filter-row-overlay.png'); await t .expect(compareResults.isValid()) .ok() diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/functional.ts index 04d9c638a701..3937f32b7782 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/functional.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/functional.ts @@ -773,31 +773,21 @@ test('toIndex should not be corrected when source item gets removed from DOM', a // T1139685 test('Item should appear in a correct spot when dragging to a different page with scrolling.mode: "virtual"', async (t) => { - const fromIndex = 2; - const toIndex = 4; - const dataGrid = new DataGrid('#container'); - await dataGrid.moveRow(fromIndex, 0, 50, true); - await dataGrid.moveRow(fromIndex, 0, 95); - await t.wait(500); - await dataGrid.moveRow(toIndex, 0, 5); - await t.wait(200); + await t.expect(dataGrid.isReady()).ok(); + await t.drag(dataGrid.getDataRow(2).getDragCommand(), 0, 32, { speed: 0.95 }); - await ClientFunction((grid) => { - const instance = grid.getInstance(); - $(instance.element()).trigger($.Event('dxpointerup')); - })(dataGrid); - await t.wait(200); + const visibleRows = await dataGrid.apiGetVisibleRows(); + const visibleRowKeys: string[] = visibleRows.map((row) => row.key); + const expectedSequence = ['5-1', '3-1', '6-1']; - const getDraggedRowIndexFunc = ClientFunction((grid) => grid.getInstance() - .getVisibleRows() - .findIndex(({ key }, index: number, rows) => key > rows[index + 1]?.key))(dataGrid); + const startIndex = visibleRowKeys.findIndex( + (_, i) => expectedSequence.every((val, j) => visibleRowKeys[i + j] === val), + ); - await t.expect(getDraggedRowIndexFunc) - .eql(toIndex - 2); -}).before(async (t) => { - await t.maximizeWindow(); + await t.expect(startIndex).gte(0); +}).before(async () => { const items = generateData(20, 1); return createWidget('dxDataGrid', { height: 250,