@douyinfe/semi-ui 2.1.2 → 2.1.5

package/select/__test__/select.test.js

@@ -0,0 +1,1266 @@
+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 => <Option {...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 wating (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(<Select {...commonProps} {...props} />, { 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 = <div className="prefix">prefix content</div>;
+        let suffix = <div className="suffix">suffix content</div>;
+        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 = <div class="inner-slot">inner</div>;
+        let props = {
+            innerTopSlot: innerTopSlot,
+            defaultOpen: true,
+        };
+        const select = getSelect(props);
+        expect(select.contains(innerTopSlot)).toEqual(true);
+    });
+
+    it('outerTopSlot', () => {
+        let outerTopSlot = <div class="outer-slot">outer</div>;
+        let props = {
+            outerTopSlot: outerTopSlot,
+            defaultOpen: true,
+        };
+        const select = getSelect(props);
+        expect(select.contains(outerTopSlot)).toEqual(true);
+    });
+
+    // TODO
+    it('innerBottomSlot', () => {
+        let innerBottomSlot = <div class="inner-slot">inner</div>;
+        let props = {
+            innerBottomSlot: innerBottomSlot,
+            defaultOpen: true,
+        };
+        const select = getSelect(props);
+        expect(select.contains(innerBottomSlot)).toEqual(true);
+    });
+
+    it('outerBottomSlot', () => {
+        let outerBottomSlot = <div class="outer-slot">outer</div>;
+        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 <Option {...item}>{item.label}</Option>;
+        });
+        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 disbaled 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 = 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
+        let scProps = {
+            showClear: true,
+            filter: true,
+            defaultValue: 'tikok',
+        };
+        const scSelect = getSelect(props);
+    });
+
+    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 = <div className={opts.index}>{option.value + '-' + option.extra}</div>;
+            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 deselectd
+        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`.
+
+        // blur usually call when popover close, so use select instance close() method to mock blur click like use in browser
+        select.instance().close();
+        expect(spyOnBlur.callCount).toEqual(1);
+        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 ohter 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('vitrual', () => {
+        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 = [
+            <Select.OptGroup key={1} label="Group1">
+                <Select.Option value="a-1">a-1</Select.Option>
+                <Select.Option value="a-2">a-2</Select.Option>
+            </Select.OptGroup>,
+            <Select.OptGroup key={2} label="Group2">
+                <Select.Option value="b-1">b-1</Select.Option>
+                <Select.Option value="b-2">b-2</Select.Option>
+            </Select.OptGroup>,
+            // last option without label
+            <Select.OptGroup key={3}>
+                <Select.Option value="c-1">c-1</Select.Option>
+            </Select.OptGroup>
+        ]
+        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 <div style={style} className="custom-option" onClick={spyOnClick} onMouseEnter={spyOnMouseEnter}>
+                <div className='option-right'>
+                    {label}
+                </div>
+            </div>
+        };
+        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 (
+              <div className="custom-triger">
+                trigger
+              </div>
+            );
+          };
+        let props = {
+            triggerRender,
+        };
+        let select = getSelect(props);
+        let trigger = select.find('.custom-triger');
+        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 ⬇️
+        select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('keydown', { keyCode: keyCode.DOWN });
+        expect(select.find(`.${BASE_CLASS_PREFIX}-select-option`).at(0).hasClass(`${BASE_CLASS_PREFIX}-select-option-focused`)).toBe(true);
+        // press ⬆️
+        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, uncontroled 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, controled 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']));
+    });
+
+    // TODO ref selectAll \deselectAll when onChangeWithObject is true
+    // TODO when loading is true, do not response any keyborard event
+    // TODO can't remove tag when option is diabled
+    // 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');
+    //     })
+});