Grid: unskip screenshot tests (#32615)

Author: anna-shakhova

e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-false (fluent.blue.light)_mask.png

@@ -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);
 

e2e/testcafe-devextreme/tests/cardView/headerPanel/sortable.visual.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

e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts

@@ -11,14 +11,18 @@ 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);
     const dataGrid = new DataGrid('#container');
 
     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);
 

e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-drag_and_drop-mode (fluent.blue.light).png

@@ -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);

e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/column-chooser-select-mode (fluent.blue.light).png

@@ -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()