toast组件单元测试

1. 先看是否存在

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

2. 看属性,我们要测 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()
    })
   

3. 报异常错误，要用 yarn run dev-test 代替 npm run dev-test

4. 测试 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`
  }
     })
 }
    }