javascript - 为 vue-multiselect 编写单元测试

Question

我正在尝试研究如何为 vue-multiselect 编写测试并遇到麻烦。

具体来说，我试图“单击”输入以打开下拉菜单(然后选择一个选项)，但是没有任何效果

我试过

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

在浏览器中:

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

还有许多其他组合，但没有任何效果。

奇怪的是，一个库强调它的测试覆盖率而不提供文档(我可以找到如何)在单元测试中使用它。

Answer 1

最后成功了，关键是 .dispatchEvent(new window.Event('focus')) 而不是 .focus()。

最终测试的相关位:

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', '/'])

(请注意我的组件更改了 vue-router 路由，所以我正在 watching 路由并在测试中推送到 routes_visited跟踪变化。)