前言
上次谈了用 chai
和 chai-spies
来进行单元测试,但是这种测试方法存在着一些不方便之处,每次改动代码之后都需要刷新浏览器,打开开发者工具,来查看有没有报错。
那么,有没有一种方法,使这些流程自动化,自动将测试的结果输出到某个可见的地方(例如:终端)?这次就来尝试完成这个过程。
用到的工具
这次我们需要用到:
- Karma:卡玛是一个测试运行器,它可以呼起浏览器,加载测试脚本,然后运行测试用例。
- Mocha:摩卡是一个单元测试框架/库,它可以用来写测试用例。
- Sinon:西农是一个 spy / stub / mock 库,用以辅助测试。
安装
执行下面的命令安装工具。别一个一个地看包名了,全都安装就完事了。
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies
配置 Karma
新建一个 karma.conf.js,并将下面的内容复制进去。
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'sinon-chai'],
client: {
chai: {
includeStack: true
}
},
// list of files / patterns to load in the browser
files: ['dist/**/*.test.js', 'dist/**/*.test.css'],
// list of files / patterns to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['ChromeHeadless'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
};
重写测试用例
新建一个 test 文件夹,并在里面建立一个 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('可以接受 color 作为类名', () => {
const div = document.createElement('div');
document.body.appendChild(div);
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
color: 'red'
}
}).$mount(div);
const element = vm.$el;
//我断言这个生成的 button 有一个类名叫 'red' 为真
expect(element.classList.contains('red')).to.eq(true);
vm.$el.remove();
vm.$destroy();
});
it('点击 button 触发 click 事件', () => {
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
color: 'red'
}
}).$mount();
//间谍函数
const callback = sinon.fake();
vm.$on('click', callback);
vm.$el.click();
expect(callback).to.have.been.called;
});
});
和之前的测试用例类似,就稍微改变了结构。
创建测试脚本
为了方便启动,我们将启动命令写到 package.json
里面。
"scripts": {
"dev-test": "parcel watch test/* --no-cache & karma start",
"test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
}
谈谈两个命令中的两个参数的意义。
- --no-cache : 这是在用
parcel
打包过程中遇到的坑,如果不加这个参数,就会用到之前打包的缓存,有可能会出错。 - --no-minify : 另一个坑,不加这个参数,组件中的
<slot></slot>
标签打包时会被忽略掉,会造成页面错误。
使用
运行一次查看结果
如果只想看看测试用例的结果就运行下面的命令。
npm run test
从图中的运行结果可以看出,在输入这个命令之后,会进行组件打包、读取测试用例文件、开启服务器、启动浏览器、运行测试用例等等一系列操作,最后将运行结果输出。图中显示一共有3个测试,通过了3个,也就是测试用例全部通过。
监测测试结果
如果想随时地监测测试用例文件的运行结果就用这个命令。
npm run dec-test
它启动之后,会先输入当前测试用例的运行结果,然后进行监测,当测试用例文件发送变化时,它就会再一次的运行并输入结果。
我们尝试将测试颜色作为类名的测试改一下。
it('可以接受 color 作为类名', () => {
const div = document.createElement('div');
document.body.appendChild(div);
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
color: 'black'
}
}).$mount(div);
const element = vm.$el;
//我断言这个生成的 button 有一个类名叫 'red' 为真
expect(element.classList.contains('red')).to.eq(true);
vm.$el.remove();
vm.$destroy();
});
来看看终端有什么变化。
这里我们看到又运行了一次测试用例,显示有一个测试失败了,也就是我们刚刚改的那一个。
我们可以利用这个功能,来协助我们来写测试用例。
如何更自动化?
虽然我们现在能够在本地开启监听服务,随时检查测试用例的通过情况,但是还是要手动地开启服务。
那么,有没有一种办法,在云端自动进行测试呢?下次来讲讲将代码上传至 Github 后,利用云服务自动测试代码,并将结果通知给我们。