`
zhans52
  • 浏览: 35262 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

JavaScriptUI
阅读更多

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

 代码覆盖率为：

具体没有测到的部分：

分享到：
| portal使用WCM api开发 展示已发布、待审 ...
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics