mirror of https://github.com/ElemeFE/element
test: add autocomplete highlight-first-item (#14368)
add unit test for https://github.com/ElemeFE/element/pull/14269pull/14375/head
parent
1fd5964b70
commit
28873807c1
|
@ -570,4 +570,54 @@ describe('Autocomplete', () => {
|
||||||
done();
|
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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue