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" />