From 9584843ab7783f80d5a337f8a2db3ad35f480f21 Mon Sep 17 00:00:00 2001 From: Sergey Alexeev Date: Wed, 10 Oct 2018 10:43:45 +0300 Subject: [PATCH 1/2] Take filter operation into account --- .../src/plugins/table-filter-row.jsx | 14 ++++++++++++-- .../src/plugins/table-filter-row.test.jsx | 16 ++++++++++++++++ 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/dx-react-grid/src/plugins/table-filter-row.jsx b/packages/dx-react-grid/src/plugins/table-filter-row.jsx index 35e13a1944..6b492636f3 100644 --- a/packages/dx-react-grid/src/plugins/table-filter-row.jsx +++ b/packages/dx-react-grid/src/plugins/table-filter-row.jsx @@ -34,6 +34,15 @@ const defaultMessages = { lessThanOrEqual: 'Less than or equal to', }; +const getSelectedFilterOperation = ( + filterOperations, columnName, filter, columnFilterOperations, +) => { + if (filterOperations[columnName]) { + return filterOperations[columnName]; + } + return filter && filter.operation ? filter.operation : columnFilterOperations[0]; +}; + export class TableFilterRow extends React.PureComponent { constructor(props) { super(props); @@ -85,8 +94,9 @@ export class TableFilterRow extends React.PureComponent { const columnFilterOperations = getColumnFilterOperations( getAvailableFilterOperations, columnName, ); - const selectedFilterOperation = filterOperations[columnName] - || columnFilterOperations[0]; + const selectedFilterOperation = getSelectedFilterOperation( + filterOperations, columnName, filter, columnFilterOperations, + ); const handleFilterOperationChange = (value) => { this.setState({ filterOperations: { diff --git a/packages/dx-react-grid/src/plugins/table-filter-row.test.jsx b/packages/dx-react-grid/src/plugins/table-filter-row.test.jsx index 4ff2ba157a..a7834bafe1 100644 --- a/packages/dx-react-grid/src/plugins/table-filter-row.test.jsx +++ b/packages/dx-react-grid/src/plugins/table-filter-row.test.jsx @@ -311,4 +311,20 @@ describe('TableFilterRow', () => { expect(tree.find(defaultProps.filterSelectorComponent).prop('value')) .toBe('a'); }); + + it('should use a column filter operation as the FilterSelector value', () => { + getColumnFilterConfig.mockImplementation(() => ({ columnName: 'a', value: 'b', operation: 'startsWith' })); + const filterSelectorValue = mount(( + + {pluginDepsToComponents(defaultDeps)} + + + )).find(defaultProps.filterSelectorComponent).prop('value'); + + expect(filterSelectorValue) + .toBe('startsWith'); + }); }); From 45464942685f1eaa1c4eebceadcf73a4468d65ed Mon Sep 17 00:00:00 2001 From: Sergey Alexeev Date: Wed, 10 Oct 2018 11:48:10 +0300 Subject: [PATCH 2/2] Refactoring --- .../src/plugins/table-filter-row/helpers.js | 11 ++++++ .../plugins/table-filter-row/helpers.test.js | 24 ++++++++++++ .../src/plugins/table-filter-row.jsx | 10 +---- .../src/plugins/table-filter-row.test.jsx | 38 +++++++++---------- 4 files changed, 55 insertions(+), 28 deletions(-) diff --git a/packages/dx-grid-core/src/plugins/table-filter-row/helpers.js b/packages/dx-grid-core/src/plugins/table-filter-row/helpers.js index 02892776f9..d9b3928973 100644 --- a/packages/dx-grid-core/src/plugins/table-filter-row/helpers.js +++ b/packages/dx-grid-core/src/plugins/table-filter-row/helpers.js @@ -13,3 +13,14 @@ export const getColumnFilterOperations = ( || DEFAULT_FILTER_OPERATIONS; export const isFilterValueEmpty = value => value === undefined || !String(value).length; + +export const getSelectedFilterOperation = ( + filterOperations, columnName, columnFilter, columnFilterOperations, +) => { + if (filterOperations[columnName]) { + return filterOperations[columnName]; + } + return columnFilter && columnFilter.operation + ? columnFilter.operation + : columnFilterOperations[0]; +}; diff --git a/packages/dx-grid-core/src/plugins/table-filter-row/helpers.test.js b/packages/dx-grid-core/src/plugins/table-filter-row/helpers.test.js index 61bbf10273..90dc162a33 100644 --- a/packages/dx-grid-core/src/plugins/table-filter-row/helpers.test.js +++ b/packages/dx-grid-core/src/plugins/table-filter-row/helpers.test.js @@ -5,6 +5,7 @@ import { isFilterTableRow, getColumnFilterOperations, isFilterValueEmpty, + getSelectedFilterOperation, } from './helpers'; describe('TableFilterRow Plugin helpers', () => { @@ -53,4 +54,27 @@ describe('TableFilterRow Plugin helpers', () => { .toBeFalsy(); }); }); + + describe('#getSelectedFilterOperation', () => { + it('should get filter operation by column name', () => { + const filterOperation = getSelectedFilterOperation({ a: 'contains', b: 'startsWith' }, 'b'); + + expect(filterOperation) + .toBe('startsWith'); + }); + + it('should use column filter operation if exists', () => { + const filterOperation = getSelectedFilterOperation({}, 'a', { operation: 'contains' }); + + expect(filterOperation) + .toBe('contains'); + }); + + it('should use the first column filter operation', () => { + const filterOperation = getSelectedFilterOperation({}, 'a', null, ['endsWith', 'contains']); + + expect(filterOperation) + .toBe('endsWith'); + }); + }); }); diff --git a/packages/dx-react-grid/src/plugins/table-filter-row.jsx b/packages/dx-react-grid/src/plugins/table-filter-row.jsx index 6b492636f3..b4ade77108 100644 --- a/packages/dx-react-grid/src/plugins/table-filter-row.jsx +++ b/packages/dx-react-grid/src/plugins/table-filter-row.jsx @@ -11,6 +11,7 @@ import { isFilterTableRow, getColumnFilterOperations, isFilterValueEmpty, + getSelectedFilterOperation, TABLE_FILTER_TYPE, } from '@devexpress/dx-grid-core'; @@ -34,15 +35,6 @@ const defaultMessages = { lessThanOrEqual: 'Less than or equal to', }; -const getSelectedFilterOperation = ( - filterOperations, columnName, filter, columnFilterOperations, -) => { - if (filterOperations[columnName]) { - return filterOperations[columnName]; - } - return filter && filter.operation ? filter.operation : columnFilterOperations[0]; -}; - export class TableFilterRow extends React.PureComponent { constructor(props) { super(props); diff --git a/packages/dx-react-grid/src/plugins/table-filter-row.test.jsx b/packages/dx-react-grid/src/plugins/table-filter-row.test.jsx index a7834bafe1..59258e4e3a 100644 --- a/packages/dx-react-grid/src/plugins/table-filter-row.test.jsx +++ b/packages/dx-react-grid/src/plugins/table-filter-row.test.jsx @@ -10,6 +10,7 @@ import { isFilterTableRow, getColumnFilterOperations, isFilterValueEmpty, + getSelectedFilterOperation, } from '@devexpress/dx-grid-core'; import { TableFilterRow } from './table-filter-row'; @@ -20,6 +21,7 @@ jest.mock('@devexpress/dx-grid-core', () => ({ getColumnFilterConfig: jest.fn(), getColumnFilterOperations: jest.fn(), isFilterValueEmpty: jest.fn(), + getSelectedFilterOperation: jest.fn(), })); const defaultDeps = { @@ -74,6 +76,7 @@ describe('TableFilterRow', () => { isFilterTableRow.mockImplementation(() => false); getColumnFilterOperations.mockImplementation(() => []); isFilterValueEmpty.mockImplementation(() => false); + getSelectedFilterOperation.mockImplementation(() => 'filterOperation'); }); afterEach(() => { jest.resetAllMocks(); @@ -296,8 +299,12 @@ describe('TableFilterRow', () => { .not.toHaveBeenCalled(); }); - it('should use the first available operation as the FilterSelector value by default', () => { - getColumnFilterOperations.mockImplementation(() => ['a', 'b', 'c']); + it('should calculate the FilterSelector value', () => { + const filter = { columnName: 'a', value: 'b', operation: 'startsWith' }; + const columnFilterOperations = ['a', 'b', 'c']; + getColumnFilterConfig.mockImplementation(() => filter); + getColumnFilterOperations.mockImplementation(() => columnFilterOperations); + const tree = mount(( {pluginDepsToComponents(defaultDeps)} @@ -307,24 +314,17 @@ describe('TableFilterRow', () => { /> )); + const tableFilterRow = tree.find(TableFilterRow); + const filterSelectorValue = tree.find(defaultProps.filterSelectorComponent).prop('value'); - expect(tree.find(defaultProps.filterSelectorComponent).prop('value')) - .toBe('a'); - }); - - it('should use a column filter operation as the FilterSelector value', () => { - getColumnFilterConfig.mockImplementation(() => ({ columnName: 'a', value: 'b', operation: 'startsWith' })); - const filterSelectorValue = mount(( - - {pluginDepsToComponents(defaultDeps)} - - - )).find(defaultProps.filterSelectorComponent).prop('value'); - + expect(getSelectedFilterOperation) + .toBeCalledWith( + tableFilterRow.instance().state.filterOperations, + defaultDeps.template.tableCell.tableColumn.column.name, + filter, + columnFilterOperations, + ); expect(filterSelectorValue) - .toBe('startsWith'); + .toBe('filterOperation'); }); });