import { Select } from '../../index';
import { noop } from 'lodash';
const Option = Select.Option;
const OptGroup = Select.OptGroup;
import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
import keyCode from '../../../semi-foundation/utils/keyCode';
const defaultList = [
{ value: 'abc', label: 'Abc' },
{ value: 'hotsoon', label: 'Hotsoon' },
{ value: 'pipixia', label: 'Pipixia' },
{ value: 'toutiao', label: 'TopBuzz' },
];
function getOption(list = defaultList) {
return list.map(optionOpts => );
}
let commonProps = {
// Select 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 waiting (something like setTimeOut/balabala...) in the test code
motion: false,
mouseEnterDelay: 0,
mouseLeaveDelay: 0,
};
function getSelect(props) {
if (!props.optionList && !props.children) {
props.children = getOption();
}
return mount(, { attachTo: document.getElementById('container') });
}
let stringData = ['semi', 'ies', 'design', 'platform'];
let objectData = [
{ email: 'semi@abc.com', value: 'abc' },
{ email: 'semi@bytedance.com', value: 'bytedance' },
{ email: 'semi@vigo.com', value: 'vigo' },
];
describe('Select', () => {
beforeEach(() => {
// Avoid `attachTo: document.body` Warning
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('custom className & style', () => {
let props = {
className: 'test',
style: {
color: 'red',
},
};
const wrapper = getSelect(props);
expect(wrapper.hasClass('test')).toEqual(true);
expect(wrapper.find('div.test')).toHaveStyle('color', 'red');
});
it('with placeholder', () => {
const props = { placeholder: 'semi' };
const select = getSelect(props);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-selection-placeholder`).instance().textContent).toEqual('semi');
});
it('with validateStatus', () => {
const props = {};
const select = getSelect(props);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-error`)).toEqual(false);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-warning`)).toEqual(false);
select.setProps({ validateStatus: 'error' });
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-error`)).toEqual(true);
select.setProps({ validateStatus: 'warning' });
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-warning`)).toEqual(true);
});
it('different size', () => {
const props = {};
const select = getSelect(props);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-large`)).toEqual(false);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-small`)).toEqual(false);
select.setProps({ size: 'large' });
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-large`)).toEqual(true);
select.setProps({ size: 'small' });
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-small`)).toEqual(true);
});
it('custom dropdownClassName & dropdownStyle', () => {
let props = {
dropdownClassName: 'ddc',
dropdownStyle: {
color: 'red',
},
defaultOpen: true,
};
let select = getSelect(props);
expect(select.exists('.ddc')).toEqual(true);
expect(select.find('.ddc')).toHaveStyle('color', 'red');
});
it('different position', () => {
let props = {
position: 'top',
defaultOpen: true,
};
let select = getSelect(props);
expect(
select
.find(`.${BASE_CLASS_PREFIX}-popover-wrapper`)
.instance()
.getAttribute('x-placement')
).toEqual('top');
});
it('defaultValue (not candidate in optionList)', () => {
// single select
let props = {
defaultValue: 'semi',
};
let select = getSelect(props);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-selection-text`).getDOMNode().textContent).toEqual('semi');
select.unmount();
// multiple select
let mProps = {
multiple: true,
defaultValue: ['semi', 'ies'],
};
let mSelect = getSelect(mProps);
let tags = mSelect.find(`.${BASE_CLASS_PREFIX}-select-selection .semi-tag-content`);
expect(tags.length).toEqual(2);
expect(tags.at(0).getDOMNode().textContent).toEqual('semi');
expect(tags.at(1).getDOMNode().textContent).toEqual('ies');
mSelect.unmount();
});
it('defaultValue (can match in optionList)', () => {
// single select
let props = {
defaultValue: 'abc',
};
let select = getSelect(props);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-selection-text`).getDOMNode().textContent).toEqual('Abc');
select.unmount();
// multiple select
let mProps = {
defaultValue: ['abc', 'hotsoon'],
multiple: true,
};
const mSelect = getSelect(mProps);
let tags = mSelect.find(`.${BASE_CLASS_PREFIX}-select-selection .${BASE_CLASS_PREFIX}-tag-content`);
expect(tags.length).toEqual(2);
expect(tags.at(0).getDOMNode().textContent).toEqual('Abc');
expect(tags.at(1).getDOMNode().textContent).toEqual('Hotsoon');
mSelect.unmount();
});
it('showClear', () => {
const props = { defaultValue: '${BASE_CLASS_PREFIX}', showClear: true };
const select = getSelect(props);
expect(select.exists(`.${BASE_CLASS_PREFIX}-icon-clear`)).toEqual(false);
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('mouseEnter', {});
expect(select.exists(`.${BASE_CLASS_PREFIX}-icon-clear`)).toEqual(true);
select.unmount();
const emptyProps = { showClear: true };
const emptySelect = getSelect(emptyProps);
emptySelect.find(`.${BASE_CLASS_PREFIX}-select`).simulate('mouseEnter', {});
expect(select.exists(`.${BASE_CLASS_PREFIX}-icon-clear`)).toEqual(false);
emptySelect.unmount();
const notShowProps = { showClear: false, defaultValue: 'semi' };
const noSelect = getSelect(notShowProps);
noSelect.find(`.${BASE_CLASS_PREFIX}-select`).simulate('mouseEnter', {});
expect(select.exists(`.${BASE_CLASS_PREFIX}-icon-clear`)).toEqual(false);
noSelect.unmount();
});
it('showArrow = false', () => {
const props = { defaultValue: 'semi', showArrow: false };
const select = getSelect(props);
expect(select.exists(`.${BASE_CLASS_PREFIX}-icon-chevron_down`)).toEqual(false);
});
it('custom prefix / suffix / insetLabel', () => {
let prefix =
prefix content
;
let suffix = suffix content
;
let insetLabel = 'semi';
const props = {
prefix: prefix,
suffix: suffix,
};
let select = getSelect(props);
expect(select.contains(prefix)).toEqual(true);
expect(select.contains(suffix)).toEqual(true);
select.unmount();
let ilSelect = getSelect({ insetLabel: insetLabel });
expect(ilSelect.contains(insetLabel)).toEqual(true);
ilSelect.unmount();
});
it('defaultOpen', () => {
let props = {
defaultOpen: true,
};
let select = getSelect(props);
expect(select.state().isOpen).toEqual(true);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
expect(options.length).toEqual(4);
expect(options.at(0).getDOMNode().textContent).toEqual('Abc');
expect(options.at(1).getDOMNode().textContent).toEqual('Hotsoon');
});
it('dropdownMatchSelectWidth = true', () => {
// dropdownMatchSelectWidth default is true
let props = {
defaultOpen: true,
style: { width: 90 },
defaultValue: 'abc',
};
let defaultSelect = getSelect(props);
// cause jsdom doesn't support layout engine like browser, so you can't access offsetWidth/scrollWidth or use getBoundingRect(), it will always return 0;
// just use getComputedStyle to avoid this problem.
let selector = defaultSelect.find(`.${BASE_CLASS_PREFIX}-select`).getDOMNode();
let selectorWidth = window.getComputedStyle(selector).width; // expect 90px
let list = defaultSelect.find(`.${BASE_CLASS_PREFIX}-select-option-list`).getDOMNode().parentNode;
let listWidth = window.getComputedStyle(list).minWidth;
expect(selectorWidth).toEqual(listWidth);
defaultSelect.unmount();
});
it('dropdownMatchSelectWidth, width is string', () => {
let stringProps = {
defaultOpen: true,
style: { width: '90px' },
defaultValue: 'abc',
};
let stringSelect = getSelect(stringProps);
let strSelector = stringSelect.find(`.${BASE_CLASS_PREFIX}-select`).getDOMNode();
let strSelectorWidth = window.getComputedStyle(strSelector).width; // expect 90px
let strList = stringSelect.find(`.${BASE_CLASS_PREFIX}-select-option-list`).getDOMNode().parentNode;
let strListWidth = window.getComputedStyle(strList).minWidth;
expect(strSelectorWidth).toEqual(strListWidth);
stringSelect.unmount();
});
it('dropdownMatchSelectWidth = false', () => {
let notMatchProps = {
defaultOpen: true,
style: { width: 90 },
defaultValue: 'abc',
dropdownMatchSelectWidth: false,
};
let nmSelect = getSelect(notMatchProps);
let selector = nmSelect.find(`.${BASE_CLASS_PREFIX}-select`).getDOMNode();
let selectorWidth = window.getComputedStyle(selector).width;
let list = nmSelect.find(`.${BASE_CLASS_PREFIX}-select-option-list`).getDOMNode().parentNode;
let listWidth = window.getComputedStyle(list).minWidth;
expect(selectorWidth).not.toEqual(listWidth);
nmSelect.unmount();
});
it('pass options via props.optionList', () => {
// expect number and content correct
const props = {
defaultOpen: true,
optionList: defaultList,
};
const select = getSelect(props);
let candidate = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
expect(candidate.length).toEqual(4);
expect(candidate.at(0).getDOMNode().textContent).toEqual('Abc');
expect(candidate.at(1).getDOMNode().textContent).toEqual('Hotsoon');
select.unmount();
});
it('pass options via props.children', () => {
let list = defaultList.slice();
list.push({ value: 'semi', label: 'SemiDesign' });
const props = {
defaultOpen: true,
children: getOption(list),
};
const select = getSelect(props);
let candidate = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
expect(candidate.length).toEqual(5);
expect(candidate.at(0).getDOMNode().textContent).toEqual('Abc');
expect(candidate.at(4).getDOMNode().textContent).toEqual('SemiDesign');
select.unmount();
});
it('can choose more than one option when multiple is true', () => {
const props = {
multiple: true,
defaultValue: ['abc', 'hotsoon'],
defaultOpen: true,
};
const select = getSelect(props);
let selection = select.find(`.${BASE_CLASS_PREFIX}-select-content-wrapper`).children();
expect(selection.length).toEqual(2);
let targetOption = select
.find(`.${BASE_CLASS_PREFIX}-select-option-list`)
.children()
.at(3);
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
targetOption.simulate('click', nativeEvent);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-content-wrapper`).children().length).toEqual(3);
select.unmount();
});
it('multiple with maxTagCount', () => {
const props = {
multiple: true,
defaultValue: ['abc', 'hotsoon'],
maxTagCount: 2,
defaultOpen: true,
};
const select = getSelect(props);
let targetOption = select
.find(`.${BASE_CLASS_PREFIX}-select-option-list`)
.children()
.at(3);
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
targetOption.simulate('click', nativeEvent);
let selection = select.find(`.${BASE_CLASS_PREFIX}-tag-group`);
expect(selection.children().length).toEqual(3);
expect(
selection
.children()
.at(2)
.getDOMNode().textContent
).toEqual('+1');
select.unmount();
});
it('multiple with max, should call onExceed when selected over max', () => {
let onExceed = () => {};
let spyonExceed = sinon.spy(onExceed);
const props = {
multiple: true,
defaultValue: ['abc', 'hotsoon'],
max: 2,
onExceed: spyonExceed,
defaultOpen: true,
};
const select = getSelect(props);
let targetOption = select
.find(`.${BASE_CLASS_PREFIX}-select-option-list`)
.children()
.at(3);
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
targetOption.simulate('click', nativeEvent);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-content-wrapper`).children().length).toEqual(2);
expect(spyonExceed.calledOnce).toBe(true);
select.unmount();
});
it('innerTopSlot', () => {
let innerTopSlot = inner
;
let props = {
innerTopSlot: innerTopSlot,
defaultOpen: true,
};
const select = getSelect(props);
expect(select.contains(innerTopSlot)).toEqual(true);
});
it('outerTopSlot', () => {
let outerTopSlot = outer
;
let props = {
outerTopSlot: outerTopSlot,
defaultOpen: true,
};
const select = getSelect(props);
expect(select.contains(outerTopSlot)).toEqual(true);
});
// TODO
it('innerBottomSlot', () => {
let innerBottomSlot = inner
;
let props = {
innerBottomSlot: innerBottomSlot,
defaultOpen: true,
};
const select = getSelect(props);
expect(select.contains(innerBottomSlot)).toEqual(true);
});
it('outerBottomSlot', () => {
let outerBottomSlot = outer
;
let props = {
outerBottomSlot: outerBottomSlot,
defaultOpen: true,
};
const select = getSelect(props);
expect(select.contains(outerBottomSlot)).toEqual(true);
});
it('option className & style & disabled & showTick', () => {
let options = [
{ className: 'optCls', style: { color: 'red' }, label: 'Abc', value: 'abc' },
{ label: 'Vigo', value: 'vigo', disabled: true, className: 'disabled-opt' },
{ label: 'NoTick', value: 'noTick', showTick: false },
];
options = options.map(item => {
return ;
});
let props = {
children: options,
defaultOpen: true,
};
const select = getSelect(props);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-option.optCls`)).toHaveStyle('color', 'red');
let optionList = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`);
expect(optionList.exists(`.${BASE_CLASS_PREFIX}-select-option.disabled-opt`)).toEqual(true);
expect(
optionList
.children()
.at(2)
.getDOMNode().textContent
).toEqual('NoTick');
});
it('loading', () => {
let props = {
defaultOpen: true,
loading: true,
};
const select = getSelect(props);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-loading-wrapper`)).toEqual(true);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children.length).toEqual(1);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-option`)).toEqual(false);
});
it('spacing', () => {
// Can't test spacing directly, just test whether it is passed to Popover correctly
let props = {
spacing: 20,
defaultOpen: true,
};
const select = getSelect(props);
const tooltip = select.children().children();
expect(tooltip.props().spacing).toEqual(20);
});
it('should open optionList when click selector', () => {
const props = {};
const select = getSelect(props);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-option-list`)).toEqual(false);
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-option-list`)).toEqual(true);
});
it('disabled component when disabled is true', () => {
const props = { disabled: true };
const select = getSelect(props);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-disabled`)).toEqual(true);
// Does not respond click events when disabled is true
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-option-list`)).toEqual(false);
});
it('onDropdownVisibleChange & clickToHide', () => {
let onDropdownVisible = () => {};
let spyOnDV = sinon.spy(onDropdownVisible);
const props = {
onDropdownVisibleChange: spyOnDV,
clickToHide: true,
};
const select = getSelect(props);
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-option-list`)).toEqual(true);
expect(spyOnDV.calledOnce).toEqual(true);
expect(spyOnDV.calledWithMatch(true)).toEqual(true);
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-option-list`)).toEqual(false);
expect(spyOnDV.calledWithMatch(false)).toEqual(true);
});
it('filter = true', () => {
let props = {
filter: true,
};
const select = getSelect(props);
// click to show input
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
let inputValue = 'abc';
let event = { target: { value: inputValue } };
select.find('input').simulate('change', event);
let optionList = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
expect(optionList.length).toEqual(1);
expect(optionList.at(0).text()).toEqual('Abc');
});
it('filter = true,label includes regex special character and key it at first', () => {
let props = {
filter: true,
optionList: [{label: 'label++',value: ''}]
};
const select = getSelect(props);
// click to show input
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
let inputValue = '+';
let event = { target: { value: inputValue } };
select.find('input').simulate('change', event);
let optionList = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
expect(optionList.length).toEqual(1);
expect(optionList.at(0).text()).toEqual('label++');
});
it('filter = custom function', () => {
let customFilter = (sugInput, option) => {
return option.label == 'Hotsoon';
};
let props = {
filter: customFilter,
};
const select = getSelect(props);
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
let inputValue = 'tik';
let event = { target: { value: inputValue } };
select.find('input').simulate('change', event);
let optionList = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
expect(optionList.length).toEqual(1);
expect(optionList.at(0).text()).toEqual('Hotsoon');
});
it('onSearch', () => {
// trigger onSearch when input change
let onSearch = value => {};
let spyOnSearch = sinon.spy(onSearch);
let props = {
onSearch: spyOnSearch,
filter: true,
};
let select = getSelect(props);
// click to show input
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
let inputValue = 'semi';
let event = { target: { value: inputValue } };
select.find('input').simulate('change', event);
expect(spyOnSearch.calledOnce).toBe(true);
expect(spyOnSearch.calledWithMatch(inputValue)).toBe(true);
select.unmount();
// when click clear button, should trigger onSearch
// TODO
});
it('emptyContent', () => {
let emptyContent = 'no data';
let props = {
filter: true,
emptyContent,
};
const select = getSelect(props);
// click to show input
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
let inputValue = 'semi';
let event = { target: { value: inputValue } };
select.find('input').simulate('change', event);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-option-empty`).text()).toEqual(emptyContent);
});
it('option value & label', () => {
let spyOnChange = sinon.spy(() => {});
let props = {
optionList: [{ label: 'semi', value: 'bytedance' }],
defaultOpen: true,
onChange: spyOnChange,
};
const select = getSelect(props);
let optionList = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
expect(optionList.at(0).text()).toEqual('semi');
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
optionList.at(0).simulate('click', nativeEvent);
expect(spyOnChange.calledWithMatch('bytedance')).toEqual(true);
});
it('option.value is number', () => {
let spyOnChange = sinon.spy(() => {});
let props = {
optionList: [{ label: 'semi', value: 0 }],
defaultOpen: true,
onChange: spyOnChange,
};
const select = getSelect(props);
let optionList = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
expect(optionList.at(0).text()).toEqual('semi');
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
optionList.at(0).simulate('click', nativeEvent);
expect(spyOnChange.calledWithMatch(0)).toEqual(true);
});
it('renderSelectedItem, single', () => {
const spyRSI = sinon.spy(option => {
return option.value + '-' + option.label;
});
let props = {
renderSelectedItem: spyRSI,
defaultValue: 'abc',
};
const select = getSelect(props);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-selection-text`).text()).toEqual('abc-Abc');
expect(spyRSI.calledWith({ value: 'abc', label: 'Abc' }));
});
it('renderSelectedItem, single & value = 0, not exist in optionList', () => {
// test value = 0 & not match in optionList
const spyRSI2 = sinon.spy(option => option.label + 1);
let props2 = {
renderSelectedItem: spyRSI2,
value: 0,
};
const select2 = getSelect(props2);
expect(select2.find(`.${BASE_CLASS_PREFIX}-select-selection-text`).text()).toEqual('1');
expect(spyRSI2.calledWith({ value: 0, label: 0 }));
});
it('renderSelectedItem - multiple', () => {
const spyRSI = sinon.spy((option, opts) => {
let content = option.value + '-' + option.extra;
return {
isRenderInTag: true,
content,
};
});
let props = {
optionList: [
{ value: 'abc', label: 'Abc', extra: 'a1' },
{ value: 'hotsoon', label: 'Hotsoon', extra: 'b2' },
{ value: 'pipixia', label: 'Pipixia', extra: 'c3' },
{ value: 'toutiao', label: 'TopBuzz', extra: 'd4' },
],
renderSelectedItem: spyRSI,
defaultValue: ['abc', 'hotsoon'],
multiple: true,
};
const select = getSelect(props);
let tags = select.find(`.${BASE_CLASS_PREFIX}-tag-content`);
expect(tags.at(0).text()).toEqual('abc-a1');
expect(tags.at(1).text()).toEqual('hotsoon-b2');
});
it('renderSelectedItem - multiple - isRenderInTag: false', () => {
let item1, item2;
const spyRSI = sinon.spy((option, opts) => {
let content = {option.value + '-' + option.extra}
;
if (opts.index === 0) {
item1 = content;
} else if (opts.index === 1) {
item2 = content;
}
return {
isRenderInTag: false,
content,
};
});
let props = {
optionList: [
{ value: 'abc', label: 'Abc', extra: 'a1' },
{ value: 'hotsoon', label: 'Hotsoon', extra: 'b2' },
{ value: 'pipixia', label: 'Pipixia', extra: 'c3' },
{ value: 'toutiao', label: 'TopBuzz', extra: 'd4' },
],
renderSelectedItem: spyRSI,
defaultValue: ['abc', 'hotsoon'],
multiple: true,
};
const select = getSelect(props);
const items = select.find(`.${BASE_CLASS_PREFIX}-select-content-wrapper`).children();
expect(items.at(0).contains(item1));
expect(items.at(1).contains(item2));
});
it('defaultActiveFirstOption', () => {
const props = {
defaultActiveFirstOption: true,
defaultOpen: true,
};
const select = getSelect(props);
// expect first option active
expect(select.find(`.${BASE_CLASS_PREFIX}-select-option-focused`).text()).toEqual('Abc');
});
it('onSelect', () => {
// trigger onSelect when option has been selected
let spyOnSelect = sinon.spy((value, option) => {});
let props = {
defaultOpen: true,
onSelect: spyOnSelect,
};
let select = getSelect(props);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
let firstOption = options.at(0);
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
firstOption.simulate('click', nativeEvent);
expect(spyOnSelect.calledOnce).toBe(true);
expect(spyOnSelect.calledWith('abc', { value: 'abc', label: 'Abc' })).toBe(true);
expect(spyOnSelect.calledWith('abc', { value: 'abc', label: 'Abc', extraKey: true })).toBe(false);
});
it('onDeselect', () => {
// trigger onDeselect when option is deselected
let onDeselect = (value, option) => {};
let spyOnDeselect = sinon.spy(onDeselect);
let props = {
multiple: true,
spyOnDeselect,
defaultOpen: true,
defaultValue: ['abc', 'hotsoon'],
onDeselect: spyOnDeselect,
};
const select = getSelect(props);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
const secondOption = options.at(1);
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
secondOption.simulate('click', nativeEvent);
expect(spyOnDeselect.calledOnce).toBe(true);
expect(spyOnDeselect.calledWith('hotsoon', { value: 'hotsoon', label: 'Hotsoon' })).toBe(true);
expect(spyOnDeselect.calledWith('hotsoon', { value: 'hotsoon', label: 'Hotsoon', extraKey: true })).toBe(false);
});
it('onChange (single)', () => {
let spyOnChange = sinon.spy((value, option) => {});
let props = {
defaultOpen: true,
onChange: spyOnChange,
};
let select = getSelect(props);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
let firstOption = options.at(0);
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
firstOption.simulate('click', nativeEvent);
expect(spyOnChange.calledOnce).toBe(true);
expect(spyOnChange.calledWith('abc')).toBe(true);
});
it('onChange (multiple)', () => {
let spyOnChange = sinon.spy((value, option) => {});
let props = {
defaultOpen: true,
multiple: true,
onChange: spyOnChange,
};
let select = getSelect(props);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
options.at(0).simulate('click', nativeEvent);
options.at(1).simulate('click', nativeEvent);
expect(spyOnChange.callCount).toEqual(2);
expect(spyOnChange.getCall(0).args[0]).toEqual(['abc']);
expect(spyOnChange.getCall(1).args[0]).toEqual(['abc', 'hotsoon']);
});
it('onChange + onChangeWithObject (single)', () => {
let spyOnChange = sinon.spy((value, option) => {});
let props = {
defaultOpen: true,
onChangeWithObject: true,
onChange: spyOnChange,
};
let select = getSelect(props);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
let firstOption = options.at(0);
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
firstOption.simulate('click', nativeEvent);
expect(spyOnChange.calledWith({ value: 'abc', label: 'Abc' })).toBe(true);
});
it('onChange + onChangeWithObject (multiple)', () => {
let spyOnChange = sinon.spy((value, option) => {});
let props = {
defaultOpen: true,
onChangeWithObject: true,
multiple: true,
onChange: spyOnChange,
};
let select = getSelect(props);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
options.at(0).simulate('click', nativeEvent);
options.at(1).simulate('click', nativeEvent);
expect(spyOnChange.callCount).toEqual(2);
expect(spyOnChange.getCall(0).args[0]).toEqual([{ value: 'abc', label: 'Abc' }]);
expect(spyOnChange.getCall(1).args[0]).toEqual([
{ value: 'abc', label: 'Abc' },
{ value: 'hotsoon', label: 'Hotsoon' },
]);
});
it('【value】controlled mode', () => {
let spyOnChange = sinon.spy((value, option) => {});
let props = {
value: 'abc',
};
let select = getSelect(props);
expect(select.find(`.${BASE_CLASS_PREFIX}-select-selection-text`).getDOMNode().textContent).toEqual('Abc');
select.setProps({ value: 'hotsoon' });
select.update();
expect(select.find(`.${BASE_CLASS_PREFIX}-select-selection-text`).getDOMNode().textContent).toEqual('Hotsoon');
select.setProps({ value: undefined });
select.update();
expect(select.find(`.${BASE_CLASS_PREFIX}-select-selection-text`).getDOMNode().textContent).toEqual('');
select.unmount();
let singleProps = {
value: 'abc',
optionList: defaultList,
defaultOpen: true,
onChange: spyOnChange,
};
select = getSelect(singleProps);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
options.at(1).simulate('click', nativeEvent);
expect(spyOnChange.getCall(0).args[0]).toEqual('hotsoon');
select.unmount();
let spyMOnChange = sinon.spy((value, option) => {});
let spyMOnClear = sinon.spy(() => {});
let multipleProps = {
value: '',
optionList: defaultList,
defaultOpen: true,
multiple: true,
filter: true,
onChange: spyMOnChange,
showClear: true,
onClear: spyMOnClear,
};
select = getSelect(multipleProps);
let mOptions = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
mOptions.at(1).simulate('click', nativeEvent);
expect(spyMOnChange.getCall(0).args[0]).toEqual(['hotsoon']);
// TODO
// test
});
it('【onBlur/onFocus】', () => {
let spyOnBlur = sinon.spy((value, option) => {
});
let spyOnFocus = sinon.spy((value, option) => {
});
let props = {
onBlur: spyOnBlur,
onFocus: spyOnFocus,
};
let select = getSelect(props);
let trigger = select.find('.semi-select');
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
trigger.simulate('click', nativeEvent);
expect(spyOnFocus.callCount).toEqual(1);
// Since there is no mechanism such as event bubbling in enzyme + jsdom, the blur event can only be triggered manually on the blur element,
// and the blur of the `a element` cannot be achieved through the focus `b element`.
// Adapt to A11y requirements, close the panel will not call the onBlur func
select.instance().close();
expect(spyOnBlur.callCount).toEqual(0);
select.unmount();
});
it('【autoFocus】- filter = false', () => {
// should focus triggerElement after mounted
let spyOnBlur = sinon.spy((value, option) => {
debugger
});
let spyOnFocus = sinon.spy((value, option) => {
debugger
});
let props = {
onBlur: spyOnBlur,
onFocus: spyOnFocus,
autoFocus: true,
};
let select = getSelect(props);
// should not trigger focus when autoFocus
expect(spyOnFocus.callCount).toEqual(0);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-focus`)).toEqual(true);
select.unmount();
});
it('【autoFocus】- filter = true', () => {
// autoFocus should auto Focus input element when filter is true
let props = {
autoFocus: true,
filter: true
};
let select = getSelect(props);
expect(select.exists(`.${BASE_CLASS_PREFIX}-select-focus`)).toEqual(true);
expect(select.exists(`.${BASE_CLASS_PREFIX}-input-wrapper-focus`)).toEqual(true);
select.unmount();
});
it('【autoFocus】 & onBlur when autoFocus = true', () => {
// autoFocus should trigger onBlur when click other element directly (dropdown not open)
let spyOnBlur = sinon.spy((value, option) => {
});
let props = {
autoFocus: true,
onBlur: spyOnBlur,
}
// but we can't test this case, Orz
// Since there is no mechanism such as event bubbling in enzyme + jsdom, the blur event can only be triggered manually on the blur element,
// and the blur of the `a element` cannot be achieved through the focus `b element`.
// mock blur event on trigger element
let select = getSelect(props);
let trigger = select.find('.semi-select');
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
trigger.simulate('blur', nativeEvent);
expect(spyOnBlur.callCount).toEqual(1);
});
it('virtual', () => {
let spyOnChange = sinon.spy((value) => {
});
let optionList = Array.from({ length: 100 }, (v, i) => ({ label: `option-${i}`, value: i }));
let props = {
virtualize: {
itemSize: 36, // px
},
defaultOpen: true,
optionList,
onChange: spyOnChange,
};
let select = getSelect(props);
let options = select.find('.semi-select-option');
let firstOption = options.children().at(0);
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
firstOption.simulate('click', nativeEvent);
expect(spyOnChange.callCount).toEqual(1);
expect(spyOnChange.calledWithMatch(0)).toEqual(true);
});
it('OptionGroup', () => {
let optionList = [
a-1
a-2
,
b-1
b-2
,
// last option without label
c-1
]
let props = {
defaultOpen: true,
children: optionList,
};
let select = getSelect(props);
let options = select.find('.semi-select-group');
expect(options.length).toEqual(2);
expect(options.at(0).text()).toEqual('Group1');
expect(options.at(1).text()).toEqual('Group2');
});
it('empty', () => {
let props = {
defaultOpen: true,
optionList: [],
emptyContent: 'empty'
};
let select = getSelect(props);
let options = select.find('.semi-select-option.semi-select-option-empty');
expect(options.length).toEqual(1);
expect(options.at(0).text()).toEqual(props.emptyContent);
select.setProps({
emptyContent: null
})
select.update()
expect(select.find('.semi-select-option').length).toEqual(0);
});
it('renderOptionItem onClick onMouseEnter', () => {
let spyOnMouseEnter = sinon.spy((value) => {
});
let spyOnClick = sinon.spy((value) => {
});
const renderOptionItem = renderProps => {
const {
disabled,
selected,
label,
value,
focused,
className,
style,
onMouseEnter,
onClick,
empty,
emptyContent,
...rest
} = renderProps;
return
};
let props = {
defaultOpen: true,
optionList: [
{ value: 'abc', label: '抖音', },
{ value: 'jianying', label: '剪映', },
],
renderOptionItem
};
let select = getSelect(props);
let options = select.find('.custom-option');
expect(options.length).toEqual(2);
options.at(0).simulate('click');
expect(spyOnClick.callCount).toEqual(1);
options.at(1).simulate('mouseenter');
expect(spyOnMouseEnter.callCount).toEqual(1);
});
it('customTrigger', () => {
const triggerRender = ({ value, ...rest }) => {
return (
trigger
);
};
let props = {
triggerRender,
};
let select = getSelect(props);
let trigger = select.find('.custom-trigger');
expect(trigger.length).toEqual(1);
expect(trigger.at(0).text()).toEqual('trigger');
trigger.at(0).simulate('click')
expect(select.find('.semi-select-option').length).toEqual(defaultList.length);
});
it('test keyboard press', () => {
let props = {
defaultOpen: true,
optionList: [
{ value: 'abc', label: 'Abc' },
{ value: 'hotsoon', label: 'Hotsoon' },
{ value: 'pipixia', label: 'Pipixia' },
{ value: 'toutiao', label: 'TopBuzz' },
],
};
let select = getSelect(props);
// press ⬇️
// since the defaultActiveFirstOption default to be true, after ⬇️, the second option focused
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.DOWN });
expect(select.find(`.${BASE_CLASS_PREFIX}-select-option`).at(1).hasClass(`${BASE_CLASS_PREFIX}-select-option-focused`)).toBe(true);
// press ⬆️
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.UP });
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.UP });
expect(select.find(`.${BASE_CLASS_PREFIX}-select-option`).at(defaultList.length-1).hasClass(`${BASE_CLASS_PREFIX}-select-option-focused`)).toBe(true);
// press ESC
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.ESC });
expect(select.find(`.${BASE_CLASS_PREFIX}-select-option`).exists()).toBe(false);
// reopen select, press ⬇️ and ENTER, the first option should be selected
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.DOWN });
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.ENTER });
expect(select.find(`.${BASE_CLASS_PREFIX}-select-selection-text`).text()).toBe(defaultList[0].label);
select.unmount();
// test whether backspace can skip disabled option
let dProps = {
defaultOpen: true,
optionList: [
{ value: 'abc', label: 'Abc' },
{ value: 'hotsoon', label: 'Hotsoon', disabled: true },
{ value: 'pipixia', label: 'Pipixia' },
],
defaultValue: ['hotsoon', 'abc'],
multiple: true,
};
let dSelect = getSelect(dProps);
dSelect.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.BACKSPACE });
let selections = Array.from(dSelect.state().selections);
expect(selections[0][0]).toEqual('Hotsoon');
});
it('allowCreate', () => {
const props = {
multiple: true,
allowCreate: true,
filter: true,
optionList: []
};
const select = getSelect(props);
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
select.find(`.${BASE_CLASS_PREFIX}-select .${BASE_CLASS_PREFIX}-input`).simulate('change', { target: { value: '1' } });
select.find(`.${BASE_CLASS_PREFIX}-select-option`).simulate('click', {});
expect(select.find(`.${BASE_CLASS_PREFIX}-select .semi-tag`).length).toBe(1);
select.find(`.${BASE_CLASS_PREFIX}-select .${BASE_CLASS_PREFIX}-input`).simulate('keydown', { keyCode: keyCode.BACKSPACE });
expect(select.find(`.${BASE_CLASS_PREFIX}-select .semi-tag`).length).toBe(0);
});
it('【onMouseEnter/onMouseLeave】', () => {
let spyEnter = sinon.spy((e) => {
});
let spyLeave = sinon.spy((e) => {
});
let props = {
onMouseEnter: spyEnter,
onMouseLeave: spyLeave,
};
let select = getSelect(props);
let trigger = select.find('.semi-select');
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
trigger.simulate('mouseenter', nativeEvent);
expect(spyEnter.callCount).toEqual(1);
trigger.simulate('mouseleave', nativeEvent);
expect(spyLeave.callCount).toEqual(1);
select.unmount();
});
it('ref method', () => {
let r;
let props = {
ref: (ref) => { r = ref },
filter: true,
multiple: true,
optionList: defaultList,
};
let select = getSelect(props);
r.open();
expect(select.state().isOpen).toEqual(true);
r.close();
expect(select.state().isOpen).toEqual(false);
r.selectAll();
select.update();
expect(select.state().selections.size).toEqual(4);
r.deselectAll();
expect(select.state().selections.size).toEqual(0);
r.focus();
expect(document.activeElement.tagName).toEqual('INPUT');
select.unmount();
// selectAll not work when multiple is false
let r2;
let props2 = {
ref: (ref) => { r2 = ref },
filter: true,
optionList: defaultList,
};
let singleSelect = getSelect(props2);
r2.selectAll();
expect(singleSelect.state().selections.size).toEqual(0);
});
it('props optionList update after choose some option, uncontrolled mode', () => {
let props = {
defaultActiveFirstOption: true,
optionList: [
{ value: 'abc', label: 'Abc' },
{ value: 'hotsoon', label: 'Hotsoon' }
],
defaultOpen: true,
multiple: true,
filter: true,
};
let select = getSelect(props);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
options.at(0).simulate('click', nativeEvent);
options.at(1).simulate('click', nativeEvent);
let newList = [
{ value: 'pipixia', label: 'Pipixia' },
{ value: 'toutiao', label: 'TopBuzz' },
];
select.setProps({ optionList: newList });
select.update();
let selections = Array.from(select.state().selections);
expect(selections[0][0]).toEqual('Abc');
expect(selections[1][0]).toEqual('Hotsoon');
select.unmount();
let singleProps = {
defaultActiveFirstOption: true,
optionList: [
{ value: 'abc', label: 'Abc' },
{ value: 'hotsoon', label: 'Hotsoon' },
],
defaultOpen: true,
};
let singleSelect = getSelect(singleProps);
let options2 = singleSelect.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
options2.at(0).simulate('click', nativeEvent);
singleSelect.setProps({ optionList: newList });
singleSelect.update();
let selections2 = Array.from(singleSelect.state().selections);
expect(selections2[0][0]).toEqual('abc');
});
it('click tag close when multiple, controlled mode', () => {
let spyOnChange = sinon.spy((value) => {
});
let spyOnDeselect = sinon.spy((option) => {
});
let props = {
optionList: [
{ value: 'abc', label: 'Abc' },
{ value: 'hotsoon', label: 'Hotsoon' },
],
multiple: true,
value: ['abc', 'hotsoon'],
onChange: spyOnChange,
onDeselect: spyOnDeselect,
};
let select = getSelect(props);
let tagClose = select.find('.semi-tag-close').children();
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
tagClose.at(0).simulate('click', nativeEvent);
expect(spyOnDeselect.calledWith('abc'));
expect(spyOnChange.calledWith(['hotsoon']));
});
it('autoClearSearchValue', () => {
// default usage
let optionList = Array.from({ length: 100 }, (v, i) => ({ label: `option-${i}`, value: i }));
let props = {
multiple: true,
optionList: optionList,
defaultOpen: true,
filter: true,
};
let select = getSelect(props);
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
let keyword = 'option';
let event = { target: { value: keyword } };
select.find('input').simulate('change', event);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
options.at(0).simulate('click', nativeEvent);
let inputValue = select.find('input').getDOMNode().value;
expect(inputValue).toEqual('');
});
it('autoClearSearchValue = false', () => {
let optionList = Array.from({ length: 100 }, (v, i) => ({ label: `option-${i}`, value: i }));
let props = {
multiple: true,
optionList: optionList,
defaultOpen: true,
autoClearSearchValue: false,
filter: true,
};
let select = getSelect(props);
select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
let keyword = 'option';
let event = { target: { value: keyword } };
select.find('input').simulate('change', event);
let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
options.at(0).simulate('click', nativeEvent);
let inputValue = select.find('input').getDOMNode().value;
expect(inputValue).toEqual(keyword);
});
// TODO ref selectAll \deselectAll when onChangeWithObject is true
// TODO when loading is true, do not response any keyboard event
// TODO can't remove tag when option is disabled
// it('allowCreate-renderCreateItem', ()=>{})
// it('autoAdjustOverflow', ()=>{})
// it('remote', ()=>{})
// it('【data】updateOptionList when data change', () => {
// let props = {
// defaultOpen: true,
// data: ['semi'],
// ...commonProps
// };
// let ac = getAc(props);
// let candidate = ac.find(`.${BASE_CLASS_PREFIX}-autocomplete-option-list`).children();
// expect(candidate.length).toEqual(1);
// expect(candidate.at(0).getDOMNode().textContent).toEqual('${BASE_CLASS_PREFIX}');
// ac.setProps({ data: ['ies', 'design']});
// ac.update();
// candidate = ac.find(`.${BASE_CLASS_PREFIX}-autocomplete-option-list`).children();
// expect(candidate.length).toEqual(2);
// expect(candidate.at(0).getDOMNode().textContent).toEqual('ies');
// expect(candidate.at(1).getDOMNode().textContent).toEqual('design');
// })
});