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
// 测试覆盖率,目前是坑之后再填
})
});
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦