简介
Jasmine是一个behavior-driven development ( 行为驱动开发 ) 测试框架, 不依赖于任何其他JavaScript框架, 不依赖DOM, 并且有很简洁的语法让你能够很轻松的编写单元测试. 本文并不会介绍Jasmine的语法, 重点是成功的搭建一个测试环境.
Karma是Testacular的新名字, 在2012年google开源了Testacular，2013年Testacular改名为Karma.
Karma是一个基于Node.js的JavaScript测试执行过程管理工具( Test Runner ). 该工具可用于测试所有主流Web浏览器, 也可集成到CI ( Continuous integration ) 工具, 也可和其他代码编辑器一起使用. 这个测试工具的一个强大特性就是, 它可以监控(Watch)文件的变化, 然后自行执行.
接下来的内容需要读者对 Node.js 和 NPM 有一个基本了解, 否则你可能搞不清楚我们究竟在干什么.
安装
为了能成功运行Jasmine单元测试, 请安装以下NPM Package. 它们并不都是必须的, 但为了完整性, 我会把所有要使用的包列在这里.
安装[karma-cli]
Commandline Interface. You will need to do this if you want to run Karma on Windows from the command line.
npm install karma-cli -g
安装Karma
Spectacular Test Runner for JavaScript.
npm install karma --save-dev
安装karma-jasmine
A Karma plugin - adapter for Jasmine testing framework.
npm install karma-jasmine --save-dev
安装karma-chrome-launcher
Launcher for Google Chrome and Google Chrome Canary.
npm install karma-chrome-launcher --save-dev
安装jasmine-core
Official packaging of Jasmine's core files for use by Node.js projects.Note: Since karma-jasmine 0.3.0 the jasmine library is no longer bundled with karma-jasmine and you have to install it on your own.
npm install jasmine-core --save-dev
安装karma-coverage
A Karma plugin. Generate code coverage.
npm install karma-coverage
配置
karma通过karma.config.js进行配置, 这个文件具体的配置项可以点击链接进入官网, 有很详细的介绍. 但我们通常不需要把所有的配置都弄清楚, 这并不代表它们不重要, 只是熟悉一些常用的配置就足以满足我们的需要.
我们可以通过karma init自动生成一个配置文件.整个过程完全是傻瓜式的操作.
C:\Users\Administrator>karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
Config file generated at "C:\Users\Administrator\karma.conf.js".
运行karma
如果上面的步骤你执行的很顺利, 接下来试着在命令行运行karma start
C:\Users\Administrator>karma start
20 06 2016 08:59:21.910:WARN [karma]: No captured browser, open http://localhost:9876/
20 06 2016 08:59:21.925:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
20 06 2016 08:59:21.941:INFO [launcher]: Starting browser Chrome
20 06 2016 08:59:23.282:INFO [Chrome 51.0.2704 (Windows 10 0.0.0)]: Connected on socket /#pJl8pFn3FBKacmLnAAAA with id 58410301
Chrome 51.0.2704 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
如果在命令行看到如下提示, 并且成功的打开了Chrome浏览器, 那么恭喜你, 你成功的运行了karma. 但是很明显你可以看到我们并没有写任何一个单元测试. Executed 0 of 0 ERROR (0.004 secs / 0 secs). 所以接下来我们要做的就是开始写单元测试.
写一个简单的单元测试
假设我们有一个js/main.js需要测试, 它包含了两个简单的函数.
function reverse(str) {
return str.split('').reverse().join('');
}
function isInteger(num) {
if (typeof num !== "number") return false;
var pattern = /^[1-9]\d*$/g;
return pattern.test(num);
}
我们创建一个test/mainSpec.js文件注意文件的路径需要和配置文件对应
describe("main.js", function() {
it("reverse", function() {
// Assert (verify the result)
expect(reverse('abcd')).toEqual('dcba');
expect(reverse('asdf')).toEqual('fdsa');
});
it("isInteger", function() {
expect(true).toEqual(isInteger(20));
expect(false).toEqual(isInteger("20"));
expect(false).toEqual(isInteger(0));
})
});
至于如何来写一个jasmine单元测试, 不是这篇文章的内容. 大家可以移步jasmine官网学习.
它的四要素就是describe, it, expect, toBe
再运行karma start 试试
C:\Users\Administrator>karma start
20 06 2016 09:10:18.766:WARN [karma]: No captured browser, open http://localhost:9876/
20 06 2016 09:10:18.782:WARN [karma]: Port 9876 in use
20 06 2016 09:10:18.782:INFO [karma]: Karma v0.13.22 server started at http://localhost:9877/
20 06 2016 09:10:18.782:INFO [launcher]: Starting browser Chrome
20 06 2016 09:10:20.109:INFO [Chrome 51.0.2704 (Windows 10 0.0.0)]: Connected on socket /#OoyWShGkmQDvgjqvAAAA with id 84751591
Chrome 51.0.2704 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.013 secs / 0.004 secs)
已经成功的执行了测试, karma会自动watch我们的js文件, 如果文件发生变化, 它会立刻做出响应.
生成测试报告
还记得我们之前安装的karma-coverage吗? 它是karma的一个插件, 提供了测试代码覆盖率的支持.
修改我们的karma.conf.js.
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
preprocessors: {
'js/*.js': ['coverage']
},
// optionally, configure the reporter
coverageReporter: {
type: 'html',
dir: 'coverage/'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
// coverage reporter generates the coverage
reporters: ['progress','coverage'],
涉及三个配置信息, 两个是必须的, 一个是可选的.
- preprocessors 预处理器配置
这里配置哪些文件需要统计测试覆盖率, 例如, 如果你的所有代码文件都在 js文件夹中, 你就需要如下配置. 注意不要包含你所依赖的库，测试文件等等 - reports 报告配置
在配置文件中包含下面的信息来激活覆盖率报告器. - coverageReporter 报告选项, 默认格式如下
type 是一个字符串值，其他取值可以进入官网查阅. 通常我们就用默认就好了.
dir 则用来配置报告的输出目录。如果是一个相对路径的话，将相对与 basePath 参数。
如果类型是 text 或者 text-summary，你可以配置 file 参数来指定保存的文件名。
coverageReporter = {
type : 'text',
dir : 'coverage/',
file : 'coverage.txt'
}
如果没有文件名，就会输出到控制台。
集成到webstorm
到了上一步, 我们的工作就完成了, 你已经可以开始在项目中使用karma和jasmine, 但是为了方便我把它们集成到了webstorm. 这并不复杂.
进入run菜单下面的edit Configrations. 点击+, 选择karma. 配置好相应的路径.
然后再karma.conf.js上右键选择 run karma.conf.js
参考文章
- https://blog.jetbrains.com/webstorm/2013/10/running-javascript-tests-with-karma-in-webstorm-7/
- http://confluence.jetbrains.com/display/WI/Running+JavaScript+tests+with+Karma#RunningJavaScripttestswithKarma-KarmaintegrationinWebStorm