标签:Vue const name Tabs vm tabs 组件 expect 轮子
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,const,name,Tabs,vm,tabs,组件,expect,轮子 来源: https://www.cnblogs.com/ories/p/12239057.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。