FilterBuilder: fix invalid date formatting (T1319193, T1311486)

e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/functional.ts

@@ -0,0 +1,158 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import Popup from 'devextreme-testcafe-models/popup';
+import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
+import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
+
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture.disablePageReloads`Filtering`
+  .page(url(__dirname, '../../../container.html'));
+
+const GRID_CONTAINER = '#container';
+
+// T1319193, T1311486
+test('Proper handle custom filter operations for dates with non-date values', async (t) => {
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const filterPanel = dataGrid.getFilterPanel();
+
+  let filterBuilderPopup = await filterPanel.openFilterBuilderPopup(t);
+  let filterBuilder = filterBuilderPopup.getFilterBuilder();
+
+  await t
+    .click(filterBuilder.getAddButton())
+    .expect(FilterBuilder.getPopupTreeView().visible).ok()
+    .click(FilterBuilder.getPopupTreeViewNodeByText('Add Condition'))
+    .click(filterBuilder.getField(0, 'item').element)
+    .click(FilterBuilder.getPopupTreeViewNodeByText('Order Date'))
+    .click(filterBuilder.getField(0, 'itemOperation').element)
+    .click(FilterBuilder.getPopupTreeViewNodeByText('Is any of'))
+    .click(filterBuilder.getField(0, 'itemValue').element)
+    .click(FilterBuilder.getPopupTreeViewNodeCheckboxByText('Weekends'))
+    .click(new Popup(FilterBuilder.getPopupTreeView()).getOkButton().element)
+    .click(filterBuilderPopup.asPopup().getOkButton().element);
+
+  await t
+    .expect(dataGrid.getRows().count)
+    .eql(3)
+    .expect(filterPanel.getFilterText().element.innerText)
+    .eql('[Order Date] Is any of(\'Weekends\')');
+
+  filterBuilderPopup = await filterPanel.openFilterBuilderPopup(t);
+  filterBuilder = filterBuilderPopup.getFilterBuilder();
+
+  await t
+    .click(filterBuilder.getField(0, 'itemOperation').element)
+    .click(FilterBuilder.getPopupTreeViewNodeByText('Weekends'))
+    .click(filterBuilderPopup.asPopup().getOkButton().element);
+
+  await t
+    .expect(dataGrid.getRows().count)
+    .eql(3)
+    .expect(filterPanel.getFilterText().element.innerText)
+    .eql('[Order Date] Weekends');
+
+  const dateFilterCell = dataGrid.getFilterEditor(1, FilterTextBox);
+
+  await t
+    .click(dateFilterCell.menuButton)
+    .click(dateFilterCell.menu.getItemByText('Between'))
+    .expect(dataGrid.getFilterRangeOverlay().exists).ok()
+    .typeText(dataGrid.getFilterRangeStartEditor().input, '2/1/2017')
+    .typeText(dataGrid.getFilterRangeEndEditor().input, '2/28/2017')
+    .pressKey('enter');
+
+  await t
+    .expect(dataGrid.getRows().count)
+    .eql(4)
+    .expect(filterPanel.getFilterText().element.innerText)
+    .eql('[Order Date] Is between(\'2/1/2017\', \'2/28/2017\')');
+}).before(async () => {
+  const dataSource = [{
+    ID: 1,
+    OrderNumber: 35711,
+    OrderDate: '2017/01/12',
+    Employee: 'Jim Packard',
+  }, {
+    ID: 5,
+    OrderNumber: 35714,
+    OrderDate: '2017/01/22',
+    Employee: 'Harv Mudd',
+  }, {
+    ID: 7,
+    OrderNumber: 35983,
+    OrderDate: '2017/02/07',
+    Employee: 'Todd Hoffman',
+  }, {
+    ID: 14,
+    OrderNumber: 39420,
+    OrderDate: '2017/02/15',
+    Employee: 'Jim Packard',
+  }, {
+    ID: 15,
+    OrderNumber: 39874,
+    OrderDate: '2017/02/04',
+    Employee: 'Harv Mudd',
+  }];
+
+  return createWidget('dxDataGrid', {
+    dataSource,
+    keyExpr: 'ID',
+    filterRow: { visible: true },
+    filterPanel: { visible: true },
+    headerFilter: { visible: true },
+    filterBuilder: {
+      customOperations: [
+        {
+          name: 'weekends',
+          caption: 'Weekends',
+          dataTypes: ['date'],
+          icon: 'check',
+          hasValue: false,
+          calculateFilterExpression() {
+            function getOrderDay(rowData: { OrderDate: string }) {
+              return (new Date(rowData.OrderDate)).getDay();
+            }
+
+            return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
+          },
+        },
+      ],
+    },
+    columns: [
+      'OrderNumber',
+      {
+        dataField: 'OrderDate',
+        dataType: 'date',
+        calculateFilterExpression(value, selectedFilterOperations, target) {
+          if (target === 'headerFilter' && value === 'weekends') {
+            function getOrderDay(rowData: { OrderDate: string }) {
+              return (new Date(rowData.OrderDate)).getDay();
+            }
+
+            return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
+          }
+          return this.defaultCalculateFilterExpression?.(
+            value,
+            selectedFilterOperations,
+            target,
+          ) ?? [];
+        },
+        headerFilter: {
+          dataSource(data) {
+            if (data.dataSource) {
+              data.dataSource.postProcess = (results) => {
+                results.push({
+                  text: 'Weekends',
+                  value: 'weekends',
+                });
+                return results;
+              };
+            }
+          },
+        },
+      },
+      'Employee',
+    ],
+  });
+});

e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel.ts → e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/visual.ts

@@ -1,11 +1,11 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import url from '../../../helpers/getPageUrl';
-import { createWidget } from '../../../helpers/createWidget';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`filterPanel`
-  .page(url(__dirname, '../../container.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 // T1182854
 test('editor\'s popup inside filterBuilder is opening & closing right (T1182854)', async (t) => {

packages/devextreme/js/__internal/filter_builder/__tests__/utils.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from '@jest/globals';
+import type { CustomOperation, Field } from '@js/ui/filter_builder';
+
+import { getCurrentValueText } from '../m_utils';
+
+describe('Formatting', () => {
+  it('empty string', () => {
+    const field = {};
+    const value = '';
+
+    expect(getCurrentValueText(field, value, null)).toBe('');
+  });
+
+  it('string', () => {
+    const field = {};
+    const value = 'Text';
+
+    expect(getCurrentValueText(field, value, null)).toBe('Text');
+  });
+
+  it('shortDate', () => {
+    const field = { format: 'shortDate' };
+    const value = new Date(2017, 8, 5);
+
+    expect(getCurrentValueText(field, value, null)).toBe('9/5/2017');
+  });
+
+  it('invalid date string (T1319193)', () => {
+    const field = { format: 'shortDate' };
+    const dateString = 'Weekend';
+
+    expect(getCurrentValueText(field, dateString, null)).toBe(dateString);
+  });
+
+  it('boolean', () => {
+    const field: Field = { dataType: 'boolean' };
+    let value = true;
+
+    expect(getCurrentValueText(field, value, null)).toBe('true');
+
+    value = false;
+    expect(getCurrentValueText(field, value, null)).toBe('false');
+
+    field.falseText = 'False Text';
+    expect(getCurrentValueText(field, value, null)).toBe('False Text');
+  });
+
+  it('field.customizeText', () => {
+    const field: Field = {
+      customizeText(conditionInfo) {
+        return `${conditionInfo.valueText}Test`;
+      },
+    };
+    const value = 'MyValue';
+
+    expect(getCurrentValueText(field, value, null)).toBe('MyValueTest');
+  });
+
+  it('customOperation.customizeText', () => {
+    const field: Field = {
+      customizeText(conditionInfo) {
+        return `${conditionInfo.valueText}Test`;
+      },
+    };
+    const value = 'MyValue';
+    const customOperation: CustomOperation = {
+      customizeText(conditionInfo) {
+        return `${conditionInfo.valueText}CustomOperation`;
+      },
+    };
+
+    expect(getCurrentValueText(field, value, customOperation)).toBe('MyValueTestCustomOperation');
+  });
+
+  it('customOperation.customizeText for array', async () => {
+    const field: Field = { dataType: 'string' };
+
+    const customOperation = { customizeText: (): string => '(Blanks)' };
+    let text = await getCurrentValueText(field, '', customOperation);
+
+    expect(text).toBe('');
+
+    text = await getCurrentValueText(field, [null], customOperation);
+    expect(text).toEqual(['(Blanks)']);
+
+    const field2: Field = { dataType: 'number' };
+
+    text = await getCurrentValueText(field2, null, customOperation);
+
+    expect(text).toBe('');
+
+    text = await getCurrentValueText(field, [null], customOperation);
+    expect(text).toEqual(['(Blanks)']);
+  });
+
+  it('default format for date', () => {
+    const field: Field = { dataType: 'date' };
+    const value = new Date(2017, 8, 5, 12, 30, 0);
+
+    expect(getCurrentValueText(field, value, null)).toBe('9/5/2017');
+  });
+
+  it('default format for datetime', () => {
+    const field: Field = { dataType: 'datetime' };
+    const value = new Date(2017, 8, 5, 12, 30, 0);
+
+    expect(getCurrentValueText(field, value, null)).toBe('9/5/2017, 12:30 PM');
+  });
+});