5.vue造轮子-如何写测试用例

在上一篇文章当中的第三步创建 test/button.test.js 文件
这里面的 button.test.js 就是测试用例

关于karma.conf.js

image.png

上面的就是要加载的文件

看文档 chai

chai API

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

    })
})