爲vue-multiselect編寫單元測試

Question

我正在努力解決如何編寫測試vue-multiselect並遇到麻煩。

具體來說，我試圖「點擊」輸入打開下拉（然後選擇一個選項之前），但是沒有什麼工作

I'ved試圖

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路線，所以我watch ING路線和推入routes_visited測試跟蹤更改）