mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

fix(#23019): display defaultValue when no matched options (#24058)

Browse Source
This commit is contained in:
Kermit Xuan 2020-05-12 10:34:24 +08:00 committed by GitHub
parent 40a987e059
commit 9a6ad0edb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
components/cascader/__tests__/index.test.js
View File

@ -53,14 +53,7 @@ describe('Cascader', () => {
it('popup correctly when panel is hidden', () => {
const wrapper = mount(<Cascader options={options} />);
expect(
render(
wrapper
.find('Trigger')
.instance()
.getComponent(),
),
).toMatchSnapshot();
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
});
it('popup correctly when panel is open', () => {
@ -69,14 +62,7 @@ describe('Cascader', () => {
<Cascader options={options} onPopupVisibleChange={onPopupVisibleChange} />,
);
wrapper.find('input').simulate('click');
expect(
render(
wrapper
.find('Trigger')
.instance()
.getComponent(),
),
).toMatchSnapshot();
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
});
@ -91,97 +77,44 @@ describe('Cascader', () => {
it('popup correctly with defaultValue', () => {
const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
wrapper.find('input').simulate('click');
expect(
render(
wrapper
.find('Trigger')
.instance()
.getComponent(),
),
).toMatchSnapshot();
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
});
it('should support popupVisible', () => {
const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
expect(
wrapper
.find('Trigger')
.instance()
.getComponent().props.visible,
).toBe(false);
expect(wrapper.find('Trigger').instance().getComponent().props.visible).toBe(false);
wrapper.setProps({ popupVisible: true });
expect(
wrapper
.find('Trigger')
.instance()
.getComponent().props.visible,
).toBe(true);
expect(wrapper.find('Trigger').instance().getComponent().props.visible).toBe(true);
});
it('can be selected', () => {
const onChange = jest.fn();
const wrapper = mount(<Cascader options={options} onChange={onChange} />);
wrapper.find('input').simulate('click');
let popupWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
let popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
popupWrapper
.find('.ant-cascader-menu')
.at(0)
.find('.ant-cascader-menu-item')
.at(0)
.simulate('click');
expect(
render(
wrapper
.find('Trigger')
.instance()
.getComponent(),
),
).toMatchSnapshot();
popupWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
popupWrapper
.find('.ant-cascader-menu')
.at(1)
.find('.ant-cascader-menu-item')
.at(0)
.simulate('click');
expect(
render(
wrapper
.find('Trigger')
.instance()
.getComponent(),
),
).toMatchSnapshot();
popupWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
popupWrapper
.find('.ant-cascader-menu')
.at(2)
.find('.ant-cascader-menu-item')
.at(0)
.simulate('click');
expect(
render(
wrapper
.find('Trigger')
.instance()
.getComponent(),
),
).toMatchSnapshot();
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
});
@ -199,12 +132,7 @@ describe('Cascader', () => {
wrapper.find('input').simulate('click');
wrapper.find('input').simulate('change', { target: { value: 'z' } });
expect(wrapper.state('inputValue')).toBe('z');
const popupWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(popupWrapper).toMatchSnapshot();
});
@ -245,12 +173,7 @@ describe('Cascader', () => {
wrapper.find('input').simulate('click');
wrapper.find('input').simulate('change', { target: { value: 'z' } });
expect(wrapper.state('inputValue')).toBe('z');
const popupWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(popupWrapper.render()).toMatchSnapshot();
});
@ -259,22 +182,14 @@ describe('Cascader', () => {
wrapper.find('input').simulate('click');
wrapper.find('input').simulate('change', { target: { value: '__notfoundkeyword__' } });
expect(wrapper.state('inputValue')).toBe('__notfoundkeyword__');
const popupWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(popupWrapper).toMatchSnapshot();
});
it('should support to clear selection', () => {
const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('Zhejiang / Hangzhou');
wrapper
.find('.ant-cascader-picker-clear')
.at(0)
.simulate('click');
wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('');
});
@ -288,10 +203,7 @@ describe('Cascader', () => {
onPopupVisibleChange={onPopupVisibleChange}
/>,
);
wrapper
.find('.ant-cascader-picker-clear')
.at(0)
.simulate('click');
wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
});
@ -302,10 +214,7 @@ describe('Cascader', () => {
wrapper.find('input').simulate('click');
wrapper.find('input').simulate('change', { target: { value: 'xxx' } });
expect(wrapper.state('inputValue')).toBe('xxx');
wrapper
.find('.ant-cascader-picker-clear')
.at(0)
.simulate('click');
wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
expect(wrapper.state('inputValue')).toBe('');
});
@ -393,24 +302,14 @@ describe('Cascader', () => {
/>,
);
wrapper.instance().handleChange(['zhejiang', 'hangzhou', 'xihu'], customerOptions);
expect(
wrapper
.find('.ant-cascader-picker-label')
.text()
.split('/').length,
).toBe(3);
expect(wrapper.find('.ant-cascader-picker-label').text().split('/').length).toBe(3);
});
it('should show not found content when options.length is 0', () => {
const customerOptions = [];
const wrapper = mount(<Cascader options={customerOptions} />);
wrapper.find('input').simulate('click');
const popupWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(popupWrapper).toMatchSnapshot();
});
@ -484,12 +383,7 @@ describe('Cascader', () => {
fieldNames={{ label: 'name', value: 'code', children: 'items' }}
/>,
);
const popupWrapper = mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(popupWrapper.render()).toMatchSnapshot();
});
@ -510,18 +404,9 @@ describe('Cascader', () => {
<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />
</ConfigProvider>,
);
wrapper
.find('Cascader')
.find('input')
.simulate('click');
wrapper.find('Cascader').find('input').simulate('click');
expect(
render(
wrapper
.find('Cascader')
.find('Trigger')
.instance()
.getComponent(),
),
render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
).toMatchSnapshot();
});
@ -572,17 +457,8 @@ describe('Cascader', () => {
</ConfigProvider>,
);
wrapper
.find('Cascader')
.find('input')
.simulate('click');
let popupWrapper = mount(
wrapper
.find('Cascader')
.find('Trigger')
.instance()
.getComponent(),
);
wrapper.find('Cascader').find('input').simulate('click');
let popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
popupWrapper
.find('.ant-cascader-menu')
.at(0)
@ -590,21 +466,9 @@ describe('Cascader', () => {
.at(0)
.simulate('click');
expect(
render(
wrapper
.find('Cascader')
.find('Trigger')
.instance()
.getComponent(),
),
render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
).toMatchSnapshot();
popupWrapper = mount(
wrapper
.find('Cascader')
.find('Trigger')
.instance()
.getComponent(),
);
popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
popupWrapper
.find('.ant-cascader-menu')
.at(1)
@ -612,21 +476,9 @@ describe('Cascader', () => {
.at(0)
.simulate('click');
expect(
render(
wrapper
.find('Cascader')
.find('Trigger')
.instance()
.getComponent(),
),
render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
).toMatchSnapshot();
popupWrapper = mount(
wrapper
.find('Cascader')
.find('Trigger')
.instance()
.getComponent(),
);
popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
popupWrapper
.find('.ant-cascader-menu')
.at(2)
@ -635,4 +487,9 @@ describe('Cascader', () => {
.simulate('click');
expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
});
it('defaultValue works correctly when no match options', () => {
const wrapper = mount(<Cascader options={options} defaultValue={['options1', 'options2']} />);
expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('options1 / options2');
});
});

8
components/cascader/index.tsx
View File

@ -283,7 +283,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
(o: CascaderOptionType, level: number) => o[names.value] === unwrappedValue[level],
{ childrenKeyName: names.children },
);
const label = selectedOptions.map(o => o[names.label]);
const label = selectedOptions.length ? selectedOptions.map(o => o[names.label]) : value;
return displayRender(label, selectedOptions);
}
@ -522,8 +522,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
const names: FilledFieldNamesType = getFilledFieldNames(this.props);
if (options && options.length > 0) {
if (state.inputValue) {
const filteredOptions = this.generateFilteredOptions(prefixCls, renderEmpty);
options = isEqual(filteredOptions, this.cachedOptions) ? this.cachedOptions : filteredOptions;
const filteredOptions = this.generateFilteredOptions(prefixCls, renderEmpty);
options = isEqual(filteredOptions, this.cachedOptions)
? this.cachedOptions
: filteredOptions;
}
} else {
options = [