911 lines
24 KiB
Vue
911 lines
24 KiB
Vue
|
import { createTest, createVue, triggerEvent, destroyVM, waitImmediate } from '../util';
|
||
|
|
import Select from 'packages/select';
|
||
|
|
|
||
|
|
describe('Select', () => {
|
||
|
|
const getSelectVm = (configs = {}, options) => {
|
||
|
|
['multiple', 'clearable', 'filterable', 'allowCreate', 'remote', 'collapseTags', 'automaticDropdown'].forEach(config => {
|
||
|
|
configs[config] = configs[config] || false;
|
||
|
|
});
|
||
|
|
configs.multipleLimit = configs.multipleLimit || 0;
|
||
|
|
if (!options) {
|
||
|
|
options = [{
|
||
|
|
value: '选项1',
|
||
|
|
label: '黄金糕',
|
||
|
|
disabled: false
|
||
|
|
}, {
|
||
|
|
value: '选项2',
|
||
|
|
label: '双皮奶',
|
||
|
|
disabled: false
|
||
|
|
}, {
|
||
|
|
value: '选项3',
|
||
|
|
label: '蚵仔煎',
|
||
|
|
disabled: false
|
||
|
|
}, {
|
||
|
|
value: '选项4',
|
||
|
|
label: '龙须面',
|
||
|
|
disabled: false
|
||
|
|
}, {
|
||
|
|
value: '选项5',
|
||
|
|
label: '北京烤鸭',
|
||
|
|
disabled: false
|
||
|
|
}];
|
||
|
|
}
|
||
|
|
const vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select
|
||
|
|
ref="select"
|
||
|
|
v-model="value"
|
||
|
|
:multiple="multiple"
|
||
|
|
:multiple-limit="multipleLimit"
|
||
|
|
:popper-class="popperClass"
|
||
|
|
:clearable="clearable"
|
||
|
|
:filterable="filterable"
|
||
|
|
:collapse-tags="collapseTags"
|
||
|
|
:allow-create="allowCreate"
|
||
|
|
:filterMethod="filterMethod"
|
||
|
|
:remote="remote"
|
||
|
|
:loading="loading"
|
||
|
|
:remoteMethod="remoteMethod"
|
||
|
|
:automatic-dropdown="automaticDropdown">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:disabled="item.disabled"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options,
|
||
|
|
multiple: configs.multiple,
|
||
|
|
multipleLimit: configs.multipleLimit,
|
||
|
|
clearable: configs.clearable,
|
||
|
|
filterable: configs.filterable,
|
||
|
|
collapseTags: configs.collapseTags,
|
||
|
|
allowCreate: configs.allowCreate,
|
||
|
|
popperClass: configs.popperClass,
|
||
|
|
automaticDropdown: configs.automaticDropdown,
|
||
|
|
loading: false,
|
||
|
|
filterMethod: configs.filterMethod && configs.filterMethod(this),
|
||
|
|
remote: configs.remote,
|
||
|
|
remoteMethod: configs.remoteMethod && configs.remoteMethod(this),
|
||
|
|
value: configs.multiple ? [] : ''
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
return vm;
|
||
|
|
};
|
||
|
|
|
||
|
|
let vm;
|
||
|
|
afterEach(() => {
|
||
|
|
destroyVM(vm);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('create', () => {
|
||
|
|
vm = createTest(Select, true);
|
||
|
|
expect(vm.$el.className).to.equal('el-select');
|
||
|
|
expect(vm.$el.querySelector('.el-input__inner').placeholder).to.equal('请选择');
|
||
|
|
vm.toggleMenu();
|
||
|
|
expect(vm.visible).to.true;
|
||
|
|
});
|
||
|
|
|
||
|
|
it('options rendered correctly', () => {
|
||
|
|
vm = getSelectVm();
|
||
|
|
const options = vm.$el.querySelectorAll('.el-select-dropdown__item');
|
||
|
|
const result = [].every.call(options, (option, index) => {
|
||
|
|
let text = option.querySelector('span').textContent;
|
||
|
|
return text === vm.options[index].label;
|
||
|
|
});
|
||
|
|
expect(result).to.true;
|
||
|
|
});
|
||
|
|
|
||
|
|
it('custom dropdown class', () => {
|
||
|
|
vm = getSelectVm({ popperClass: 'custom-dropdown' });
|
||
|
|
const dropdown = vm.$el.querySelector('.el-select-dropdown');
|
||
|
|
expect(dropdown.classList.contains('custom-dropdown')).to.true;
|
||
|
|
});
|
||
|
|
|
||
|
|
it('default value', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [{
|
||
|
|
value: '选项1',
|
||
|
|
label: '黄金糕'
|
||
|
|
}, {
|
||
|
|
value: '选项2',
|
||
|
|
label: '双皮奶'
|
||
|
|
}],
|
||
|
|
value: '选项2'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.$el.querySelector('.el-input__inner').value).to.equal('双皮奶');
|
||
|
|
done();
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('single select', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value" @change="handleChange">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:value="item.value">
|
||
|
|
<p>{{item.label}} {{item.value}}</p>
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [{
|
||
|
|
value: '选项1',
|
||
|
|
label: '黄金糕'
|
||
|
|
}, {
|
||
|
|
value: '选项2',
|
||
|
|
label: '双皮奶'
|
||
|
|
}, {
|
||
|
|
value: '选项3',
|
||
|
|
label: '蚵仔煎'
|
||
|
|
}, {
|
||
|
|
value: '选项4',
|
||
|
|
label: '龙须面'
|
||
|
|
}, {
|
||
|
|
value: '选项5',
|
||
|
|
label: '北京烤鸭'
|
||
|
|
}],
|
||
|
|
value: '',
|
||
|
|
count: 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleChange() {
|
||
|
|
this.count++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
const options = vm.$el.querySelectorAll('.el-select-dropdown__item');
|
||
|
|
expect(vm.value).to.equal('');
|
||
|
|
triggerEvent(options[2], 'mouseenter');
|
||
|
|
options[2].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value).to.equal('选项3');
|
||
|
|
expect(vm.count).to.equal(1);
|
||
|
|
triggerEvent(options[2], 'mouseenter');
|
||
|
|
options[4].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value).to.equal('选项5');
|
||
|
|
expect(vm.count).to.equal(2);
|
||
|
|
done();
|
||
|
|
}, 100);
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('disabled option', done => {
|
||
|
|
vm = getSelectVm();
|
||
|
|
vm.options[1].disabled = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
const options = vm.$el.querySelectorAll('.el-select-dropdown__item');
|
||
|
|
expect(options[1].classList.contains('is-disabled')).to.true;
|
||
|
|
options[1].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value).to.equal('');
|
||
|
|
done();
|
||
|
|
}, 100);
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('disabled select', () => {
|
||
|
|
vm = createTest(Select, { disabled: true }, true);
|
||
|
|
expect(vm.$el.querySelector('.el-input').classList.contains('is-disabled')).to.true;
|
||
|
|
});
|
||
|
|
|
||
|
|
it('visible event', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value" @visible-change="handleVisibleChange">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [],
|
||
|
|
value: '',
|
||
|
|
visible: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleVisibleChange(val) {
|
||
|
|
this.visible = val;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
vm.$children[0].visible = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.visible).to.true;
|
||
|
|
done();
|
||
|
|
}, 50);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('keyboard operations', done => {
|
||
|
|
vm = getSelectVm();
|
||
|
|
const select = vm.$children[0];
|
||
|
|
let i = 8;
|
||
|
|
while (i--) {
|
||
|
|
select.navigateOptions('next');
|
||
|
|
}
|
||
|
|
select.navigateOptions('prev');
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(select.hoverIndex).to.equal(0);
|
||
|
|
select.selectOption();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(select.value).to.equal('选项1');
|
||
|
|
done();
|
||
|
|
}, 100);
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('clearable', done => {
|
||
|
|
vm = getSelectVm({ clearable: true });
|
||
|
|
const select = vm.$children[0];
|
||
|
|
vm.value = '选项1';
|
||
|
|
select.inputHovering = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
const iconClear = vm.$el.querySelector('.el-input__icon.el-icon-circle-close');
|
||
|
|
expect(iconClear).to.exist;
|
||
|
|
iconClear.click();
|
||
|
|
expect(vm.value).to.equal('');
|
||
|
|
done();
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('object typed value', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value" value-key="id">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.id"
|
||
|
|
:value="item">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [{
|
||
|
|
id: 1,
|
||
|
|
label: 'label1'
|
||
|
|
}, {
|
||
|
|
id: 2,
|
||
|
|
label: 'label2'
|
||
|
|
}],
|
||
|
|
value: {
|
||
|
|
id: 1,
|
||
|
|
label: 'label1'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.$el.querySelector('.el-input__inner').value).to.equal('label1');
|
||
|
|
expect(vm.$el.querySelector('.el-select-dropdown__item').classList.contains('selected'));
|
||
|
|
done();
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('prefixed icon', () => {
|
||
|
|
vm = createTest({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [],
|
||
|
|
value: ''
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
expect(vm.$el.querySelector('.el-input__icon').classList.contains('el-icon-search')).to.be.true;
|
||
|
|
});
|
||
|
|
|
||
|
|
it('custom el-option template', () => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:value="item.value">
|
||
|
|
<p>{{item.label}} {{item.value}}</p>
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [{
|
||
|
|
value: 'value',
|
||
|
|
label: 'label'
|
||
|
|
}],
|
||
|
|
value: ''
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
expect(vm.$el.querySelector('.el-select-dropdown__item p').textContent).to.equal('label value');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('option group', () => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value">
|
||
|
|
<el-option-group
|
||
|
|
v-for="group in options"
|
||
|
|
:key="group.label"
|
||
|
|
:disabled="group.disabled"
|
||
|
|
:label="group.label">
|
||
|
|
<el-option
|
||
|
|
v-for="item in group.options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-option-group>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [{
|
||
|
|
label: '热门城市',
|
||
|
|
options: [{
|
||
|
|
value: 'Shanghai',
|
||
|
|
label: '上海'
|
||
|
|
}, {
|
||
|
|
value: 'Beijing',
|
||
|
|
label: '北京'
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
label: '城市名',
|
||
|
|
disabled: true,
|
||
|
|
options: [{
|
||
|
|
value: 'Chengdu',
|
||
|
|
label: '成都'
|
||
|
|
}, {
|
||
|
|
value: 'Shenzhen',
|
||
|
|
label: '深圳'
|
||
|
|
}, {
|
||
|
|
value: 'Guangzhou',
|
||
|
|
label: '广州'
|
||
|
|
}, {
|
||
|
|
value: 'Dalian',
|
||
|
|
label: '大连'
|
||
|
|
}]
|
||
|
|
}],
|
||
|
|
value: ''
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
const groups = vm.$el.querySelectorAll('.el-select-group__wrap');
|
||
|
|
const options = groups[1].querySelectorAll('.el-select-dropdown__item');
|
||
|
|
expect(groups.length).to.equal(2);
|
||
|
|
expect(options.length).to.equal(4);
|
||
|
|
expect(options[0].querySelector('span').textContent).to.equal('成都');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('filterable', done => {
|
||
|
|
vm = getSelectVm({ filterable: true });
|
||
|
|
const select = vm.$children[0];
|
||
|
|
setTimeout(() => {
|
||
|
|
select.selectedLabel = '面';
|
||
|
|
select.onInputChange();
|
||
|
|
select.visible = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(select.filteredOptionsCount).to.equal(1);
|
||
|
|
done();
|
||
|
|
}, 10);
|
||
|
|
}, 10);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('filterable with custom filter-method', done => {
|
||
|
|
const filterMethod = vm => {
|
||
|
|
return query => {
|
||
|
|
vm.options = vm.options.filter(option => option.label.indexOf(query) === -1);
|
||
|
|
};
|
||
|
|
};
|
||
|
|
vm = getSelectVm({ filterable: true, filterMethod });
|
||
|
|
const select = vm.$children[0];
|
||
|
|
select.$el.click();
|
||
|
|
setTimeout(() => {
|
||
|
|
select.selectedLabel = '面';
|
||
|
|
select.onInputChange();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(select.filteredOptionsCount).to.equal(4);
|
||
|
|
done();
|
||
|
|
}, 10);
|
||
|
|
}, 10);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('default-first-option', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select
|
||
|
|
v-model="value"
|
||
|
|
default-first-option
|
||
|
|
filterable
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item"
|
||
|
|
:key="item"
|
||
|
|
:value="item"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: ['1', '2', '3', '4', '5'],
|
||
|
|
value: ''
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
|
||
|
|
const select = vm.$children[0];
|
||
|
|
setTimeout(() => {
|
||
|
|
select.$el.click();
|
||
|
|
select.query = '3';
|
||
|
|
select.handleQueryChange('3');
|
||
|
|
select.selectOption();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(select.value).to.equal('3');
|
||
|
|
done();
|
||
|
|
}, 10);
|
||
|
|
}, 10);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('allow create', done => {
|
||
|
|
vm = getSelectVm({ filterable: true, allowCreate: true });
|
||
|
|
const select = vm.$children[0];
|
||
|
|
select.$el.querySelector('input').focus();
|
||
|
|
setTimeout(() => {
|
||
|
|
select.selectedLabel = 'new';
|
||
|
|
select.onInputChange();
|
||
|
|
setTimeout(() => {
|
||
|
|
const options = document.querySelectorAll('.el-select-dropdown__item span');
|
||
|
|
const target = [].filter.call(options, option => option.innerText === 'new');
|
||
|
|
target[0].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(select.value.indexOf('new') > -1).to.true;
|
||
|
|
done();
|
||
|
|
}, 10);
|
||
|
|
}, 10);
|
||
|
|
}, 10);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('multiple select', done => {
|
||
|
|
vm = getSelectVm({ multiple: true });
|
||
|
|
const options = vm.$el.querySelectorAll('.el-select-dropdown__item');
|
||
|
|
vm.value = ['选项1'];
|
||
|
|
setTimeout(() => {
|
||
|
|
options[1].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
options[3].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value.indexOf('选项2') > -1 && vm.value.indexOf('选项4') > -1).to.true;
|
||
|
|
const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');
|
||
|
|
tagCloseIcons[0].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value.indexOf('选项1')).to.equal(-1);
|
||
|
|
done();
|
||
|
|
}, 100);
|
||
|
|
}, 100);
|
||
|
|
}, 100);
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('multiple remove-tag', done => {
|
||
|
|
sinon.stub(window.console, 'log');
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value" multiple @remove-tag="handleRemoveTag">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:value="item.value">
|
||
|
|
<p>{{item.label}} {{item.value}}</p>
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [{
|
||
|
|
value: '选项1',
|
||
|
|
label: '黄金糕'
|
||
|
|
}, {
|
||
|
|
value: '选项2',
|
||
|
|
label: '双皮奶'
|
||
|
|
}, {
|
||
|
|
value: '选项3',
|
||
|
|
label: '蚵仔煎'
|
||
|
|
}, {
|
||
|
|
value: '选项4',
|
||
|
|
label: '龙须面'
|
||
|
|
}, {
|
||
|
|
value: '选项5',
|
||
|
|
label: '北京烤鸭'
|
||
|
|
}],
|
||
|
|
value: ['选项1', '选项3']
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleRemoveTag() {
|
||
|
|
console.log('remove tag');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
expect(vm.value.length).to.equal(2);
|
||
|
|
setTimeout(() => {
|
||
|
|
const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');
|
||
|
|
tagCloseIcons[1].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value.length).to.equal(1);
|
||
|
|
expect(window.console.log.callCount).to.equal(1);
|
||
|
|
tagCloseIcons[0].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value.length).to.equal(0);
|
||
|
|
expect(window.console.log.callCount).to.equal(2);
|
||
|
|
window.console.log.restore();
|
||
|
|
done();
|
||
|
|
}, 50);
|
||
|
|
}, 50);
|
||
|
|
}, 50);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('multiple limit', done => {
|
||
|
|
vm = getSelectVm({ multiple: true, multipleLimit: 1 });
|
||
|
|
const options = vm.$el.querySelectorAll('.el-select-dropdown__item');
|
||
|
|
options[1].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value.indexOf('选项2') > -1).to.true;
|
||
|
|
options[3].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(vm.value.indexOf('选项4')).to.equal(-1);
|
||
|
|
done();
|
||
|
|
}, 50);
|
||
|
|
}, 50);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('multiple remote search', done => {
|
||
|
|
const remoteMethod = vm => {
|
||
|
|
return query => {
|
||
|
|
vm.loading = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
vm.options = vm.options.filter(option => {
|
||
|
|
return option.label.indexOf(query) > -1;
|
||
|
|
});
|
||
|
|
vm.loading = false;
|
||
|
|
}, 200);
|
||
|
|
};
|
||
|
|
};
|
||
|
|
vm = getSelectVm({
|
||
|
|
multiple: true,
|
||
|
|
remote: true,
|
||
|
|
filterable: true,
|
||
|
|
remoteMethod
|
||
|
|
});
|
||
|
|
const select = vm.$children[0];
|
||
|
|
select.handleQueryChange('');
|
||
|
|
vm.$nextTick(() => {
|
||
|
|
select.handleQueryChange('面');
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(select.filteredOptionsCount).to.equal(1);
|
||
|
|
select.options[0].$el.click();
|
||
|
|
vm.$nextTick(() => {
|
||
|
|
expect(vm.value[0]).to.equal('选项4');
|
||
|
|
select.deletePrevTag({ target: select.$refs.input });
|
||
|
|
select.deletePrevTag({ target: select.$refs.input });
|
||
|
|
select.resetInputState({ keyCode: 1 });
|
||
|
|
vm.$nextTick(() => {
|
||
|
|
expect(vm.value.length).to.equal(0);
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}, 250);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('event:focus & blur', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<el-select ref="select"></el-select>
|
||
|
|
`
|
||
|
|
}, true);
|
||
|
|
|
||
|
|
const spyFocus = sinon.spy();
|
||
|
|
const spyBlur = sinon.spy();
|
||
|
|
|
||
|
|
vm.$refs.select.$on('focus', spyFocus);
|
||
|
|
vm.$refs.select.$on('blur', spyBlur);
|
||
|
|
vm.$el.querySelector('input').focus();
|
||
|
|
vm.$el.querySelector('input').blur();
|
||
|
|
|
||
|
|
setTimeout(_ => {
|
||
|
|
expect(spyFocus.calledOnce).to.be.true;
|
||
|
|
expect(spyBlur.calledOnce).to.be.true;
|
||
|
|
done();
|
||
|
|
}, 250);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should return focus to input inside select after option select', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value" ref="select">
|
||
|
|
<el-option label="1" :value="1" />
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value: ''
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
|
||
|
|
const spyInputFocus = sinon.spy();
|
||
|
|
const spySelectFocus = sinon.spy();
|
||
|
|
|
||
|
|
vm.$refs.select.$on('focus', spySelectFocus);
|
||
|
|
vm.$refs.select.$refs.reference.$on('focus', spyInputFocus);
|
||
|
|
|
||
|
|
const option = vm.$el.querySelectorAll('.el-select-dropdown__item')[0];
|
||
|
|
triggerEvent(option, 'mouseenter');
|
||
|
|
option.click();
|
||
|
|
|
||
|
|
vm.$nextTick(_ => {
|
||
|
|
expect(spyInputFocus.calledOnce).to.be.true;
|
||
|
|
expect(spySelectFocus.calledOnce).not.to.be.true;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not open popper when automatic-dropdown not set', done => {
|
||
|
|
vm = getSelectVm();
|
||
|
|
|
||
|
|
vm.$refs.select.$refs.reference.$refs.input.focus();
|
||
|
|
|
||
|
|
vm.$nextTick(_ => {
|
||
|
|
expect(vm.$refs.select.visible).to.be.false;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should open popper when automatic-dropdown is set', done => {
|
||
|
|
vm = getSelectVm({ automaticDropdown: true });
|
||
|
|
|
||
|
|
vm.$refs.select.$refs.reference.$refs.input.focus();
|
||
|
|
|
||
|
|
vm.$nextTick(_ => {
|
||
|
|
expect(vm.$refs.select.visible).to.be.true;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('focus', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<el-select ref="select"></el-select>
|
||
|
|
`
|
||
|
|
}, true);
|
||
|
|
const spy = sinon.spy();
|
||
|
|
|
||
|
|
vm.$refs.select.$on('focus', spy);
|
||
|
|
vm.$refs.select.focus();
|
||
|
|
|
||
|
|
vm.$nextTick(_ => {
|
||
|
|
expect(spy.calledOnce).to.be.true;
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('only emit change on user input', done => {
|
||
|
|
let callCount = 0;
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value" @change="change" ref="select">
|
||
|
|
<el-option label="1" :value="1" />
|
||
|
|
<el-option label="2" :value="2" />
|
||
|
|
<el-option label="3" :value="3" />
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value: 1,
|
||
|
|
change: () => ++callCount
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
vm.value = 2;
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(callCount).to.equal(0);
|
||
|
|
const options = vm.$el.querySelectorAll('.el-select-dropdown__item');
|
||
|
|
triggerEvent(options[2], 'mouseenter');
|
||
|
|
options[2].click();
|
||
|
|
setTimeout(() => {
|
||
|
|
expect(callCount).to.equal(1);
|
||
|
|
done();
|
||
|
|
}, 10);
|
||
|
|
}, 10);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('render slot `empty`', done => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value">
|
||
|
|
<div class="empty-slot" slot="empty">EmptySlot</div>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value: 1
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
expect(vm.$el.querySelector('.empty-slot').innerText).to.be.equal('EmptySlot');
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should set placeholder to label of selected option when filterable is true and multiple is false', async() => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select ref="select" v-model="value" filterable>
|
||
|
|
<el-option label="test" value="test" />
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value: 'test'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
vm.$refs.select.$el.click();
|
||
|
|
await waitImmediate();
|
||
|
|
expect(vm.$refs.select.visible).to.be.equal(true);
|
||
|
|
expect(vm.$el.querySelector('.el-input__inner').placeholder).to.be.equal('test');
|
||
|
|
expect(vm.value).to.be.equal('test');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('default value is null or undefined', async() => {
|
||
|
|
vm = createVue({
|
||
|
|
template: `
|
||
|
|
<div>
|
||
|
|
<el-select v-model="value">
|
||
|
|
<el-option
|
||
|
|
v-for="item in options"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [{
|
||
|
|
value: '选项1',
|
||
|
|
label: '黄金糕'
|
||
|
|
}, {
|
||
|
|
value: '选项2',
|
||
|
|
label: '双皮奶'
|
||
|
|
}],
|
||
|
|
value: undefined
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, true);
|
||
|
|
|
||
|
|
vm.value = null;
|
||
|
|
await waitImmediate();
|
||
|
|
expect(vm.$el.querySelector('.el-input__inner').value).to.equal('');
|
||
|
|
vm.value = '选项1';
|
||
|
|
await waitImmediate();
|
||
|
|
expect(vm.$el.querySelector('.el-input__inner').value).to.equal('黄金糕');
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('resetInputHeight', () => {
|
||
|
|
const getSelectComponentVm = (configs) => {
|
||
|
|
vm = getSelectVm(configs || {});
|
||
|
|
return vm.$refs.select;
|
||
|
|
};
|
||
|
|
|
||
|
|
it('should reset height if collapse-tags option is disabled', () => {
|
||
|
|
const select = getSelectComponentVm();
|
||
|
|
sinon.stub(select, '$nextTick');
|
||
|
|
select.resetInputHeight();
|
||
|
|
expect(select.$nextTick.callCount).to.equal(1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not reset height if collapse-tags option is enabled', () => {
|
||
|
|
const select = getSelectComponentVm({ collapseTags: true });
|
||
|
|
sinon.stub(select, '$nextTick');
|
||
|
|
select.resetInputHeight();
|
||
|
|
expect(select.$nextTick.callCount).to.equal(0);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should reset height if both collapse-tags and filterable are enabled', () => {
|
||
|
|
const select = getSelectComponentVm({ collapseTags: true, filterable: true });
|
||
|
|
sinon.stub(select, '$nextTick');
|
||
|
|
select.resetInputHeight();
|
||
|
|
expect(select.$nextTick.callCount).to.equal(1);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|