win7 64bint 基于Karma+qunit的前端测试架构的搭建
83394193 2013-12-23
现在富客户端的东西越来越流行，所以测试也越来越受到重视，我们的测试也从alert时代转变到传统的测试时代，经过比较发现可以用Karma(基于Nodejs)的Karma coverage做覆盖测试，同时，也可以集成jasmine(Karma默认方式)或qunit做测试，由于jasmine只能在NodeJs后台看输出，所以qunit还是不错的。
系统环境：
win7 64bit
1、安装Nodejs官网下载最新版本，安装完成之后再cmd窗口中执行 node -v，可以看到版本信息。
2、执行 npm -v 查看npm是否已经安装以及版本信息
3、安装Karma：任意目录下执行命令
npm install -g karma
完成后可以看到
启动Karma测试安装是否成功，命令 karma start
注：默认会打开chorme浏览器，如果没有找到安装路径就会报错。
在浏览器中输入：http://localhost:9876查看结果
4、初始化karma配置文件karma.conf.js 命令 karma init
也可以直接修改karma.conf.js
5、安装集成qunit
5.1 Karma 集成，命令 npm install karma-qunit
5.2下载Qunit js和css。
6、自动化单元测试
6.1 创建文件(我们需要测试的源文件)；
用于实现某种业务逻辑的文件，就是我们平时写的js脚本，有一个需求，输入两个参数，如果第一个参数比第二个大就返回第一个减第二个，否则返回0。
function reverse(a,b){
if(a>b){
return a-b;
}else{
return 0;
}
}
6.2 创建测试文件(编写测试脚本的文件)；
test('减法测试', function() {
ok(1==reverse(2,1),"ok");
ok(0==reverse(2,2),"ok");
ok(0==reverse(-1,2),"ok");
});6.3 创建测试html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="jscss/qunit-1.12.0.css">
<script type="text/javascript" src="jscss/qunit-1.12.0.js"></script>
<script type="text/javascript" src="src.js"></script>
<script type="text/javascript" src="test.js"></script>
<body>
<h1 id="qunit-header">减法</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>运行测试html
6.3 修改karma.conf.js配置文件。
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: ['*.js'],
exclude: ['karma.conf.js'],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
captureTimeout: 60000,
singleRun: false
});
};然后启动Kamar
6.4、修改test.js或者src.js
这是成功状态
6.5、修改一个失败状态
ok(4==reverse(-1,2),"ok");
结果为:
karma后台提示为
7、集成覆盖测试
7.1输入命令
npm install karma-coverage
7.2 修改配置文件 karma.conf.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['qunit'],
files: ['*.js'],
exclude: ['karma.conf.js'],
reporters: ['progress','coverage'],
preprocessors:{'src.js': 'coverage'},
coverageReporter:{
type : 'html',
dir : 'coverage/'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
captureTimeout: 60000,
singleRun: false
});
};
7.3 启动karm，在工程目录下面找到index.html文件，coverage/chrome/index.html，我们看到代码测试覆盖绿报告
点击src.js
覆盖率是100%，说明我们src.js的功能做了完整的测试，接下来我们修改if else分支
function reverse(a,b){
if(typeof(a)!=="number"||typeof(b)!=="number") return -1;
if(a>b){
return a-b;
}else{
return 0;
}
}代码覆盖率为：
具体没有测到的部分：
