toast组件单元测试
describe("Toast", () => {
it("存在.", () => {
expect(Toast).to.be.exist
})
});
看属性,我们要测 ToastVue 和 plugin.js
describe("Toast", () => {
it("存在.", () => {
expect(Toast).to.be.exist
})
describe("props",function () {
this.timeout(15000) // 设置15秒关闭
it("接收 autoClose", (done)=>{
let div = document.createElement("div")
document.body.appendChild(div)
const Constructor = Vue.extend(Toast)
const vm = new Constructor(
{
propsData:{
autoClose: true,
autoCloseDelay: 1
}
}
).$mount(div)
setTimeout(()=>{
expect(document.body.contains(vm.$el)).to.eq(false)
done()
},6000)
})
})
});
// 进一步优化,变成关闭的时候进行测试,不需要设置6秒
vm.$on("close",()=>{
expect(document.body.contains(vm.$el)).to.eq(false)
done()
})
报异常错误,要用 yarn run dev-test 代替 npm run dev-test
测试 closeButton。
it("接收 closeButton", ()=>{
const callback = sinon.fake();
const Constructor = Vue.extend(Toast)
const vm = new Constructor({
propsData: {
closeButton: {
text: "关闭吧",
callback,
},
}
}).$mount()
let closeButton = vm.$el.querySelector(".close")
expect(closeButton.textContent.trim()).to.eq("关闭吧")
closeButton.click()
expect(callback).to.have.been.called
})
这里测试后的时候出现 warning,Cannot read property "style" of undefined,通过修改 toast.vue 中代码解决
methods: {
updateStyles () {
this.$nextTick(() => {
if(this.$refs.toast && this.$refs.line){
this.$refs.line.style.height =
`${this.$refs.toast.getBoundingClientRect().height}px`
}
})
}
}
本文由博客一文多发平台 OpenWrite 发布!