toast组件单元测试

 describe("Toast", () => {
     it("存在.", () => {
         expect(Toast).to.be.exist
     })
 });

 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()
 })

    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 发布！