CardView - column chooser - add tests for multiple show/hide (DevExpress#30124)

Author: pomahtri

e2e/testcafe-devextreme/tests/cardView/columnChooser/functional.ts

@@ -0,0 +1,106 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+
+fixture.disablePageReloads`CardView - ColumnChooser.Functional`
+  .page(url(__dirname, '../../container.html'));
+
+function testsFactory(testModel: {
+  name: string;
+  hideFirstColumn: (t: TestController, cardView: CardView) => Promise<void>;
+  showFirstColumn: (t: TestController, cardView: CardView) => Promise<void>;
+  assertFirstColumnVisible: (t: TestController, cardView: CardView) => Promise<void>;
+  assertFirstColumnHidden: (t: TestController, cardView: CardView) => Promise<void>;
+  config: any; // TODO: add typing
+}) {
+  test(`column chooser in ${testModel.name} mode should work after multiple hide/show actions`, async (t) => {
+    const cardView = new CardView('#container');
+
+    await cardView.apiShowColumnChooser();
+
+    await testModel.hideFirstColumn(t, cardView);
+    await testModel.assertFirstColumnHidden(t, cardView);
+
+    await testModel.showFirstColumn(t, cardView);
+
+    await testModel.assertFirstColumnVisible(t, cardView);
+
+    await testModel.hideFirstColumn(t, cardView);
+    await testModel.assertFirstColumnHidden(t, cardView);
+
+    await testModel.showFirstColumn(t, cardView);
+    await testModel.assertFirstColumnVisible(t, cardView);
+  }).before(async () => createWidget('dxCardView', {
+    dataSource: [
+      { a: 1, b: 2, c: 3 },
+      { a: 1, b: 2, c: 3 },
+      { a: 1, b: 2, c: 3 },
+    ],
+    columns: [
+      'a', 'b', 'c',
+    ],
+    ...testModel.config,
+  }));
+}
+
+testsFactory({
+  name: 'select',
+  config: {
+    columnChooser: {
+      enabled: true,
+      mode: 'select',
+    },
+  },
+  async hideFirstColumn(t: TestController, cardView: CardView) {
+    await t.click(
+      cardView.getColumnChooser().getCheckbox(0),
+    );
+  },
+  async showFirstColumn(t: TestController, cardView: CardView) {
+    await t.click(
+      cardView.getColumnChooser().getCheckbox(0),
+    );
+  },
+  async assertFirstColumnVisible(t: TestController, cardView: CardView) {
+    await t.expect(
+      cardView.getColumnChooser().isCheckboxChecked(0),
+    ).ok();
+  },
+  async assertFirstColumnHidden(t: TestController, cardView: CardView) {
+    await t.expect(
+      cardView.getColumnChooser().isCheckboxChecked(0),
+    ).notOk();
+  },
+});
+
+testsFactory({
+  name: 'dragAndDrop',
+  config: {
+    columnChooser: {
+      enabled: true,
+      mode: 'dragAndDrop',
+    },
+  },
+  async hideFirstColumn(t: TestController, cardView: CardView) {
+    await t.dragToElement(
+      cardView.getHeaderPanel().getHeaderItem(0).element,
+      cardView.getColumnChooser().content,
+    );
+  },
+  async showFirstColumn(t: TestController, cardView: CardView) {
+    await t.dragToElement(
+      cardView.getColumnChooser().getColumn(0),
+      cardView.getHeaderPanel().element,
+    );
+  },
+  async assertFirstColumnVisible(t: TestController, cardView: CardView) {
+    await t.expect(
+      cardView.getHeaderPanel().getHeaderItem(0).element.textContent,
+    ).eql('A');
+  },
+  async assertFirstColumnHidden(t: TestController, cardView: CardView) {
+    await t.expect(
+      cardView.getColumnChooser().getColumn(0).textContent,
+    ).eql('A');
+  },
+});

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

@@ -127,7 +127,7 @@ test('Accessibility: DataGrid general status should contains correct text after
   await t.click(columnChooserBtn);
 
   const columnChooser = dataGrid.getColumnChooser();
-  const checkbox = columnChooser.getCheckboxIcon(1);
+  const checkbox = columnChooser.getCheckbox(1);
   await t.click(checkbox);
 
   const statusText = await dataGrid.getGeneralStatusContainer().textContent;

e2e/testcafe-devextreme/tests/treeList/accessibility/status.ts

@@ -156,7 +156,7 @@ test('Accessibility: TreeList general status should contains correct text after
   await t.click(columnChooserBtn);
 
   const columnChooser = treeList.getColumnChooser();
-  const checkbox = columnChooser.getCheckboxIcon(1);
+  const checkbox = columnChooser.getCheckbox(1);
   await t.click(checkbox);
 
   const statusText = await treeList.getGeneralStatusContainer().textContent;

packages/testcafe-models/dataGrid/columnChooser.ts

@@ -6,7 +6,8 @@ const CLASS = {
   overlayContent: 'dx-overlay-content',
   overlayWrapper: 'dx-overlay-wrapper',
   columnChooser: 'dx-datagrid-column-chooser',
-  checkboxIcon: 'dx-checkbox-icon',
+  checkboxChecked: 'dx-checkbox-checked',
+  checkbox: 'dx-checkbox',
   treeViewItem: 'dx-treeview-item',
   treeView: 'dx-treeview',
 };
@@ -40,8 +41,12 @@ export default class ColumnChooser extends FocusableElement {
     })(treeView);
   }
 
-  getCheckboxIcon(nth = 0): Selector {
-    return this.content.find(`.${CLASS.checkboxIcon}`).nth(nth);
+  getCheckbox(nth = 0): Selector {
+    return this.content.find(`.${CLASS.checkbox}`).nth(nth);
+  }
+
+  isCheckboxChecked(nth = 0): Promise<boolean> {
+    return this.getCheckbox(nth).hasClass(CLASS.checkboxChecked);
   }
 
   getColumn(index = 0): Selector {