import { Cascader, Icon } from '../../index'; import { clear } from 'jest-date-mock'; import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants'; const animationMs = 200; const sleep = (ms = animationMs) => new Promise((resolve, reject) => setTimeout(() => { resolve(ms); }, ms) ); const getPopupContainer = () => document.querySelector(`.${BASE_CLASS_PREFIX}-cascader`); const treeData = [ { label: '亚洲', value: 'Yazhou', key: 'yazhou', children: [ { label: '中国', value: 'Zhongguo', key: 'zhongguo', children: [ { label: '北京', value: 'Beijing', key: 'beijing', }, { label: '上海', value: 'Shanghai', key: 'shanghai', }, ], }, ], }, { label: '北美洲', value: 'Beimeizhou', key: 'beimeizhou', children: [ { label: '美国', value: 'Meiguo', key: 'meiguo', }, { label: '加拿大', value: 'Jianada', key: 'jianada', }, ], }, ]; const treeDataWithDisabled = [ { label: '亚洲', value: 'Yazhou', key: 'yazhou', children: [ { label: '中国', value: 'Zhongguo', key: 'zhongguo', disabled: true, children: [ { label: '北京', value: 'Beijing', key: 'beijing', }, { label: '上海', value: 'Shanghai', key: 'shanghai', }, ], }, { label: '韩国', value: 'Hanguo', key: 'hanguo', } ], } ]; let commonProps = { // Cascader use Popup Layer to show candidate option, // but all Popup Layer which extends from Tooltip (eg Popover, Dropdown) have animation and delay. // Turn off animation and delay during testing, to avoid wating (something like setTimeOut/balabala...) in the test code motion: false, mouseEnterDelay: 0, mouseLeaveDelay: 0, }; function render(props) { props = { treeData: treeData, ...commonProps, ...props }; return mount(, { attachTo: document.getElementById('container'), }); } describe('Cascader', () => { beforeEach(() => { // Avoid `attachTo: document.body` Warning // clear(); const div = document.createElement('div'); div.setAttribute('id', 'container'); document.body.appendChild(div); }); afterEach(() => { const div = document.getElementById('container'); if (div) { document.body.removeChild(div); } document.body.innerHTML = ''; }); it('className / style', () => { let props = { className: 'test', style: { height: 420 }, }; let cascader = render(props); expect(cascader.hasClass('test')).toEqual(true); expect(cascader.find('div.test')).toHaveStyle('height', 420); }); it('with placeholder', () => { const props = { placeholder: 'semi' }; const cascader = render(props); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection-placeholder`).instance().textContent).toEqual( 'semi' ); }); it('with validateStatus', () => { const props = {}; const cascader = render(props); expect(cascader.exists(`.${BASE_CLASS_PREFIX}-cascader-error`)).toEqual(false); expect(cascader.exists(`.${BASE_CLASS_PREFIX}-cascader-warning`)).toEqual(false); cascader.setProps({ validateStatus: `error` }); expect(cascader.exists(`.${BASE_CLASS_PREFIX}-cascader-error`)).toEqual(true); cascader.setProps({ validateStatus: `warning` }); expect(cascader.exists(`.${BASE_CLASS_PREFIX}-cascader-warning`)).toEqual(true); }); it('different size', () => { const props = {}; const cascader = render(props); expect(cascader.exists(`.${BASE_CLASS_PREFIX}-cascader-large`)).toEqual(false); expect(cascader.exists(`.${BASE_CLASS_PREFIX}-cascader-small`)).toEqual(false); cascader.setProps({ size: 'large' }); expect(cascader.exists(`.${BASE_CLASS_PREFIX}-cascader-large`)).toEqual(true); cascader.setProps({ size: 'small' }); expect(cascader.exists(`.${BASE_CLASS_PREFIX}-cascader-small`)).toEqual(true); }); it('custom prefix / suffix / insetLabel', () => { let prefix =
prefix content
; let suffix =
suffix content
; let insetLabel = 'semi'; const props = { prefix: prefix, suffix: suffix, }; let cascader = render(props); expect(cascader.contains(prefix)).toEqual(true); expect(cascader.contains(suffix)).toEqual(true); cascader.unmount(); let cascader2 = render({ insetLabel: insetLabel }); expect(cascader2.contains(insetLabel)).toEqual(true); cascader2.unmount(); }); it('empty data / empty content', () => { let cascader = render({ treeData: [], defaultOpen: true, }); // await sleep(); let opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`); expect(opt.length).toEqual(1); expect(opt[0].className.includes(`${BASE_CLASS_PREFIX}-cascader-option-empty`)).toEqual(true); cascader.setProps({ emptyContent: 'test' }); cascader.update(); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0].textContent).toEqual('test'); // done(); }); it('dynamic treeData in multiple and uncontrolled mode', () => { const cascader = render({ defaultValue: 'Yazhou', multiple: true, }); const opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-selection-multiple .${BASE_CLASS_PREFIX}-tag`); expect(opt.length).toEqual(1); cascader.setProps({ treeData: treeDataWithDisabled }); cascader.update(); expect(opt.length).toEqual(1); }); it('dynamic treeData in multiple and controlled mode', () => { const cascader = render({ value: 'Yazhou', multiple: true, }); const opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-selection-multiple .${BASE_CLASS_PREFIX}-tag`); expect(opt.length).toEqual(1); cascader.setProps({ treeData: treeDataWithDisabled }); cascader.update(); expect(opt.length).toEqual(1); }); it('getPopupContainer', () => { let cascader = render({ getPopupContainer: getPopupContainer, defaultOpen: true, }); // await sleep(); let dom = document.querySelector(`.${BASE_CLASS_PREFIX}-cascader`); expect(dom.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-lists`).length).toEqual(1); // done(); }); it('defaultOpen', () => { let cascader = render({ defaultOpen: true, }); // await sleep(); expect(cascader.state().isOpen).toEqual(true); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-lists`).length).toEqual(1); // done(); }); it('custom dropdownClassNam/dropdownStyle/zIndex', () => { let props = { dropdownClassName: 'test', dropdownStyle: { color: 'red', }, defaultOpen: true, zIndex: 2000, }; let cascader = render(props); // await sleep(); const dropdown = document.querySelector(`.${BASE_CLASS_PREFIX}-cascader-popover`); expect(document.querySelector(`.${BASE_CLASS_PREFIX}-portal`).style.zIndex).toEqual('2000'); expect(dropdown.className.includes('test')).toEqual(true); expect(dropdown.style.color).toEqual('red'); // done(); }); it('defaultValue', () => { let cascader = render({ defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'], defaultOpen: true, }); // await sleep(); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '亚洲 / 中国 / 北京' ); let lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); expect(lists.length).toEqual(3); let activeItems = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-active`); expect(activeItems.length).toEqual(2); expect(activeItems[0].textContent).toEqual('亚洲'); expect(activeItems[1].textContent).toEqual('中国'); let selectItem = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-select`); expect(selectItem.length).toEqual(1); expect(selectItem[0].textContent).toEqual('北京'); expect(selectItem[0].querySelectorAll(`.${BASE_CLASS_PREFIX}-icon`).length).toEqual(1); // done(); }); it('displayProp', () => { let cascader = render({ defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'], displayProp: 'value', }); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( 'Yazhou / Zhongguo / Beijing' ); }); it('displayRender', () => { let spyOnRender = sinon.spy(() => {}); let cascader = render({ defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'], displayRender: spyOnRender, }); expect(spyOnRender.calledWithMatch(['亚洲', '中国', '北京'])).toEqual(true); cascader.unmount(); let cusRender = render({ defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'], displayRender: list => '已选择：' + list.join(' -> '), }); expect(cusRender.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '已选择：亚洲 -> 中国 -> 北京' ); }); it('disabled', () => { let cascader = render({ disabled: true, }); expect( document .querySelector(`.${BASE_CLASS_PREFIX}-cascader`) .className.includes(`${BASE_CLASS_PREFIX}-cascader-disabled`) ).toEqual(true); // cannot select let selectBox = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); selectBox.simulate('click'); // await sleep(); expect(cascader.state().isOpen).toEqual(false); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-lists`).length).toEqual(0); // done(); }); it('disabled + defaultValue', () => { const cascaderWithSingle = render({ treeData: treeDataWithDisabled, changeOnSelect: true, defaultValue:['Yazhou', 'Zhongguo'] }); expect( cascaderWithSingle .find(`.${BASE_CLASS_PREFIX}-cascader-selection span`) .at(0) .getDOMNode() .textContent ).toEqual('亚洲 / 中国'); cascaderWithSingle.unmount(); const cascaderWithSingleFilter = render({ treeData: treeDataWithDisabled, changeOnSelect: true, filterTreeNode: true, defaultValue:['Yazhou', 'Zhongguo'] }); expect( cascaderWithSingleFilter .find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper .${BASE_CLASS_PREFIX}-input`) .getDOMNode() .getAttribute('value') ).toEqual('亚洲 / 中国'); cascaderWithSingleFilter.unmount(); const cascaderWithSingleControlled = render({ treeData: treeDataWithDisabled, changeOnSelect: true, value: ['Yazhou', 'Zhongguo'], }); expect(cascaderWithSingleControlled.find(`.${BASE_CLASS_PREFIX}-cascader-selection span`).getDOMNode().textContent).toEqual( '亚洲 / 中国' ); cascaderWithSingleControlled.unmount(); const cascaderWithMultiple = render({ treeData: treeDataWithDisabled, multiple: true, defaultValue:['Yazhou', 'Zhongguo'] }); expect( cascaderWithMultiple .find(`.${BASE_CLASS_PREFIX}-tag .${BASE_CLASS_PREFIX}-tag-content`) .at(0) .getDOMNode() .textContent ).toEqual('中国'); cascaderWithMultiple.unmount(); const cascaderWithMultipleFilter = render({ treeData: treeDataWithDisabled, multiple: true, filterTreeNode: true, defaultValue:['Yazhou', 'Zhongguo'] }); expect( cascaderWithMultipleFilter .find(`.${BASE_CLASS_PREFIX}-tag .${BASE_CLASS_PREFIX}-tag-content`) .at(0) .getDOMNode() .textContent ).toEqual('中国'); cascaderWithMultipleFilter.unmount(); const cascaderWithMultipleControlled = render({ treeData: treeDataWithDisabled, multiple: true, value:['Yazhou', 'Zhongguo'] }); expect( cascaderWithMultipleControlled .find(`.${BASE_CLASS_PREFIX}-tag .${BASE_CLASS_PREFIX}-tag-content`) .at(0) .getDOMNode() .textContent ).toEqual('中国'); cascaderWithMultipleControlled.unmount(); }); it('select item / onSelect / onChange', () => { let spyOnSelect = sinon.spy(() => {}); let spyOnChange = sinon.spy(() => {}); let cascader = render({ defaultOpen: true, onSelect: spyOnSelect, onChange: spyOnChange, }); // let selectBox = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); // selectBox.simulate('click'); // await sleep(); let lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); expect(lists.length).toEqual(1); lists[0].querySelectorAll('li')[0].click(); lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); expect(lists.length).toEqual(2); expect(spyOnSelect.notCalled).toBe(true); expect(spyOnChange.notCalled).toBe(true); expect( lists[0] .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0] .className.includes(`${BASE_CLASS_PREFIX}-cascader-option-active`) ).toEqual(true); lists[1].querySelectorAll('li')[0].click(); lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); expect(lists.length).toEqual(3); expect(spyOnSelect.notCalled).toBe(true); expect(spyOnChange.notCalled).toBe(true); expect( lists[1] .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0] .className.includes(`${BASE_CLASS_PREFIX}-cascader-option-active`) ).toEqual(true); lists[2].querySelectorAll('li')[0].click(); expect(spyOnSelect.calledOnce).toBe(true); expect(spyOnChange.calledOnce).toBe(true); expect(spyOnSelect.calledWithMatch('Beijing')).toEqual(true); expect(spyOnChange.calledWithMatch(['Yazhou', 'Zhongguo', 'Beijing'])).toEqual(true); expect( lists[2] .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0] .querySelectorAll(`.${BASE_CLASS_PREFIX}-icon-tick`).length ).toEqual(1); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '亚洲 / 中国 / 北京' ); // done(); }); it('filterTreeNode = true shows input box', () => { let cascader = render({ filterTreeNode: true, searchPlaceholder: 'placeholder', }); let searchWrapper = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper`); expect(searchWrapper.exists()).toEqual(true); expect( searchWrapper .find('input') .instance() .getAttribute('placeholder') ).toEqual('placeholder'); }); it('onSearch', () => { let onSearch = value => {}; let spyOnSearch = sinon.spy(onSearch); let cascader = render({ filterTreeNode: true, onSearch: spyOnSearch, }); const searchWrapper = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper`); let searchValue = '${BASE_CLASS_PREFIX}'; let event = { target: { value: searchValue } }; searchWrapper.find('input').simulate('change', event); expect(spyOnSearch.calledOnce).toBe(true); expect(spyOnSearch.calledWithMatch(searchValue)).toBe(true); }); it('onSelect + changeOnSelect', async () => { let spyOnSelect = sinon.spy(() => {}); let spyOnChange = sinon.spy(() => {}); let cascader = render({ defaultOpen: true, onSelect: spyOnSelect, onChange: spyOnChange, changeOnSelect: true, }); // await sleep(); let lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); lists[0].querySelectorAll('li')[0].click(); expect(spyOnSelect.calledOnce).toBe(true); expect(spyOnChange.calledOnce).toBe(true); expect(spyOnSelect.calledWithMatch('Yazhou')).toEqual(true); expect(spyOnChange.calledWithMatch(['Yazhou'])).toEqual(true); expect( lists[0] .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0] .className.includes(`${BASE_CLASS_PREFIX}-cascader-option-select`) ).toEqual(true); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual('亚洲'); lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); lists[1].querySelectorAll('li')[0].click(); expect(spyOnSelect.calledWithMatch('Zhongguo')).toEqual(true); expect(spyOnChange.calledWithMatch(['Yazhou', 'Zhongguo'])).toEqual(true); expect( lists[0] .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0] .className.includes(`${BASE_CLASS_PREFIX}-cascader-option-active`) ).toEqual(true); expect( lists[1] .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0] .className.includes(`${BASE_CLASS_PREFIX}-cascader-option-select`) ).toEqual(true); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '亚洲 / 中国' ); }); // display none not working properly it('filterTreeNode shows correct result', () => { let cascader = render({ filterTreeNode: true, defaultOpen: true, }); // let selectBox = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); // selectBox.simulate('click'); // await sleep(); const searchWrapper = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper`); let searchValue = '北'; let event = { target: { value: searchValue } }; searchWrapper.find('input').simulate('change', event); // await sleep(); let resList = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-label-highlight`); expect(resList.length).toEqual(3); // debugger // expect(resList[0].textContent).toEqual('亚洲/中国/北京'); // done(); }); // display none not working properly it('filterTreeNode + treeNodeFilterProp', () => { let cascader = render({ filterTreeNode: true, treeNodeFilterProp: 'value', defaultOpen: true, }); // let selectBox = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); // selectBox.simulate('click'); // await sleep(); const searchWrapper = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper`); let searchValue = 'Bei'; let event = { target: { value: searchValue } }; searchWrapper.find('input').simulate('change', event); // await sleep(); let resList = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-label-highlight`); expect(resList.length).toEqual(3); // debugger // expect(resList[0].textContent).toEqual('亚洲/中国/北京'); // done(); }); it('filterTreeNode + no result', () => { let cascader = render({ filterTreeNode: true, defaultOpen: true, emptyContent: 'test', }); // await sleep(); const searchWrapper = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper`); let searchValue = 'Bei'; let event = { target: { value: searchValue } }; searchWrapper.find('input').simulate('change', event); // await sleep(); let opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`); expect(opt.length).toEqual(1); expect(opt[0].className.includes(`${BASE_CLASS_PREFIX}-cascader-option-empty`)).toEqual(true); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0].textContent).toEqual('test'); // done(); }); it('filterTreeNode as a func', () => { let cascader = render({ filterTreeNode: (inputValue, cascaderNode) => cascaderNode === inputValue, defaultOpen: true, }); const searchWrapper = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper`); searchWrapper.find('input').simulate('change', { target: { value: '北' } }); // await sleep(); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-option-label-highlight`).length).toEqual(0); // done(); }); it('controlled: value shows correct', () => { let cascader = render({ value: ['Yazhou', 'Zhongguo', 'Beijing'], }); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '亚洲 / 中国 / 北京' ); }); it('controlled: fire onChange and ui not update', () => { let spyOnChange = sinon.spy(() => {}); let cascader = render({ value: ['Yazhou', 'Zhongguo', 'Beijing'], defaultOpen: true, onChange: spyOnChange, changeOnSelect: true, }); // await sleep(); let lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); lists[0].querySelectorAll('li')[0].click(); expect(spyOnChange.calledOnce).toBe(true); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '亚洲 / 中国 / 北京' ); // done(); }); it('async load data', () => { const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } }; const then = jest.fn(() => Promise.resolve()); const loadData = jest.fn(() => ({ then })); const data = { label: '亚洲', value: 'Asia', }; let cascader = render({ loadData, defaultOpen: true, treeData: [data], }); let topNodeAsia = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-option`).at(0); topNodeAsia.simulate('click', nativeEvent); expect(loadData).toHaveBeenCalledWith([data]); expect(then).toHaveBeenCalled(); }); it('select item + onChange + onChangeWithObject', () => { let spyOnChange = sinon.spy(() => {}); let cascader = render({ defaultOpen: true, onChange: spyOnChange, onChangeWithObject: true, }); // let selectBox = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); // selectBox.simulate('click'); // await sleep(); let lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); lists[0].querySelectorAll('li')[0].click(); lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); lists[1].querySelectorAll('li')[0].click(); lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); lists[2].querySelectorAll('li')[0].click(); expect(spyOnChange.calledOnce).toBe(true); expect( spyOnChange.calledWithMatch([ { label: '亚洲', value: 'Yazhou', key: 'yazhou', children: [ { label: '中国', value: 'Zhongguo', key: 'zhongguo', children: [ { label: '北京', value: 'Beijing', key: 'beijing', }, { label: '上海', value: 'Shanghai', key: 'shanghai', }, ], }, ], }, { label: '中国', value: 'Zhongguo', key: 'zhongguo', children: [ { label: '北京', value: 'Beijing', key: 'beijing', }, { label: '上海', value: 'Shanghai', key: 'shanghai', }, ], }, { label: '北京', value: 'Beijing', key: 'beijing', }, ]) ).toEqual(true); expect( lists[2] .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0] .querySelectorAll(`.${BASE_CLASS_PREFIX}-icon-tick`).length ).toEqual(1); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '亚洲 / 中国 / 北京' ); // done(); }); it('select item + onChange + onChangeWithObject + changeOnSelect', () => { let spyOnChange = sinon.spy(() => {}); let cascader = render({ defaultOpen: true, onChange: spyOnChange, onChangeWithObject: true, changeOnSelect: true, }); let lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`); lists[0].querySelectorAll('li')[0].click(); expect(spyOnChange.calledOnce).toBe(true); expect( spyOnChange.calledWithMatch([ { label: '亚洲', value: 'Yazhou', key: 'yazhou', children: [ { label: '中国', value: 'Zhongguo', key: 'zhongguo', children: [ { label: '北京', value: 'Beijing', key: 'beijing', }, { label: '上海', value: 'Shanghai', key: 'shanghai', }, ], }, ], }, ]) ).toEqual(true); expect( lists[0] .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0] .className.includes(`${BASE_CLASS_PREFIX}-cascader-option-select`) ).toEqual(true); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual('亚洲'); }); it('controlled: value shows correct', () => { let cascader = render({ value: [ { label: '亚洲', value: 'Yazhou', key: 'yazhou', children: [ { label: '中国', value: 'Zhongguo', key: 'zhongguo', children: [ { label: '北京', value: 'Beijing', key: 'beijing', }, { label: '上海', value: 'Shanghai', key: 'shanghai', }, ], }, ], }, { label: '中国', value: 'Zhongguo', key: 'zhongguo', children: [ { label: '北京', value: 'Beijing', key: 'beijing', }, { label: '上海', value: 'Shanghai', key: 'shanghai', }, ], }, { label: '北京', value: 'Beijing', key: 'beijing', }, ], onChangeWithObject: true, }); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '亚洲 / 中国 / 北京' ); }); it('onClear and showClear', () => { const spyOnClear = sinon.spy(() => { }); const cascader = render({ defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'], showClear: true, onClear: spyOnClear, placeholder: "请选择所在地区" }); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '亚洲 / 中国 / 北京' ); cascader.simulate('mouseEnter', {}).find(`.${BASE_CLASS_PREFIX}-cascader-clearbtn`).simulate('click'); expect(spyOnClear.calledOnce).toBe(true); expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual( '请选择所在地区' ); cascader.unmount(); }); it('filterLeafOnly = false', () => { let cascader = render({ filterTreeNode: true, defaultOpen: true, filterLeafOnly: false }); // let selectBox = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); // selectBox.simulate('click'); // await sleep(); const searchWrapper = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper`); let searchValue = '亚'; let event = { target: { value: searchValue } }; searchWrapper.find('input').simulate('change', event); // await sleep(); let resList = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-label-highlight`); expect(resList.length).toEqual(4); // debugger // expect(resList[0].textContent).toEqual('亚洲/中国/北京'); // done(); }); it('showNext',()=>{ // expand next menu by hover // 通过 hover 展开 Dropdown 的子菜单 const cascaderWithHover = render({ showNext: 'hover', }); const selectBox = cascaderWithHover.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); selectBox.simulate('click'); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`).length).toEqual(1); cascaderWithHover .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(0) .simulate('mouseEnter'); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`).length).toEqual(2); cascaderWithHover.unmount(); // expand next menu by click // 通过 click 展开 Dropdown 的子菜单 const cascaderWithClick = render({ showNext: 'click', }); const selectBox2 = cascaderWithClick.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); selectBox2.simulate('click'); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`).length).toEqual(1); cascaderWithClick .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(0) .simulate('mouseEnter'); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`).length).toEqual(1); cascaderWithClick .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(0) .simulate('click'); expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`).length).toEqual(2); cascaderWithClick.unmount(); }) it('disableStrictly', ()=>{ // disable strictly const cascaderWithDisableStrictly = render({ showNext: 'hover', treeData:treeDataWithDisabled, disableStrictly: true, multiple: true, }); expect(cascaderWithDisableStrictly.state().checkedKeys.size).toEqual(0); expect(cascaderWithDisableStrictly.state().disabledKeys.size).toEqual(3); // open dropdown const selectBoxWithDisableStrictly = cascaderWithDisableStrictly.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); selectBoxWithDisableStrictly.simulate('click'); // click checkbox cascaderWithDisableStrictly .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option-label`) .at(0) .find(`.${BASE_CLASS_PREFIX}-checkbox`) .at(0) .simulate('click'); // check checkedKeys expect(cascaderWithDisableStrictly.state().checkedKeys.size).toEqual(1); cascaderWithDisableStrictly.unmount(); // default disable const cascaderWithDisable = render({ showNext: 'hover', treeData:treeDataWithDisabled, multiple: true, }); expect(cascaderWithDisable.state().checkedKeys.size).toEqual(0); expect(cascaderWithDisable.state().disabledKeys.size).toEqual(0); // open dropdown const selectBoxWithDisable = cascaderWithDisable.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); selectBoxWithDisable.simulate('click'); // click checkbox cascaderWithDisable .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option-label`) .at(0) .find(`.${BASE_CLASS_PREFIX}-checkbox`) .at(0) .simulate('click'); // check checkedKeys expect(cascaderWithDisable.state().checkedKeys.size).toEqual(5); cascaderWithDisable.unmount(); }); it('multiple + onChangeWithObject', () => { const cascader = render({ multiple: true, onChangeWithObject: true, defaultValue: [ { label: '北美洲', value: 'Beimeizhou', key: 'beimeizhou', children: [ { label: '美国', value: 'Meiguo', key: 'meiguo', }, { label: '加拿大', value: 'Jianada', key: 'jianada', }, ], }, { label: '美国', value: 'Meiguo', key: 'meiguo', } ] }); const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`) expect(tags.length).toEqual(1); expect( tags .find(`.${BASE_CLASS_PREFIX}-tag-content`) .getDOMNode() .textContent ).toEqual('美国'); }); it('multiple select enableLeafClick', () => { const cascaderWithMultiple = render({ multiple: true, enableLeafClick: true, treeData: [ { label: '北美洲', value: 'Beimeizhou', key: 'beimeizhou', children: [ { label: '美国', value: 'Meiguo', key: 'meiguo', }, { label: '加拿大', value: 'Jianada', key: 'jianada', }, ], }, { label: '南美洲', value: 'Nanmeiguo', key: 'Nanmeiguo', } ] }) const selectBox = cascaderWithMultiple.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); selectBox.simulate('click'); // click checkbox cascaderWithMultiple .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(1) .find(`.${BASE_CLASS_PREFIX}-cascader-option-label`) .at(0) .find(`.${BASE_CLASS_PREFIX}-checkbox`) .at(0) .simulate('click'); expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1); // click option cancel checked cascaderWithMultiple .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(1) .simulate('click') expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(0); // click option select cascaderWithMultiple .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(0) .simulate('click') cascaderWithMultiple .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(1) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(0) .simulate('click') expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1); const states = cascaderWithMultiple.state() cascaderWithMultiple.unmount(); }) it('multiple select disable enableLeafClick', () => { const cascaderWithMultiple = render({ multiple: true, treeData: [ { label: '北美洲', value: 'Beimeizhou', key: 'beimeizhou', children: [ { label: '美国', value: 'Meiguo', key: 'meiguo', }, { label: '加拿大', value: 'Jianada', key: 'jianada', }, ], }, { label: '南美洲', value: 'Nanmeiguo', key: 'Nanmeiguo', } ] }) const selectBox = cascaderWithMultiple.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0); selectBox.simulate('click'); // click checkbox cascaderWithMultiple .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(1) .find(`.${BASE_CLASS_PREFIX}-cascader-option-label`) .at(0) .find(`.${BASE_CLASS_PREFIX}-checkbox`) .at(0) .simulate('click'); expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1); // click option can't cancel checked cascaderWithMultiple .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`) .at(0) .find(`.${BASE_CLASS_PREFIX}-cascader-option`) .at(1) .simulate('click') expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1); cascaderWithMultiple.unmount(); }) it('separator', () => { const cascader = render({ filterTreeNode: true, defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'], separator: ' > ', defaultOpen: true, }); const input = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection input`); expect(input.props().placeholder).toEqual('亚洲 > 中国 > 北京'); const event = { target: { value: '中国' } }; input.simulate('change', event); expect( cascader .find(`.${BASE_CLASS_PREFIX}-cascader-option-list li`) .at(0) .getDOMNode() .textContent ).toEqual('亚洲 > 中国 > 北京'); cascader.unmount(); }); it('triggerRender', () => { const spyTriggerRender = sinon.spy(() => 123); const cascaderAutoMerge = render({ multiple: true, triggerRender: spyTriggerRender, defaultValue: 'Yazhou' }); cascaderAutoMerge.simulate('click'); const firstCall = spyTriggerRender.getCall(0); const args = firstCall.args[0]; /* check arguments of triggerRender */ expect(args.value.size).toEqual(1); expect(args.value).toEqual(new Set('0')); cascaderAutoMerge.unmount(); const spyTriggerRender2 = sinon.spy(() => 123); const cascaderNoAutoMerge = render({ multiple: true, triggerRender: spyTriggerRender2, defaultValue: 'Yazhou', autoMergeValue: false, }); cascaderNoAutoMerge.simulate('click'); const firstCall2 = spyTriggerRender2.getCall(0); const args2 = firstCall2.args[0]; /* check arguments of triggerRender */ expect(args2.value.size).toEqual(4); expect(args2.value).toEqual(new Set(['0','0-0','0-0-1','0-0-0'])); cascaderNoAutoMerge.unmount(); }); it('autoMergeValue', () => { const cascader = render({ multiple: true, autoMergeValue: false, defaultValue: 'Yazhou', }); const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`) expect(tags.length).toEqual(4); cascader.unmount(); const cascaderAutoMerge = render({ multiple: true, autoMergeValue: true, defaultValue: 'Yazhou', }); const tags2 = cascaderAutoMerge.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`) expect(tags2.length).toEqual(1); expect( tags2 .find(`.${BASE_CLASS_PREFIX}-tag-content`) .getDOMNode() .textContent ).toEqual('亚洲'); cascaderAutoMerge.unmount(); }); it('leafOnly', () => { /* autoMergeValue and leafOnly are both false */ const cascader = render({ multiple: true, autoMergeValue: false, leafOnly: false, defaultValue: 'Yazhou', }); const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`) expect(tags.length).toEqual(4); cascader.unmount(); /* autoMergeValue and leafOnly are both true */ const cascader2 = render({ multiple: true, autoMergeValue: true, leafOnly: true, defaultValue: 'Yazhou', }); const tags2 = cascader2.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`) expect(tags2.length).toEqual(2); cascader2.unmount(); /* autoMergeValue is false, leafOnly is true */ const cascader3 = render({ multiple: true, autoMergeValue: false, leafOnly: true, defaultValue: 'Yazhou', }); const tags3 = cascader3.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`) expect(tags3.length).toEqual(2); cascader3.unmount(); /* autoMergeValue is true, leafOnly is false */ const cascader4 = render({ multiple: true, autoMergeValue: true, leafOnly: false, defaultValue: 'Yazhou', }); const tags4 = cascader4.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`) expect(tags4.length).toEqual(1); expect( tags4 .find(`.${BASE_CLASS_PREFIX}-tag-content`) .getDOMNode() .textContent ).toEqual('亚洲'); cascader4.unmount(); }); });