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

本文由博客一文多发平台 OpenWrite 发布！