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,可以看到版本信息。

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

      2、执行 npm -v 查看npm是否已经安装以及版本信息

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

      3、安装Karma:任意目录下执行命令

npm install -g karma

          完成后可以看到

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

   

      启动Karma测试安装是否成功,命令 karma start

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

      注:默认会打开chorme浏览器,如果没有找到安装路径就会报错。

      在浏览器中输入:http://localhost:9876查看结果

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

  4、初始化karma配置文件karma.conf.js 命令 karma init

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

      也可以直接修改karma.conf.js

   

     5、安装集成qunit

       5.1 Karma 集成,命令 npm install karma-qunit

      win7 64bint 基于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

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

      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

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

  

    6.4、修改test.js或者src.js

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

   这是成功状态

    

    6.5、修改一个失败状态

ok(4==reverse(-1,2),"ok");

 结果为:

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

karma后台提示为

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

   

     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,我们看到代码测试覆盖绿报告

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

点击src.js

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

  

覆盖率是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;
	}
}

 代码覆盖率为:

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

具体没有测到的部分:

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

相关推荐