FilterBuilder - First field uses the dataField property while subsequent fields use the name property in the filter value (T1253754) (#28353)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderNaming.ts

@@ -0,0 +1,56 @@
+import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
+import { createWidget } from '../../helpers/createWidget';
+import url from '../../helpers/getPageUrl';
+
+fixture`FilterBuilder - Field naming`
+  .page(url(__dirname, '../container.html'));
+
+// T1253754
+test('FilterBuilder - First field uses the dataField property while subsequent fields use the name property in the filter value', async (t) => {
+  const filterBuilder = new FilterBuilder('#container');
+
+  const expectedValues = [
+    [
+      ['name1', '<>', 0],
+      'and',
+      ['name1', 'contains', 'A'],
+    ],
+    [
+      ['name1', '<>', 0],
+      'and',
+      ['name2', 'contains', 'A'],
+    ],
+  ];
+  await t
+    .click(filterBuilder.getAddButton())
+    .expect(FilterBuilder.getPopupTreeView().visible).ok()
+    .click(FilterBuilder.getPopupTreeViewNode(0))
+    .click(filterBuilder.getField(1, 'itemValue').element)
+    .pressKey('A enter');
+
+  await t
+    .expect(await filterBuilder.option('value'))
+    .eql(expectedValues[0]);
+
+  await t
+    .click(filterBuilder.getField(1, 'item').element)
+    .expect(FilterBuilder.getPopupTreeView().visible).ok()
+    .click(FilterBuilder.getPopupTreeViewNode(1))
+    .click(filterBuilder.getField(1, 'itemValue').element)
+    .pressKey('A enter');
+
+  await t
+    .expect(await filterBuilder.option('value'))
+    .eql(expectedValues[1]);
+})
+  .before(async () => {
+    await createWidget('dxFilterBuilder', {
+      value: [
+        ['dataField1', '<>', 0],
+      ],
+      fields: [
+        { dataField: 'dataField1', name: 'name1' },
+        { dataField: 'dataField2', name: 'name2' },
+      ],
+    });
+  });

packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts

@@ -485,6 +485,7 @@ class FilterBuilder extends Widget<any> {
     const getFullCaption = function (item, items) {
       return allowHierarchicalFields ? getCaptionWithParents(item, items) : item.caption;
     };
+    condition[0] = item.name || item.dataField;
 
     const $fieldButton = this._createButtonWithMenu({
       caption: getFullCaption(item, items),

packages/testcafe-models/filterBuilder/index.ts

@@ -1,16 +1,22 @@
-import { Selector } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 import type { WidgetName } from '../types';
 import Widget from '../internal/widget';
 import Field from './field';
 
-type FieldType = 'item' | 'groupOperation' | 'itemOperation' | 'itemAction';
+type FieldType = 'item' | 'groupOperation' | 'itemOperation' | 'itemAction' | 'itemValue';
 const CLASS = {
+  root: 'dx-filterbuilder',
+  group: 'dx-filterbuilder-group',
+  groupItem: 'dx-filterbuilder-group-item',
+  addButton: 'dx-icon-plus',
+  removeButton: 'dx-icon-remove',
   item: 'dx-filterbuilder-item-field',
   popupContent: 'dx-popup-content',
   treeView: 'dx-treeview',
   treeViewLeaf: 'dx-treeview-node-is-leaf',
   groupOperation: 'dx-filterbuilder-group-operation',
   itemOperation: 'dx-filterbuilder-item-operation',
+  itemValue: 'dx-filterbuilder-item-value-text',
   itemAction: 'dx-filterbuilder-action',
 };
 
@@ -31,4 +37,71 @@ export default class FilterBuilder extends Widget {
     const fields = this.element.find(`.${cssClass}`);
     return new Field(fields.nth(index));
   }
+
+  getRootElement(): Selector {
+    return this.element.find(`.${CLASS.root}`);
+  }
+
+  getGroupByLevel(level): Selector {
+    return this.element.find(`.${CLASS.group}`).nth(level - 1);
+  }
+
+  getGroupItem(level?): Selector {
+    if(level) {
+      return this.getGroupByLevel(level).find(`.${CLASS.groupItem}`);
+    }
+    return this.element.find(`.${CLASS.groupItem}`);
+  }
+
+  getOperationButton(level?): Selector {
+    if(level) {
+      return this.getGroupByLevel(level).find(`.${CLASS.groupOperation}`);
+    }
+    return this.element.find(`.${CLASS.groupOperation}`);
+  }
+
+  getAddButton(level?): Selector {
+    if(level) {
+      return this.getGroupByLevel(level).find(`.${CLASS.addButton}`);
+    }
+    return this.element.find(`.${CLASS.addButton}`);
+  }
+
+  getRemoveButton(index?): Selector {
+    if(index) {
+      return this.element.find(`.${CLASS.removeButton}`).nth(index);
+    }
+    return this.element.find(`.${CLASS.removeButton}`);
+  }
+
+  getItem(item, index?) {
+    var className;
+    switch(item) {
+      case 'operation':
+        className = CLASS.itemOperation;
+        break;
+      case 'field': 
+        className = CLASS.item;
+        break;
+      case 'value': 
+        className = CLASS.itemValue;
+        break;
+      default:
+        throw new Error(`Unsupported class name: ${className}`);
+    }
+
+    if(index) {
+      return this.element.find(`.${className}`).nth(index);
+    }
+    return this.element.find(`.${className}`);
+  }
+
+  isReady(): Promise<boolean> {
+    const { getInstance } = this;
+
+    return ClientFunction(
+      () => (getInstance() as any).isReady(),
+      { dependencies: { getInstance } },
+    )();
+  }
 }