为vue-multiselect编写单元测试

Question

I'm trying to work out how to write tests for vue-multiselect and having trouble.

Specifically, I'm trying to "click" the input to open the dropdown (before then selecting an option), however nothing is working

I'ved tried

vm.$el.querySelector('.multiselect').click()

and in the browser:

document.querySelector('.multiselect').click()

and lots of other combinations but nothing's working.

Odd for a library which emphasises it's test coverage not to give an docs (I could find on how) to use it in unit tests.

Answer 1

At last got this working, the key was .dispatchEvent(new window.Event('focus')) not .focus() .

Relevant bit of final test:

expect(vm.$el.querySelectorAll('input')).to.have.lengthOf(1)

vm.$el.querySelector('.multiselect').dispatchEvent(new window.Event('focus'))
await tick()
const s = vm.$el.querySelectorAll('.multiselect__element')[2].querySelector('span')
expect(s.innerText).to.equal('Science')
s.dispatchEvent(new window.Event('mousedown'))
await tick()
expect(routes_visited).to.deep.equal(['/s/3-science'])

vm.$el.querySelector('.cross').click()
await tick()
expect(routes_visited).to.deep.equal(['/s/3-science', '/'])

(note my component changes the vue-router route, so I'm watch ing routes and pushing into routes_visited in the test to track changes.)