624 lines
22 KiB
Vue
624 lines
22 KiB
Vue
|
import { createVue, triggerClick, destroyVM, triggerKeyDown } from '../util';
|
|||
|
|
|
|||
|
|
describe('Autocomplete', () => {
|
|||
|
|
let vm;
|
|||
|
|
afterEach(() => {
|
|||
|
|
destroyVM(vm);
|
|||
|
|
});
|
|||
|
|
it('create', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<div>
|
|||
|
|
<button class="btn">a</button>
|
|||
|
|
<el-autocomplete
|
|||
|
|
ref="autocomplete"
|
|||
|
|
v-model="state"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
placeholder="请输入内容autocomplete1"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
let elm = vm.$el;
|
|||
|
|
let inputElm = elm.querySelector('input');
|
|||
|
|
inputElm.focus();
|
|||
|
|
|
|||
|
|
expect(inputElm.getAttribute('placeholder')).to.be.equal('请输入内容autocomplete1');
|
|||
|
|
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
const suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;
|
|||
|
|
expect(suggestions.style.display).to.not.equal('none');
|
|||
|
|
expect(suggestions.querySelectorAll('.el-autocomplete-suggestion__list li').length).to.be.equal(4);
|
|||
|
|
|
|||
|
|
triggerClick(document);
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
expect(suggestions.style.display).to.be.equal('none');
|
|||
|
|
done();
|
|||
|
|
}, 500);
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
it('select', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
v-model="state"
|
|||
|
|
ref="autocomplete"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
placeholder="请输入内容autocomplete2"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
const autocomplete = vm.$refs.autocomplete;
|
|||
|
|
const elm = vm.$el;
|
|||
|
|
const inputElm = elm.querySelector('input');
|
|||
|
|
const spy = sinon.spy();
|
|||
|
|
|
|||
|
|
autocomplete.$on('select', spy);
|
|||
|
|
inputElm.focus();
|
|||
|
|
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
const suggestions = autocomplete.$refs.suggestions.$el;
|
|||
|
|
const suggestionList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
|
|||
|
|
suggestionList[1].click();
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
expect(inputElm.value).to.be.equal('Hot honey 首尔炸鸡（仙霞路）');
|
|||
|
|
expect(vm.state).to.be.equal('Hot honey 首尔炸鸡（仙霞路）');
|
|||
|
|
expect(spy.withArgs().calledOnce).to.be.true;
|
|||
|
|
expect(suggestions.style.display).to.be.equal('none');
|
|||
|
|
done();
|
|||
|
|
}, 500);
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
it('input', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
ref="autocomplete"
|
|||
|
|
v-model="state"
|
|||
|
|
:trigger-on-focus="false"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
const autocomplete = vm.$refs.autocomplete;
|
|||
|
|
const input = autocomplete.$refs.input;
|
|||
|
|
input.$emit('input', '三');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
expect(vm.state).to.be.equal('三');
|
|||
|
|
expect(autocomplete.suggestions[0].value).to.be.equal('三全鲜食（北新泾店）');
|
|||
|
|
input.$emit('input', '');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
expect(vm.state).to.be.equal('');
|
|||
|
|
expect(autocomplete.suggestions.length).to.be.equal(0);
|
|||
|
|
done();
|
|||
|
|
}, 500);
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
describe('enter select', () => {
|
|||
|
|
const createVm = (selectWhenUnmatched = false) => {
|
|||
|
|
return createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
ref="autocomplete"
|
|||
|
|
v-model="state"
|
|||
|
|
@select="handleSelect"
|
|||
|
|
:trigger-on-focus="false"
|
|||
|
|
:select-when-unmatched="selectWhenUnmatched"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: '',
|
|||
|
|
selectWhenUnmatched: selectWhenUnmatched,
|
|||
|
|
item: {}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
|
|||
|
|
];
|
|||
|
|
},
|
|||
|
|
handleSelect(item) {
|
|||
|
|
this.item = item;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
};
|
|||
|
|
it('select', done => {
|
|||
|
|
vm = createVm();
|
|||
|
|
const autocomplete = vm.$refs.autocomplete;
|
|||
|
|
const input = autocomplete.$refs.input;
|
|||
|
|
input.$el.querySelector('input').focus();
|
|||
|
|
input.$emit('input', '三');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
triggerKeyDown(input.$el, 40); // down
|
|||
|
|
setTimeout(() => {
|
|||
|
|
triggerKeyDown(input.$el, 13); // enter
|
|||
|
|
setTimeout(() => {
|
|||
|
|
expect(vm.item.address).to.be.equal('长宁区新渔路144号');
|
|||
|
|
done();
|
|||
|
|
}, 200);
|
|||
|
|
}, 200);
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
it('select unmatched', done => {
|
|||
|
|
vm = createVm(true);
|
|||
|
|
const autocomplete = vm.$refs.autocomplete;
|
|||
|
|
const input = autocomplete.$refs.input;
|
|||
|
|
input.$emit('input', '关键字');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
expect(autocomplete.suggestions.length).to.be.equal(0);
|
|||
|
|
triggerKeyDown(input.$el, 13); // enter
|
|||
|
|
setTimeout(() => {
|
|||
|
|
expect(autocomplete.highlightedIndex).to.be.equal(-1);
|
|||
|
|
expect(vm.item.value).to.be.equal('关键字');
|
|||
|
|
done();
|
|||
|
|
}, 500);
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
it('props', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
v-model="state"
|
|||
|
|
ref="autocomplete"
|
|||
|
|
value-key="address"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
placeholder="请输入内容autocomplete2"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'name': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'name': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'name': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'name': '泷千家(天山西路店)', 'address': '天山西路438号' }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
const autocomplete = vm.$refs.autocomplete;
|
|||
|
|
const elm = vm.$el;
|
|||
|
|
const inputElm = elm.querySelector('input');
|
|||
|
|
const spy = sinon.spy();
|
|||
|
|
|
|||
|
|
autocomplete.$on('select', spy);
|
|||
|
|
inputElm.focus();
|
|||
|
|
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
const suggestions = autocomplete.$refs.suggestions.$el;
|
|||
|
|
const suggestionList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
|
|||
|
|
expect(suggestionList[1].innerHTML === '上海市长宁区淞虹路661号');
|
|||
|
|
suggestionList[1].click();
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
expect(inputElm.value).to.be.equal('上海市长宁区淞虹路661号');
|
|||
|
|
expect(vm.state).to.be.equal('上海市长宁区淞虹路661号');
|
|||
|
|
expect(spy.withArgs().calledOnce).to.be.true;
|
|||
|
|
expect(suggestions.style.display).to.be.equal('none');
|
|||
|
|
done();
|
|||
|
|
}, 500);
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
it('highlight', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
ref="autocomplete"
|
|||
|
|
v-model="state"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
placeholder="请输入内容autocomplete3"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
|
|||
|
|
{ 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
|
|||
|
|
{ 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
|
|||
|
|
{ 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
|
|||
|
|
{ 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
|
|||
|
|
{ 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
|
|||
|
|
{ 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
|
|||
|
|
{ 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
|
|||
|
|
{ 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
|
|||
|
|
{ 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
|
|||
|
|
{ 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },
|
|||
|
|
{ 'value': 'NONO JUICE 鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
|
|||
|
|
{ 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },
|
|||
|
|
{ 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
|
|||
|
|
{ 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
|
|||
|
|
{ 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
|
|||
|
|
{ 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
|
|||
|
|
{ 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
|
|||
|
|
{ 'value': '钱记', 'address': '上海市长宁区天山西路' }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
const autocomplete = vm.$refs.autocomplete;
|
|||
|
|
const inputElm = autocomplete.$el.querySelector('input');
|
|||
|
|
|
|||
|
|
inputElm.focus();
|
|||
|
|
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
autocomplete.highlight(8);
|
|||
|
|
vm.$nextTick(_ => {
|
|||
|
|
const suggestions = autocomplete.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');
|
|||
|
|
let suggestionsList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
|
|||
|
|
let highlightedItem = suggestionsList[8];
|
|||
|
|
expect(highlightedItem.classList.contains('highlighted')).to.be.true;
|
|||
|
|
expect(suggestions.scrollTop === highlightedItem.scrollHeight).to.be.true;
|
|||
|
|
done();
|
|||
|
|
});
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
it('highlight out of bounds', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
ref="autocomplete"
|
|||
|
|
v-model="state"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
placeholder="请输入内容autocomplete3"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
|
|||
|
|
{ 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
|
|||
|
|
{ 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
|
|||
|
|
{ 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
|
|||
|
|
{ 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
|
|||
|
|
{ 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
|
|||
|
|
{ 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
|
|||
|
|
{ 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
|
|||
|
|
{ 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
const autocomplete = vm.$refs.autocomplete;
|
|||
|
|
let inputElm = vm.$el.querySelector('input');
|
|||
|
|
inputElm.focus();
|
|||
|
|
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
autocomplete.highlight(15);
|
|||
|
|
vm.$nextTick(_ => {
|
|||
|
|
const suggestions = autocomplete.$refs.suggestions.$el;
|
|||
|
|
const suggestionsList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
|
|||
|
|
let highlightedItem = suggestionsList[11];
|
|||
|
|
expect(highlightedItem.className).to.be.equal('highlighted');
|
|||
|
|
done();
|
|||
|
|
});
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
it('triggerOnFocus', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
ref="autocomplete"
|
|||
|
|
v-model="state"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
:trigger-on-focus="false"
|
|||
|
|
placeholder="请输入内容autocomplete1"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
let inputElm = vm.$el.querySelector('input');
|
|||
|
|
inputElm.focus();
|
|||
|
|
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
let suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;
|
|||
|
|
expect(suggestions.style.display).to.be.equal('none');
|
|||
|
|
done();
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
it('event:focus & blur', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
ref="input"
|
|||
|
|
v-model="state"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
:trigger-on-focus="false"
|
|||
|
|
placeholder="请输入内容autocomplete1"
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
var restaurants = this.restaurants;
|
|||
|
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|||
|
|
cb(results);
|
|||
|
|
},
|
|||
|
|
createFilter(queryString) {
|
|||
|
|
return (restaurant) => {
|
|||
|
|
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
loadAll() {
|
|||
|
|
return [
|
|||
|
|
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
|||
|
|
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
|||
|
|
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
|||
|
|
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.restaurants = this.loadAll();
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
|
|||
|
|
const spyFocus = sinon.spy();
|
|||
|
|
const spyBlur = sinon.spy();
|
|||
|
|
|
|||
|
|
vm.$refs.input.$on('focus', spyFocus);
|
|||
|
|
vm.$refs.input.$on('blur', spyBlur);
|
|||
|
|
vm.$el.querySelector('input').focus();
|
|||
|
|
vm.$el.querySelector('input').blur();
|
|||
|
|
|
|||
|
|
vm.$nextTick(_ => {
|
|||
|
|
expect(spyFocus.calledOnce).to.be.true;
|
|||
|
|
expect(spyBlur.calledOnce).to.be.true;
|
|||
|
|
done();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
it('can highlight first item', done => {
|
|||
|
|
vm = createVue({
|
|||
|
|
template: `
|
|||
|
|
<el-autocomplete
|
|||
|
|
ref="autocomplete"
|
|||
|
|
v-model="state"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
highlight-first-item
|
|||
|
|
></el-autocomplete>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
restaurants: [],
|
|||
|
|
state: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
const opts = [
|
|||
|
|
{ 'value': '1' },
|
|||
|
|
{ 'value': '11' },
|
|||
|
|
{ 'value': '2' },
|
|||
|
|
{ 'value': '22' }
|
|||
|
|
];
|
|||
|
|
cb(
|
|||
|
|
queryString
|
|||
|
|
? opts.filter(opt => opt.value.indexOf(queryString) >= 0)
|
|||
|
|
: opts
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
let elm = vm.$el;
|
|||
|
|
let inputElm = elm.querySelector('input');
|
|||
|
|
inputElm.focus();
|
|||
|
|
|
|||
|
|
const autocomplete = vm.$refs.autocomplete;
|
|||
|
|
const input = autocomplete.$refs.input;
|
|||
|
|
input.$emit('input', '1');
|
|||
|
|
|
|||
|
|
setTimeout(_ => {
|
|||
|
|
const suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;
|
|||
|
|
const items = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
|
|||
|
|
|
|||
|
|
expect(items.length).to.equal(2);
|
|||
|
|
expect(items[0].classList.contains('highlighted')).to.be.true;
|
|||
|
|
|
|||
|
|
done();
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
});
|