vue-multicelect에 대한 쓰기 단위 테스트

vue-multicelect에 대한 쓰기 단위 테스트

vue-multicelect 테스트 작성 방법을 알아보고 있는데 문제가 있습니다.

특히, (옵션을 선택하기 전에) 드롭다운을 열기 위해 입력을 "클릭"하려고 합니다만, 아무것도 동작하지 않습니다.

노력했어

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

브라우저:

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

다른 조합들도 많은데 아무 것도 안 돼요.

유닛 테스트에서 사용하는 방법에 대해 문서를 제공하지 않는 것이 테스트 범위임을 강조하는 라이브러리로서는 이상합니다.

마침내 이 일을 해냈다, 열쇠는.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루트 입력 및 푸시routes_visited테스트에서 변경을 추적합니다.)

언급URL : https://stackoverflow.com/questions/42981848/writing-unit-tests-for-vue-multiselect