首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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测试工具之Karma-Jasmine的安装和使用详解

- Author -

赖祥燃

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
Jun 24 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
Apr 03 Javascript
vue实现树状表格效果
Dec 29 Vue.js
五种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
Tablespace(1) 记事本(1) 内置函数(1) Spring Security(2) Navicat(1) 自定义函数(1) V Rising(1) procedure(1) maven(2) Android Gradle(1)
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
javascript编程起步（第三课）
2007/02/27 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
Javascript Objects详解
2014/09/04 Javascript
AngularJs  unit-testing（单元测试）详解
2016/09/02 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
微信小程序学习总结（三）条件、模板、文件引用实例分析
2020/06/04 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
python获得一个月有多少天的方法
2015/06/04 Python
python安装Scrapy图文教程
2017/08/14 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python银行系统实现源码
2019/10/25 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
大客户销售经理职责
2013/12/04 职场文书
一夜的工作教学反思
2014/02/08 职场文书
本科生求职信
2014/06/17 职场文书
活动总结范文
2014/08/30 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
安全生产月标语
2014/10/07 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
高一作文之暖冬
2019/11/09 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript