在上一篇文章当中的第三步创建 test/button.test.js 文件
这里面的 button.test.js 就是测试用例
关于karma.conf.js
image.png上面的就是要加载的文件
看文档 chai
app.js 中写的测试用例
// 单元测试
import chai from 'chai'
import spies from 'chai-spies'
chai.use(spies);
const expect = chai.expect;
try {
{
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
icon: 'setting'
}
});
vm.$mount();
let useElement = vm.$el.querySelector('use')
let href = useElement.getAttribute('xlink:href')
expect(href).to.eq('#i-setting')
vm.$el.remove();
vm.$destroy();
}
{
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
icon: 'setting',
loading: true
}
});
vm.$mount();
let useElement = vm.$el.querySelector('use')
let href = useElement.getAttribute('xlink:href')
expect(href).to.eq('#i-loading')
vm.$el.remove();
vm.$destroy();
}
{
const div = document.createElement('div');
document.body.appendChild(div);
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
icon: 'setting'
}
});
vm.$mount(div);
let svg = vm.$el.querySelector('svg')
let {order} = window.getComputedStyle(svg);
expect(order).to.eq('1')
vm.$el.remove();
vm.$destroy();
}
{
const div = document.createElement('div');
document.body.appendChild(div);
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
icon: 'setting',
iconPosition: 'right'
}
});
vm.$mount(div);
let svg = vm.$el.querySelector('svg')
let {order} = window.getComputedStyle(svg);
expect(order).to.eq('2');
vm.$el.remove();
vm.$destroy()
}
{
//mock
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
icon: 'setting'
}
});
vm.$mount();
let spy = chai.spy(() => {
});
vm.$on('click', spy);
// 希望这个函数被执行
let button = vm.$el;
console.log(button);
button.click();
expect(spy).to.have.been.called()
}
} catch (error) {
window.errors = [error]
} finally {
window.errors && window.errors.forEach((error) => {
console.log(error.message);
})
}
button.test.js
const expect = chai.expect;
import Vue from 'vue'
import Button from '../src/button'
Vue.config.productionTip = false
Vue.config.devtools = false
describe('Button', () => {
it('存在.', () => {
expect(Button).to.be.ok
})
it('可以设置icon.', () => {
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings'
}
}).$mount()
const useElement = vm.$el.querySelector('use')
expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
vm.$destroy()
})
it('可以设置loading.', () => {
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
loading: true
}
}).$mount()
const useElements = vm.$el.querySelectorAll('use')
expect(useElements.length).to.equal(1)
expect(useElements[0].getAttribute('xlink:href')).to.equal('#i-loading')
vm.$destroy()
})
it('icon 默认的 order 是 1', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
}
}).$mount(div)
const icon = vm.$el.querySelector('svg')
expect(getComputedStyle(icon).order).to.eq('1')
vm.$el.remove()
vm.$destroy()
})
it('设置 iconPosition 可以改变 order', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
iconPosition: 'right'
}
}).$mount(div)
const icon = vm.$el.querySelector('svg')
expect(getComputedStyle(icon).order).to.eq('2')
vm.$el.remove()
vm.$destroy()
})
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
})
})
网友评论