win7 64bint 基于Karma+qunit的前端测试架构的搭建

zhans52

浏览: 35851 次
性别:
来自: 上海

最近访客更多访客>>

wangxuezheng888

xiumoo

vv___

qwer_lj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript UI

现在富客户端的东西越来越流行，所以测试也越来越受到重视，我们的测试也从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;
	}
}

代码覆盖率为：

具体没有测到的部分：

分享到：

ubuntu server 12.04 安装 | portal使用WCM api开发展示已发布、待审 ...

2013-12-23 11:58
浏览 3095
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论