Vue造輪子-Tabs測試(下)

1. 若是g-tabs裏面不是g-tabs-head，g-tabs-body指望會報錯。

// 目前沒有報錯，因此先改
  // tabs.vue
   if(this.$children.length===0){
        // 這個$children是看子組件，不是子元素
        throw new Error('tabs的子組件應該是tabs-head和tabs-pane,但你沒有寫子組件')
    }

• test裏面也應該期待一個報錯，經過google搜索chai expect error獲得寫法,可是又碰到報錯是異步的問題,接下來咱們又搜索 chai aysnc error 去解決,發現也沒有辦法解決，決定退而求其次把error改爲warn

  // tabs.vue中改爲
   mounted(){
   if(this.$children.length===0){
       // 這個$children是看子組件，不是子元素
       console && console.warn && console.warn('tabs的子組件應該是tabs-head和tabs-pane,但你沒有寫子組件')
       // 這是瀏覽器兼容性的寫法
   }

• 測試就直接放棄了

2. 下面開始測tabs的屬性

• 先測selected屬性

  // tabs-items.vue加上:data-name="name"變得更好測試點
    <template>
        <div class="tabs-item" @click="onClick" :class="classes" :data-name="name">
            <slot></slot>
        </div>
    </template>
    // tabs.test.js 異步代碼測試比較麻煩
    vm.$nextTick(()=>{
      let x = vm.$el.querySelector('.tabs-item[data-name]="${finance}"')
      expect(x.classList.contains('active')).to.be.true
      done()
    })

3. 測試tabs-item組件

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

  it('子組件接收 name 屬性', () => {
    const Constructor = Vue.extend(TabsItem)
    const vm = new Constructor({
      propsData: {
        name: 'xxx',
      }
    }).$mount()
    expect(vm.$el.getAttribute('data-name')).to.eq('xxx')
  })

  it('子組件接收 disabled 屬性', () => {
    const Constructor = Vue.extend(TabsItem)
    const vm = new Constructor({
      propsData: {
        disabled: true,
      }
    }).$mount()
    // expect(vm.$el.classList.contains('disabled')).to.be.true
    const callback = sinon.fake();
    vm.$on('click', callback)
    vm.$el.click()
    expect(callback).to.have.not.been.called
    // 測試覆蓋率,目前是坑以後再填
  })
});

最後，歡迎交流!

<img src="https://i.loli.net/2020/01/27/gS4ZwP6zfAvULYT.jpg" alt="微信" width="400" height="400" align="bottom" /> > 本文由博客一文多發平臺 [OpenWrite](https://openwrite.cn?from=article_bottom) 發佈！