test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

fix: 🐛 Table unchanged filter should not trigger onChange

Browse Source 
ref https://github.com/ant-design/ant-design/issues/22819#issuecomment-607171024
This commit is contained in:
afc163 2020-04-01 18:52:37 +08:00 committed by 偏右
parent aca2656721
commit ddb0ac46ba
2 changed files with 46 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/table/__tests__/Table.filter.test.js
View File

@ -11,12 +11,7 @@ import ConfigProvider from '../../config-provider';
const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } };
function getDropdownWrapper(wrapper) {
return mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
return mount(wrapper.find('Trigger').instance().getComponent());
}
describe('Table.filter', () => {
@ -213,7 +208,10 @@ describe('Table.filter', () => {
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toBeFalsy();
wrapper.find('FilterDropdown').find('input[type="checkbox"]').first().simulate('click');
wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper
.find('FilterDropdown')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
wrapper.setProps({ dataSource: [...data, { key: 999, name: 'Chris' }] });
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
@ -342,7 +340,10 @@ describe('Table.filter', () => {
const wrapper = mount(createTable({ onChange: handleChange }));
wrapper.find('.ant-dropdown-trigger').first().simulate('click');
wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click');
wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper
.find('FilterDropdown')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
expect(handleChange).toHaveBeenCalledWith(
{},
{ name: ['boy'] },
@ -358,12 +359,15 @@ describe('Table.filter', () => {
const wrapper = mount(createTable({ pagination: { onChange: onPaginationChange } }));
wrapper.find('.ant-dropdown-trigger').first().simulate('click');
wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click');
wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper
.find('FilterDropdown')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
expect(onPaginationChange).toHaveBeenCalledWith(1, 10);
});
it('should not fire change event on close filterDropdown without changing anything', () => {
it('should not fire change event when close filterDropdown without changing anything', () => {
const handleChange = jest.fn();
const wrapper = mount(createTable({ onChange: handleChange }));
@ -373,6 +377,26 @@ describe('Table.filter', () => {
expect(handleChange).not.toHaveBeenCalled();
});
it('should not fire change event when close a filtered filterDropdown without changing anything', () => {
const handleChange = jest.fn();
const wrapper = mount(
createTable({
onChange: handleChange,
columns: [
{
...column,
defaultFilteredValue: ['boy', 'designer'],
},
],
}),
);
wrapper.find('.ant-dropdown-trigger').first().simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
expect(handleChange).not.toHaveBeenCalled();
});
it('three levels menu', () => {
const filters = [
{ text: 'Upper', value: 'Upper' },
@ -410,29 +434,17 @@ describe('Table.filter', () => {
let dropdownWrapper = getDropdownWrapper(wrapper);
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
// select
dropdownWrapper
.find('.ant-dropdown-menu-submenu-title')
.at(0)
.simulate('mouseEnter');
dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(0).simulate('mouseEnter');
jest.runAllTimers();
dropdownWrapper = getDropdownWrapper(wrapper);
dropdownWrapper
.find('.ant-dropdown-menu-submenu-title')
.at(1)
.simulate('mouseEnter');
dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(1).simulate('mouseEnter');
jest.runAllTimers();
dropdownWrapper = getDropdownWrapper(wrapper);
dropdownWrapper
.find('MenuItem')
.last()
.simulate('click');
dropdownWrapper.find('MenuItem').last().simulate('click');
dropdownWrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper.update();
expect(renderedNames(wrapper)).toEqual(['Jack']);
dropdownWrapper
.find('MenuItem')
.last()
.simulate('click');
dropdownWrapper.find('MenuItem').last().simulate('click');
jest.useRealTimers();
});
@ -1060,12 +1072,9 @@ describe('Table.filter', () => {
expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').text()).toEqual(
'Bamboo',
);
expect(
wrapper
.find('.ant-table-filter-dropdown-btns .ant-btn-link')
.last()
.text(),
).toEqual('Reset');
expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').last().text()).toEqual(
'Reset',
);
});
it('filtered should work', () => {

5
components/table/hooks/useFilter/FilterDropdown.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import isEqual from 'lodash/isEqual';
import FilterFilled from '@ant-design/icons/FilterFilled';
import Button from '../../../button';
import Menu from '../../../menu';
@ -131,6 +132,10 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
return null;
}
if (isEqual(mergedKeys, filterState?.filteredKeys)) {
return null;
}
triggerFilter({
column,
key: columnKey,