1. 90前端首页
  2. 前端框架

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
    // 测试覆盖率,目前是坑之后再填
  })
});

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021655259

展开阅读全文

发表评论

登录后才能评论