为 vue-multiselect 编写单元测试

【问题标题】：writing unit tests for vue-multiselect为 vue-multiselect 编写单元测试
【发布时间】：2017-08-16 08:23:53
【问题描述】：

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

具体来说，我正在尝试“单击”输入以打开下拉列表（在选择选项之前），但是没有任何效果

我试过了

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

在浏览器中：

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

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

对于一个强调其测试覆盖率的库不提供文档（我可以找到如何在单元测试中使用它）来说是很奇怪的。

【问题讨论】：

标签： javascript unit-testing vue.js vuejs2

【解决方案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 以跟踪更改。）

【讨论】：