现在富客户端的东西越来越流行,所以测试也越来越受到重视,我们的测试也从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; } }
代码覆盖率为:
具体没有测到的部分:
相关推荐
软件测试_基于karma+webpack实现的vue单元测试框架
安装最简单的方法是通过运行将karma-qunit保留在package.json作为devDependency npm install karma-qunit --save-dev配置在您的karma.conf.js文件的frameworks数组中添加qunit 。 然后,在plugins数组中,添加karma-...
这是karma+karma-jasmine+karma-requirejs+requirejs离线包,如果不能上外网可以离线安装
#Karma Qunit 示例 使用 Karma 和 Qunit 的示例项目。 ##安装 您需要安装 NodeJs,然后安装 Karma。 首先,全局安装 Karma npm install -g karma 。 然后全局安装 Karma cli npm install -g karma-cli 。 准备...
karma-webpack-example, Karma + web pack + mocha + + 伊斯坦布尔 karma-webpack-exampleKarma + web pack + mocha + + 伊斯坦布尔##Installationnpm install运行 npm run test 删除
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。 换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试。...
业力webpack的例子 业力+ Webpack +摩卡+柴+伊斯坦布尔 提示:该示例仍然显示了一种有效的方法,...> karma-webpack-example@1.0.0 test /Users/d060690/karma-webpack-example > node ./node_modules/karma/bin/karm
$ npm install --save-dev karma karma-jasmine karma-chrome-launcher开始业力 $ karma start笔记生成 karma.conf.js 文件 $ karma init - 允许您为单元测试注入和模拟 Angular 服务describe( title , function ) -...
本篇文章主要介绍了karma+webpack搭建vue单元测试环境的方法示例,这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境。感兴趣的小伙伴们可以参考一下
如何设置 Mocha、Karma 和 webpack 进行测试的示例按照 entry.tests.js 中的评论进行操作跑步git clone npm install npm run tests
基于Karma模型的熔池凝固过程中枝晶生长的相场模拟手把手对Karma相场求解原理进行教学,文中的求解方法很细致对于小白有很大帮助。注意:此教程非代码。但是对编程原理有很大的启发作用
使用 angular、requirejs、couchpotato(用于延迟加载)进行项目设置并使用 karma + jasmine 进行测试。 要运行该项目,请进入 grunt 文件夹并键入: 咕噜咕噜的业力 您不需要下载任何依赖项,因为节点模块已在此...
使用Karma + Jasmine + Grunt引导项目的基本配置。 适用于Grunt插件 当前版本使用karma@0.13.x 。 有关使用旧版本的信息,请参阅grunt-karma的旧版本。 先决条件 Grunt&Grunt-cli已安装并在命令行上工作。 入门 ...
Karma + SystemJS示例
因果qunit夹具 npm test
使用Angular + Karma + Jasmine可以进行前端的单体测试,从前面的文章中我们了解到了Karma的工作原理,它会启动一个指定种类的浏览器,然后在此浏览器中运行测试用例。如果需要进行持续集成,比如结合Jenkins或者...
Karma:一个测试运行器,用于启动浏览器,运行测试案例并将结果报告给我们。该工具的主要作用是将项目运行在各种主流Web浏览器进行测试。 Mocha:一个测试框架。可结合chai断言库使用。 Chai:一个测试断言库,提供...
春假Spring + Resteasy + Maven + JUnit + Mockito + AngularJS + Karma + Jasmine + Wildfly POC 这是一个使用上述技术的 POC。 该项目已使用 Maven 构建,并设置为在 Wildfly 8.x 中运行。 要对其进行测试,请配置...