示例
相关工具：
karma—打开浏览器
Mocha—describe,it
chai—expect
sinon—fake
sinon-chai—calledWith
ps:如果测css 需要挂载到页面中否则没有css(创建div 将组件mount)
1.测试组件存在
1
2
3
4
5
| describe('Button', () => {
it('存在.', () => {
expect(Button).to.be.ok
})
}）
|
2.测试props传入组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| describe('props', () => {
it('接受span属性', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const Constructor = Vue.extend(Col)
const vm = new Constructor({
propsData: {
span: 1
}
}).$mount(div)
expect(vm.$el.classList.contains('cssClass')).to.equal(true)
vm.$el.remove()
vm.$destroy()
})
})
|
3.测试事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| describe('Button', () => {
it('点击 button 触发 click 事件', () => {
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
}
}).$mount()
const callback = sinon.fake();
vm.$on('click', callback)
vm.$el.click()
expect(callback).to.have.been.called
})
}）
|
4.测试CSS样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| describe('Row', () => {
it('接受gutter属性', (done) => {
Vue.component('g-row', Row)
Vue.component('g-col', Col)
const div = document.createElement('div')
document.body.appendChild(div)
div.innerHTML = `
<g-row gutter="20">
<g-col span="12"></g-col>
<g-col span="12"></g-col>
</g-row>
`
const vm = new Vue({
el: div
})
setTimeout(() => {
const cols = vm.$el.querySelectorAll('.col')
const rows = vm.$el.querySelector('.row')
expect(getComputedStyle(cols[0]).paddingLeft).to.eq('10px')
expect(getComputedStyle(cols[1]).paddingRight).to.eq('10px')
expect(getComputedStyle(rows).marginRight).to.eq('-10px')
expect(getComputedStyle(rows).marginLeft).to.eq('-10px')
vm.$el.remove()
vm.$destroy()
done()
}, 0)
})
})
|