FilterBuilder: fix the error thrown while changing "editorName" to "dxCheckBox" or "dxSwitch" using "onEditorPreparing" option (T1310528) (#31596) (#31613)

Author: dmirgaev

e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-checkbox (fluent.blue.light).png

@@ -0,0 +1,51 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import { fields, filter } from './data';
+import { testScreenshot } from '../../../helpers/themeUtils';
+
+fixture.disablePageReloads`Editing events`
+  .page(url(__dirname, '../../container.html'));
+
+// T1310528
+test('Change value editor to checkbox', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const filterBuilder = new FilterBuilder('#container');
+  await t.click(filterBuilder.getField(0, 'itemValue').element);
+
+  await testScreenshot(t, takeScreenshot, 'value-editor-checkbox.png', { element: filterBuilder.element });
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxFilterBuilder', {
+    fields,
+    value: filter,
+    allowHierarchicalFields: true,
+    onEditorPreparing: (data) => {
+      data.editorName = 'dxCheckBox';
+    },
+  });
+});
+
+// T1310528
+test('Change value editor to switch', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const filterBuilder = new FilterBuilder('#container');
+  await t.click(filterBuilder.getField(0, 'itemValue').element);
+
+  await testScreenshot(t, takeScreenshot, 'value-editor-switch.png', { element: filterBuilder.element });
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxFilterBuilder', {
+    fields,
+    value: filter,
+    allowHierarchicalFields: true,
+    onEditorPreparing: (data) => {
+      data.editorName = 'dxSwitch';
+    },
+  });
+});

e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-switch (fluent.blue.light).png

@@ -82,6 +82,14 @@
       padding-left: 26px;
     }
   }
+
+  .dx-filterbuilder-checkbox-size {
+    vertical-align: middle;
+
+    .dx-switch-container {
+      vertical-align: baseline;
+    }
+  }
 }
 
 .dx-filterbuilder-operations {

e2e/testcafe-devextreme/tests/common/filterBuilder/filterBuilderEditor.ts

@@ -922,6 +922,10 @@ class FilterBuilder extends Widget<any> {
     const treeViewNode = treeViewPopup?.find?.(`.${TREEVIEW_NODE_CONTAINER}`);
     treeViewNode?.attr('role', 'presentation');
   }
+
+  addWidgetPrefix(className: string): string {
+    return `${FILTER_BUILDER_CLASS}-${className}`;
+  }
 }
 
 registerComponent('dxFilterBuilder', FilterBuilder);