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

    最后,欢迎交流!

    Vue造*-Tabs测试(下)

上一篇:mac 操作系统使用iterm(2)自动登录远程服务器


下一篇:Pytest学习7-参数化