toast组件单元测试

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