win7 64bint 基于Karma+qunit的前端测试架构的搭建
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;}}?代码覆盖率为：
具体没有测到的部分：