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/cardView/headerPanel/sortable.visual.ts b/e2e/testcafe-devextreme/tests/cardView/headerPanel/sortable.visual.ts index 2c1cce2ae663..d47f88fdc6aa 100644 --- a/e2e/testcafe-devextreme/tests/cardView/headerPanel/sortable.visual.ts +++ b/e2e/testcafe-devextreme/tests/cardView/headerPanel/sortable.visual.ts @@ -81,7 +81,7 @@ const getDragCoordinates = async ( await MouseUpEvents.enable(MouseAction.dragToOffset); }); - test.meta({ unstable: true })('sortable indicator during dragging to middle place', async (t) => { + test('sortable indicator during dragging to middle place', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const cardView = new CardView(CARD_VIEW_SELECTOR); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts index 8c72e41cd2df..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.meta({ unstable: true })('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 6e5d61b70505..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 73ab759619bd..8a7f5e0126e0 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts @@ -11,7 +11,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); @@ -19,6 +19,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()) @@ -45,6 +49,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/columnReordering/visual.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts index 301b6c4ce312..89012e1ee276 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/visual.ts @@ -8,7 +8,7 @@ import { testScreenshot } from '../../../../helpers/themeUtils'; fixture.disablePageReloads`Column reordering.Visual` .page(url(__dirname, '../../../container.html')); -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/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 749e04051877..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 deff2fd0321e..338b89c4a00f 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 = 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,