JavaScript测试工具之Karma-Jasmine的安装和使用详解


Posted in Javascript onDecember 03, 2015

1.Karma介绍

Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透!

Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果。

2.Jasmine介绍

Jasmine (茉莉)是一款 JavaScript BDD(行为驱动开发)测试框架,它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法,让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说,它是一款不错的测试框架选择。

比较流行的有Qunit和Jasmine,如果你想更详细了解二者的区别,请狠狠的点击Javascript单元测试框架Qunit和Jasmine的比较。

三水点靠木友情提醒大家需要注意点:本文中出现的资料链接、karma的插件安装等,均可能需要翻$墙后才能正确执行。

步骤一:安装Node.JS(版本:v0.12.4, windows-64)

Karma是运行在Node.js之上的,因此我们首先要安装Node.js。到 https://nodejs.org/download/ 下载你系统所需的NodeJS版本,我下载的是windows-64位的msi版。

下载之后,双击 node-v0.12.4-x64.msi 运行并安装,这个就不赘述了, 不断下一步即可, 当然最好将目录改一下。

图1(选择安装内容,默认即可):

JavaScript测试工具之Karma-Jasmine的安装和使用详解

步骤二:安装Karma

运行Node.js的命令行程序:Node.js command prompt:

图2(处于“开始->所有程序->Node.js”中):

JavaScript测试工具之Karma-Jasmine的安装和使用详解

图3(我们将安装到E:\Karma路径下):

 JavaScript测试工具之Karma-Jasmine的安装和使用详解

输入命令安装Karma:

npm install karma --save-dev

图4(Karma安装完毕后):

 JavaScript测试工具之Karma-Jasmine的安装和使用详解

步骤三:安装karma-jasmine/karma-chrome-launcher插件

继续输入npm命令安装karma-jasmine、karma-chrome-launcher插件:

npm install karma-jasmine karma-chrome-launcher --save-dev

图5(karma-jasmine、karma-chrome-launcher安装完毕之后):

 JavaScript测试工具之Karma-Jasmine的安装和使用详解

步骤四:安装karma-cli

karma-cli用来简化karma的调用,安装命令如下,其中-g表示全局参数,这样今后可以非常方便的使用karma了:

npm install -g karma-cli

图6(karma-cli安装完毕之后):

JavaScript测试工具之Karma-Jasmine的安装和使用详解

Karma-Jasmine安装完毕:

图7(安装完毕后,在E:\Karma文件夹下会有一个node_modules目录,里面包含刚才安装的karma、karma-jasmine、karma-chrome-launcher目录,当然还包含了jasmine-core目录):

JavaScript测试工具之Karma-Jasmine的安装和使用详解 

开启Karma: 

输入命令:

karma start

图8(运行后如图所示出现了一行INFO信息,并没有其他提示和动作,因为此时我们没有配置karma的启动参数。后面会加入karma.conf.js,这样karma就会自动启动浏览器并执行测试用例了):

 JavaScript测试工具之Karma-Jasmine的安装和使用详解

图9(手动打开Chrome,输入localhost:9876,如果看到这个页面,证明已经安装成功):

JavaScript测试工具之Karma-Jasmine的安装和使用详解

Karma+Jasmine配置:

执行命令init命令进行配置:

karma init 

图10(所有默认配置问题):

JavaScript测试工具之Karma-Jasmine的安装和使用详解

说明:

1. 测试框架:我们当然选jasmine

2. 是否添加Require.js插件

3. 选择浏览器: 我们选Chrome

4. 测试文件路径设置,文件可以使用通配符匹配,比如*.js匹配指定目录下所有的js文件(实际操作中发现该路径是karma.conf.js文件的相对路径,详见下面我给出的实际测试配置及说明)

5. 在测试文件路径下,需要排除的文件

6. 是否允许Karma监测文件,yes表示当测试路径下的文件变化时,Karma会自动测试

我在虚拟机上测试的例子:

图11(TestFiles和NodeJS处于E盘根目录下,karma.conf.js处于文件夹NodeJS的根目录下):

JavaScript测试工具之Karma-Jasmine的安装和使用详解

以下是karma.conf.js的完整内容:

// Karma configuration
 // Generated on Fri May :: GMT+ (中国标准时间)
 module.exports = function(config) {
 config.set({
  // base path that will be used to resolve all patterns (eg. files, exclude)
  basePath: '../TestFiles',
  // frameworks to use
  // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
  frameworks: ['jasmine'],
  // list of files / patterns to load in the browser
  files: [
  '*.js'
  ],
  // list of files to exclude
  exclude: [
  ],
  // preprocess matching files before serving them to the browser
  // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  preprocessors: {
  },
  // test results reporter to use
  // possible values: 'dots', 'progress'
  // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  reporters: ['progress'],
  // web server port
  port: ,
  // enable / disable colors in the output (reporters and logs)
  colors: true,
  // level of logging
  // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
  logLevel: config.LOG_INFO,
  // enable / disable watching file and executing tests whenever any file changes
  autoWatch: true,
  // start these browsers
  // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
  browsers: ['Chrome'],
  // Continuous Integration mode
  // if true, Karma captures browsers, runs the tests and exits
  singleRun: false
 });
 };

说明:

若所有测试文件均处于同一个目录下,我们可以设置basePath(也是相对于karma.conf.js文件的相对路径),然后指定files,此时files则为basePath目录下的文件相对路径;

当然你也可以不设置basePath,直接使用相对于karma.conf.js文件的文件相对路径,如本例中,我们若保持basePath默认为空,则files配置应为:

files: [
  '../TestFiles/jasmineTest.js',
  '../TestFiles/test.js'
 ] 
 
test.js内容:
 
function TT() {
 return "abc";
} 
 
jasmineTest.js内容:
 
describe("A suite of basic functions", function () {
 it("test", function () {
  expect("abc").toEqual(TT());
 });
});

启动Karma:

karma start karma.conf.js

由于这次加上了配置文件karma.conf.js,因此Karma会按照配置文件中指定的参数执行操作了,由于我们配置的是在Chrome中测试,因此Karma会自动启动Chrome实例,并运行测试用例:

图12(左侧的Chrome是Karma自动启动的,右侧的Node.js command prompt窗口中,最后一行显示了执行结果):

 JavaScript测试工具之Karma-Jasmine的安装和使用详解

图13(如果我们点击图12中的debug按钮,进入debug.html并按F12打开开发者工具,选择Console窗口,我们将能看到jasmine的执行日志):

 JavaScript测试工具之Karma-Jasmine的安装和使用详解

若此时,我们将jasmineTest.js中对于调用TT方法的期望值改为"abcd"(实际为"abc"):

describe("A suite of basic functions", function () {
 it("test", function () {
  expect("abcd").toEqual(TT());
 });
});

由于我们在karma.conf.js中设置了autoWatch为true:

autoWatch: true 

Karma将自动执行测试用例,由于本例测试用例未通过,因此在屏幕上打印出了错误信息,Chrome的Console窗口中的日志信息需要刷新debug.html后显示。

图14(Karma自动检测到文件变化并自动重新执行了测试用例):

JavaScript测试工具之Karma-Jasmine的安装和使用详解

代码覆盖率:

如果你还想查看测试的代码覆盖率,我们可以安装karma-coverage插件,安装命令为:

npm install karma-coverage

图15(安装karma-coverage的过程): 

 JavaScript测试工具之Karma-Jasmine的安装和使用详解

修改karma.conf.js,增加覆盖率的配置:

图16(主要是变动了以下三个配置节点,其他的配置内容不变):

// preprocess matching files before serving them to the browser
  // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  preprocessors: {
   '../TestFiles/test.js':'coverage'
  },
  // test results reporter to use
  // possible values: 'dots', 'progress'
  // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  reporters: ['progress','coverage'],
  coverageReporter:{
   type:'html',
   dir:'../TestFiles/coverage/'
  },

 变动如下:

 在reporters中增加coverage
 preprocessors中指定js文件

 添加coverageReporter节点,将覆盖率报告类型type设置为html,输入目录dir指定到你希望的目录中

此时完整的karma.conf.js如下:

// Karma configuration
// Generated on Fri May 29 2015 19:30:26 GMT+0800 (中国标准时间)
module.exports = function(config) {
 config.set({
 // base path that will be used to resolve all patterns (eg. files, exclude)
 basePath: '',
 // frameworks to use
 // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
 frameworks: ['jasmine'],
 // list of files / patterns to load in the browser
 files: [
  '../TestFiles/jasmineTest.js',
  '../TestFiles/test.js'
 ],
 // list of files to exclude
 exclude: [
 ],
 // preprocess matching files before serving them to the browser
 // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
 preprocessors: {
  '../TestFiles/test.js':'coverage'
 },
 // test results reporter to use
 // possible values: 'dots', 'progress'
 // available reporters: https://npmjs.org/browse/keyword/karma-reporter
 reporters: ['progress','coverage'],
 coverageReporter:{
  type:'html',
  dir:'../TestFiles/coverage/'
 },
 // web server port
 port: 9876,
 // enable / disable colors in the output (reporters and logs)
 colors: true,
 // level of logging
 // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
 logLevel: config.LOG_INFO,
 // enable / disable watching file and executing tests whenever any file changes
 autoWatch: true,
 // start these browsers
 // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
 browsers: ['Chrome'],
 // Continuous Integration mode
 // if true, Karma captures browsers, runs the tests and exits
 singleRun: false
 });
};

执行命令:

karma start karma.conf.js

图17(执行命令后,在配置文件coverageReporter节点中指定的dir中,我们将找到生成的覆盖率报告,karma-coverage还生成了一层子文件夹,对应于执行测试的浏览器+版本号+操作系统版本):

JavaScript测试工具之Karma-Jasmine的安装和使用详解

Javascript 相关文章推荐
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
五种js判断是否为整数类型方式
Dec 03 #Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 #Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 #Javascript
学习JavaScript设计模式(代理模式)
Dec 03 #Javascript
全面解析Bootstrap图片轮播效果
Dec 03 #Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 #Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 #Javascript
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python在非root权限下的安装方法
2018/01/23 Python
解决yum对python依赖版本问题
2019/07/05 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
便利店促销方案
2014/02/20 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
法制报告会主持词
2014/04/02 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书