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

来源：oschina

链接：https://my.oschina.net/u/4448260/blog/3161588

标签

npm

Vue.js

yarn

Close Button