Grids (cherry-pick) - fix texts localization for ColumnChooser in DataGrid and CardView (DevExpress#30998)

Author: dmlvr

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

@@ -145,3 +145,40 @@ testsFactory({
     ).eql('A');
   },
 });
+
+test('ColumnChooser should receive and render custom texts', async (t) => {
+  const cardView = new CardView('#container');
+
+  const columnChooserBtn = cardView.getColumnChooserButton();
+  await t.click(columnChooserBtn);
+  const columnChooser = cardView.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('dxCardView', {
+    dataSource: [],
+    keyExpr: 'ID',
+    cardsPerRow: 'auto',
+    cardMinWidth: 300,
+    columnChooser: {
+      enabled: true,
+      mode: 'dragAndDrop',
+      height: '340px',
+    },
+    columns: [],
+  });
+});

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

@@ -237,3 +237,41 @@ test(
     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: [],
+  });
+});

packages/devextreme/js/__internal/grids/grid_core/column_chooser/const.ts

@@ -19,8 +19,12 @@ export const defaultOptions = {
     mode: 'dragAndDrop',
     width: 250,
     height: 260,
-    title: messageLocalization.format('dxDataGrid-columnChooserTitle'),
-    emptyPanelText: messageLocalization.format('dxDataGrid-columnChooserEmptyText'),
+    get title() {
+      return messageLocalization.format('dxDataGrid-columnChooserTitle');
+    },
+    get emptyPanelText() {
+      return messageLocalization.format('dxDataGrid-columnChooserEmptyText');
+    },
     container: undefined,
   } as ColumnChooser,
 };

packages/testcafe-models/dataGrid/columnChooser.ts

@@ -11,6 +11,9 @@ const CLASS = {
   checkbox: 'dx-checkbox',
   treeViewItem: 'dx-treeview-item',
   treeView: 'dx-treeview',
+  itemContent: 'dx-item-content',
+  itemContentToolbar: 'dx-toolbar-item-content',
+  emptyMessage: 'dx-empty-message',
 };
 
 export default class ColumnChooser extends FocusableElement {
@@ -61,4 +64,12 @@ export default class ColumnChooser extends FocusableElement {
   getColumn(index = 0): Selector {
     return this.content.find(`.${CLASS.treeViewItem}`).nth(index);
   }
-}
+
+  getTitle(): Selector {
+    return this.content.find(`.${CLASS.itemContent}.${CLASS.itemContentToolbar}`).nth(0);
+  }
+
+  getEmptyMessage(): Selector {
+    return this.content.find(`.${CLASS.emptyMessage}`);
+  }
+}