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 發佈！