import React from 'react'; import { render, mount } from 'enzyme'; import KeyCode from 'rc-util/lib/KeyCode'; import Cascader from '..'; import ConfigProvider from '../../config-provider'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; const options = [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', label: 'Hangzhou', children: [ { value: 'xihu', label: 'West Lake', }, ], }, ], }, { value: 'jiangsu', label: 'Jiangsu', children: [ { value: 'nanjing', label: 'Nanjing', children: [ { value: 'zhonghuamen', label: 'Zhong Hua Men', }, ], }, ], }, ]; function filter(inputValue, path) { return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); } describe('Cascader', () => { focusTest(Cascader); mountTest(Cascader); rtlTest(Cascader); it('popup correctly when panel is hidden', () => { const wrapper = mount(); expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot(); }); it('popup correctly when panel is open', () => { const onPopupVisibleChange = jest.fn(); const wrapper = mount( , ); wrapper.find('input').simulate('click'); expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot(); expect(onPopupVisibleChange).toHaveBeenCalledWith(true); }); it('support controlled mode', () => { const wrapper = mount(); wrapper.setProps({ value: ['zhejiang', 'hangzhou', 'xihu'], }); expect(wrapper.render()).toMatchSnapshot(); }); it('popup correctly with defaultValue', () => { const wrapper = mount(); wrapper.find('input').simulate('click'); expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot(); }); it('should support popupVisible', () => { const wrapper = mount(); expect(wrapper.find('Trigger').instance().getComponent().props.visible).toBe(false); wrapper.setProps({ popupVisible: true }); expect(wrapper.find('Trigger').instance().getComponent().props.visible).toBe(true); }); it('can be selected', () => { const onChange = jest.fn(); const wrapper = mount(); wrapper.find('input').simulate('click'); 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()); 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()); 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(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything()); }); it('backspace should work with `Cascader[showSearch]`', () => { const wrapper = mount(); wrapper.find('input').simulate('change', { target: { value: '123' } }); expect(wrapper.state('inputValue')).toBe('123'); wrapper.find('input').simulate('keydown', { keyCode: KeyCode.BACKSPACE }); // Simulate onKeyDown will not trigger onChange by default, so the value is still '123' expect(wrapper.state('inputValue')).toBe('123'); }); it('should highlight keyword and filter when search in Cascader', () => { const wrapper = mount(); 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()); expect(popupWrapper).toMatchSnapshot(); }); it('should highlight keyword and filter when search in Cascader with same field name of label and value', () => { const customOptions = [ { name: 'Zhejiang', value: 'Zhejiang', children: [ { name: 'Hangzhou', value: 'Hangzhou', children: [ { name: 'West Lake', value: 'West Lake', }, { name: 'Xia Sha', value: 'Xia Sha', disabled: true, }, ], }, ], }, ]; function customFilter(inputValue, path) { return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); } const wrapper = mount( , ); 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()); expect(popupWrapper.render()).toMatchSnapshot(); }); it('should render not found content', () => { const wrapper = mount(); 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()); expect(popupWrapper).toMatchSnapshot(); }); it('should support to clear selection', () => { const wrapper = mount(); expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('Zhejiang / Hangzhou'); wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click'); expect(wrapper.find('.ant-cascader-picker-label').text()).toBe(''); }); it('should close popup when clear selection', () => { const onPopupVisibleChange = jest.fn(); const wrapper = mount( , ); wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click'); expect(onPopupVisibleChange).toHaveBeenCalledWith(false); }); it('should clear search input when clear selection', () => { const wrapper = mount( , ); 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'); expect(wrapper.state('inputValue')).toBe(''); }); it('should not trigger visible change when click search input', () => { const onPopupVisibleChange = jest.fn(); const wrapper = mount( , ); wrapper.find('input').simulate('focus'); expect(onPopupVisibleChange).toHaveBeenCalledTimes(0); wrapper.find('input').simulate('click'); expect(onPopupVisibleChange).toHaveBeenCalledTimes(1); wrapper.find('input').simulate('click'); expect(onPopupVisibleChange).toHaveBeenCalledTimes(1); wrapper.find('input').simulate('blur'); wrapper.setState({ popupVisible: false }); wrapper.find('input').simulate('click'); expect(onPopupVisibleChange).toHaveBeenCalledTimes(2); }); it('should change filtered item when options are changed', () => { const wrapper = mount(); wrapper.find('input').simulate('click'); wrapper.find('input').simulate('change', { target: { value: 'a' } }); expect(wrapper.find('.ant-cascader-menu-item').length).toBe(2); wrapper.setProps({ options: [options[0]] }); expect(wrapper.find('.ant-cascader-menu-item').length).toBe(1); }); it('should select item immediately when searching and pressing down arrow key', () => { const wrapper = mount(); wrapper.find('input').simulate('click'); wrapper.find('input').simulate('change', { target: { value: 'a' } }); expect(wrapper.find('.ant-cascader-menu-item').length).toBe(2); expect(wrapper.find('.ant-cascader-menu-item-active').length).toBe(0); wrapper.find('input').simulate('keyDown', { keyCode: KeyCode.DOWN, }); expect(wrapper.find('.ant-cascader-menu-item-active').length).toBe(1); }); it('can use fieldNames', () => { const customerOptions = [ { code: 'zhejiang', name: 'Zhejiang', items: [ { code: 'hangzhou', name: 'Hangzhou', items: [ { code: 'xihu', name: 'West Lake', }, ], }, ], }, { code: 'jiangsu', name: 'Jiangsu', items: [ { code: 'nanjing', name: 'Nanjing', items: [ { code: 'zhonghuamen', name: 'Zhong Hua Men', }, ], }, ], }, ]; const wrapper = mount( , ); wrapper.instance().handleChange(['zhejiang', 'hangzhou', 'xihu'], customerOptions); 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(); wrapper.find('input').simulate('click'); const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent()); expect(popupWrapper).toMatchSnapshot(); }); describe('limit filtered item count', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); afterAll(() => { errorSpy.mockRestore(); }); it('limit with positive number', () => { const wrapper = mount(); wrapper.find('input').simulate('click'); wrapper.find('input').simulate('change', { target: { value: 'a' } }); expect(wrapper.find('.ant-cascader-menu-item').length).toBe(1); }); it('not limit', () => { const wrapper = mount(); wrapper.find('input').simulate('click'); wrapper.find('input').simulate('change', { target: { value: 'a' } }); expect(wrapper.find('.ant-cascader-menu-item').length).toBe(2); }); it('negative limit', () => { const wrapper = mount(); wrapper.find('input').simulate('click'); wrapper.find('input').simulate('change', { target: { value: 'a' } }); expect(wrapper.find('.ant-cascader-menu-item').length).toBe(2); expect(errorSpy).toHaveBeenCalledWith( "Warning: [antd: Cascader] 'limit' of showSearch should be positive number or false.", ); }); }); it('should warning if not find `value` in `options`', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); mount(); expect(errorSpy).toHaveBeenCalledWith( 'Warning: [antd: Cascader] Not found `value` in `options`.', ); errorSpy.mockRestore(); }); // https://github.com/ant-design/ant-design/issues/17690 it('should not breaks when children is null', () => { const optionsWithChildrenNull = [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', label: 'Hangzhou', children: null, }, ], }, ]; expect(() => { mount(); }).not.toThrow(); }); // https://github.com/ant-design/ant-design/issues/18176 it('have a notFoundContent that fit trigger input width', () => { const wrapper = mount( , ); const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent()); expect(popupWrapper.render()).toMatchSnapshot(); }); it('placeholder works correctly', () => { const wrapper = mount(); expect(wrapper.find('input').prop('placeholder')).toBe('Please select'); const customPlaceholder = 'Custom placeholder'; wrapper.setProps({ placeholder: customPlaceholder, }); expect(wrapper.find('input').prop('placeholder')).toBe(customPlaceholder); }); it('popup correctly with defaultValue RTL', () => { const wrapper = mount( , ); wrapper.find('Cascader').find('input').simulate('click'); expect( render(wrapper.find('Cascader').find('Trigger').instance().getComponent()), ).toMatchSnapshot(); }); it('can be selected in RTL direction', () => { const options2 = [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', label: 'Hangzhou', children: [ { value: 'xihu', label: 'West Lake', }, ], }, ], }, { value: 'jiangsu', label: 'Jiangsu', children: [ { value: 'nanjing', label: 'Nanjing', children: [ { value: 'zhonghuamen', label: 'Zhong Hua Men', }, ], }, ], }, ]; const onChange = jest.fn(); const wrapper = mount( , ); wrapper.find('Cascader').find('input').simulate('click'); let popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent()); popupWrapper .find('.ant-cascader-menu') .at(0) .find('.ant-cascader-menu-item') .at(0) .simulate('click'); expect( render(wrapper.find('Cascader').find('Trigger').instance().getComponent()), ).toMatchSnapshot(); popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent()); popupWrapper .find('.ant-cascader-menu') .at(1) .find('.ant-cascader-menu-item') .at(0) .simulate('click'); expect( render(wrapper.find('Cascader').find('Trigger').instance().getComponent()), ).toMatchSnapshot(); popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent()); popupWrapper .find('.ant-cascader-menu') .at(2) .find('.ant-cascader-menu-item') .at(0) .simulate('click'); expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything()); }); it('defaultValue works correctly when no match options', () => { const wrapper = mount(); expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('options1 / options2'); }); it('can be selected when showSearch', () => { const onChange = jest.fn(); const wrapper = mount(); wrapper.find('input').simulate('click'); wrapper.find('input').simulate('change', { target: { value: 'Zh' } }); const popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent()); expect(popupWrapper.find('.ant-cascader-menu').length).toBe(1); popupWrapper .find('.ant-cascader-menu') .at(0) .find('.ant-cascader-menu-item') .at(0) .simulate('click'); expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything()); }); });