美文网首页
5.vue造轮子-如何写测试用例

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

作者: 如梦初醒Tel | 来源:发表于2019-07-18 17:31 被阅读0次

在上一篇文章当中的第三步创建 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

    })
})

相关文章

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

    在上一篇文章当中的第三步创建 test/button.test.js 文件这里面的 button.test.js ...

  • 如何写好一份测试用例

    软件测试的同学肯定都写过测试用例,但是如何写出一份高质量的测试用例呢?测试用例有哪些要求呢?为什么要写测试用例呢?...

  • 软件测试基本流程

    1.需求分析(产品经理) 2.编写测试用例(测什么,怎么测) 3.评审测试用例 4.搭建测试环境 5.等待开发提交...

  • 1.软件测试流程

    1.需求分析 2.编写测试用例(测什么,怎么测) 3.评审测试用例 4.搭建测试环境 5.等待开发提交测试包 6....

  • 2019-05-31 程序员修仙进阶标准,你到哪个阶段了?

    闭门造轮子 > 使用别人的轮子 > 开门造轮子 > 分享轮子

  • Postman 接口测试(测试用例)

    在 Postman 里面写接口测试用例其实就是写测试脚本。下面我们来学习如何写一个简单的接口测试用例。 1、获取 ...

  • 可复用测试用例研究(用例库)

    软件测试的关键环节是设计和执行测试用例。测试用例的质量与测试人员的技能、经验以及对被测软件的理解密切相关。如果测...

  • 安全测试

    安全测试用例 常见的安全测试应该能够做到check以下内容 测试用例应该 包含每个HTTP参数的SQL注入测试 测...

  • 用例加载与组织(unittest)

    1. 通过测试套件TestSuite组织测试用例 1.创建测试套件2.测试用例加载到测试套件,加入方式测试类('测...

  • 造轮子之仿射变换

    有人说,我们不应该再造轮子;也有人说,学习怎么造轮子可以带来更深的理解。我说,用轮子有用轮子的乐趣,造轮子有造轮子...

网友评论

      本文标题:5.vue造轮子-如何写测试用例

      本文链接:https://www.haomeiwen.com/subject/ofbllctx.html