前言
为什么我们需要测试?
让产品可以快速迭代,同时还能保持高质量
对于一些相对稳定的系统级别页面,自动化测试在提高测试的效率的方面起到非常重要的作用。前端的自动化测试主要包括:浏览器测试和单元测试。Vue官方脚手架自带自动化测试配置,并帮助你完成对组件,函数等的自动化测试。
什么是持续集成?它和持续部署有什么区别?
代码集成到主分支需要经过一系列的自动化测试,当测试都通过之后,方可执行自动化部署,否则不能完成集成。这说明了自动化测试的重要性,我们不能等测试工程师去发现问题。
在Vue脚手架当中,Karma和NightWatch分别对应着单元测试和e2e测试。单元测试更多是面向JS功能逻辑的检验,而NightWatch更多是面对业务逻辑的检验。
单元测试
代码的单元测试主要针对某些核心功能的某些函数进行测试。vue官方推荐是使用karma,mocha和chai等。karma并不是一个测试框架,也不是一个断言库。它可以运行HTTP Server,运行HTML文件在你喜欢的测试框架上。不仅仅只是运行测试,还可以计算测试的覆盖率。mocha是测试框架,专门实现各个单元划分测试。chai是典型的断言库。
vue单元测试
npm run unit # 运行单元测试
Karma
Karma是一个专门的测试运行器(runner),它不是一个测试框架框架,也不是以一个断言库。Karma兼容Jasmine,Mocha和QUnit,可以集成mocha,webpack等功能,成为以Karma为平台的单元测试,官方选择的事mocha的测试框架和chai的断言库。它拥有一些测试插件:
karma-webpack 用webpack预处理文件
karma-coverage 测试覆盖率
karma-mocha 接入mocha测试框架
karma-spec-reporter 输出报告
karma-phantomjs-launcher 控制PhantomJS
karma-phantomjs-shim 给PhantomJS兼容的控制
karma-coverage是基于istanbul。这些插件集成在karma这个runner,把webpack打包的vue项目,测试里组件实现的功能,包括组件库,业务逻辑和请求范围。它的配置文件karma.conf.js里面默认配置了很多插件的内容,基本上不需要调整。
var webpackConfig = require('../../build/webpack.test.conf');
module.exports = function (config) {
config.set({
browsers: ['PhantomJS'], // 测试服务浏览器
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], // 测试框架
reporters: ['spec', 'coverage'], // 报告输出
files: ['./index.js'], // 文件入口,过滤掉index.html
preprocessors: {
'./index.js': ['webpack', 'sourcemap'] // 预处理器
},
webpack: webpackConfig, // 专门测试webpack配置
webpackMiddleware: {
noInfo: true,
},
coverageReporter: {
dir: './coverage', // 覆盖率配置
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' },
]
},
});
};
Mocha
mocha本身只是一个单元测试框架,可以兼容第三方断言库,包括:
should.js
expect.js
chai
better-assert
unexpected
在Vue开发框架中位于specs(specifications)文件底下,可以针对某个组件或者某个js进行测试。
import Vue from 'vue';
import Hello from '@/components/Hello';
describe('Hello.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(Hello);
const vm = new Constructor().$mount();
expect(vm.$el.querySelector('.hello h1').textContent)
.to.equal('Welcome to Your Vue.js App');
});
});
其中,describe和it是mocha的语法结构,describe是这对某个组件或者函数的名字描述,测试脚本里面应该包括一个或多个describe块,每个describe块应该包括一个或多个it块。it是对它需要完成某些功能的描述,它里面是具体的测试用例。在测试框架中,describe,it, expect和sinon都是全局方法。
Chai
Chai也就是一个非常简单的断言库,所谓的断言,就是预期某些执行结果符合你自己的要求。所有的测试用例都应该含有一句或多句的断言。
expect(vm.$el.querySelector('.hello h1').textContent)
.to.equal('Welcome to Your Vue.js App');
上面这句话的含义,就是在实例化了Hello这个组件之后,针对它某个dom上绑定的文字进行断言,保证了数据绑定后的文字显示。同理,也可以使用在某些js实现某个功能,对它进行自动化测试。
vue-test-utils
vuejs/vue-test-utils是官方的辅助测试库。它其实即是将组件实例化的过程进行封装,帮你模拟它组件实例化过程。shallow这个函数把组件List实例化,并传入props等参数,这样,你可以断言数据绑定的结果。
const items = ['', '']
const wrapper = shallow(List, {
propsData: { items }
})
expect(wrapper.findAll('li').length).to.equal(items.length)
vue-router和vuex的单元测试问题
项目往往都是使用vuex和vue-router进行异步获取数据,需要外部依赖。这时,我们需要inject-loader来实现对vue组件对象内部的数据模拟。假设我们有这么一个组件,它引用了一个服务,可以是同步或异步(promise),这个对象会被整体替换。
<!-- example.vue -->
<template>
<div class="msg">{{ msg }}</div>
</template>
<script>
// this dependency needs to be mocked
import SomeService from '../service'
export default {
data () {
return {
msg: SomeService.msg
}
}
}
</script>
首先你要安装inject-loader,通过行内写法注入该组件。
npm install inject-loader@^2.0.0 --save-dev
const ExampleInjector = require('!!vue-loader?inject!./example.vue')
在对应的spec.js
中添加了需要注入的对象。../service
是在组件中的依赖对象,它的结果会被替换。
const ExampleWithMocks = ExampleInjector({
// mock it
'../service': {
msg: 'Hello from a mocked service!'
}
})
端对端测试
单元测试更多是对某个组件或者js进行功能测试。端对端测试(e2e)用于模拟整个业务流程的进行自动化测试(填报,增删查改等)。vue官方推荐是使用nightwatch,它同样只是个runner,默认配置chromedriver,phantomjs。
NightWatch
NightWatch是一个专门的端对端测试运行器(runner),它的配置文件nightwatch.conf.js会设置对应的命令参数,拼接到nightwatch的命令行操作,详情参考官网。
它依赖于浏览器控制器selenium,而selenium是一个.jar后缀的文件,需要java的运行环境。所以你需要安装java并配置好环境变量。然而,selenium需要对应的driver配合来操控浏览器。
执行测试
default e2e test类似单元测试中的describe和it的测试描述,browser则是传入的浏览器对象,这个对象可以是chrome,也可以是firefox,由selenium控制。url说明的是跳到目标路径,waitForElementVisible说明的是等待5000ms直到id为app的dom出现,然后,assert帮助你进行断言某个dom的内容。
module.exports = {
'default e2e tests': function test(browser) {
const devServer = browser.globals.devServerURL;
browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.assert.elementPresent('.hello')
.assert.containsText('h1', 'Welcome to Your Vue.js App')
.assert.elementCount('img', 1)
.end();
},
};
综上所述,e2e测试的写法很简单,它相较于单元测试得功能检验,更多是浏览器外的控制,针对某些业务流程进行浏览器的操作验证。以前测试工程师要花十分钟完成的“测试流程”,我们可以快速得模拟出来。
正在做测试的朋友可以进来交流,群里给大家整理了大量学习资料和面试题项目简历等等....