什么是Karma?
mocha是一个js的测试框架,之前写过的一篇博客介绍了如何用node.js的环境来运行测试。Karma是一个驱动测试的Runner。也就是说,karma为测试框架准备运行环境,可以让这些测试在真正的浏览器里运行。
而且,karma运行测试的过程是自动化的。自动化并非理所当然的事。想起之前用Jasmine的时候,需要在一个html文件里引入各种js文件,然后用某个浏览器来打开这个html文件,使js在浏览器中运行起来。当测试内容发生变化时,需要刷新页面,并时不时地清空缓存。。。有了karma,就省事多啦~而且不需要额外的配置,karma就会自己找到系统已经装好的浏览器并启动。
karma支持的测试框架还有Jasmine和Qunit。
环境搭建
假设已经搭建好了node.js平台。先全局安装mocha和karma的命令行接口karma-cli,有可能需要sudo权限:
npm install -g mocha npm install -g karma-cli
要测试的文件目录结构如图:
先在demo-karma-mocha目录下运行 npm install 安装package.json里的依赖,package.json内容如下:
1 //package.json 2 { 3 "name": "karma-mocha-example", 4 "version": "0.0.0", 5 "description": "This is an example to show how to use karma with mocha", 6 "main": "index.js", 7 "dependencies": { 8 "karma": "~0.10.8" 9 }, 10 "devDependencies": { 11 "mocha": "~1.18.0", 12 "karma-mocha": "~0.1.3", 13 "should": "~2.1.1", 14 "karma-chrome-launcher": "~0.1.2", 15 "karma-firefox-launcher": "~0.1.3" 16 } 17 }
现在解析一下demo-karma-mocha这个目录的结构。
node_modules是npm依据package.json下载的包,src是源文件目录,test是测试文件目录。
test-lib目录下的should.js是mocha测试要用到的断言库。找到node_modules/should/should.js,将其复制到test-lib目录下。
karma.conf.js描述了karma测试的配置信息,在该目录下运行karma start时,会默认从该文件中读取信息。可以通过在该目录下运行karma init的方式来帮助生成karma.conf.js文件。
配置karma.conf.js
运行karma init后,karma会提一些问题,可以通过按tab键来切换选项。如果一些选项需要依赖某些未安装的npm包,karma也会提醒你之后用什么命令来安装这些依赖。
当karma问道:”what is the location of your source and test file"时,依次输入 src/**/*.js , test-lib/**/*.js , test/**/*.js ,表示要运行src、test-lib、test中的所有js文件。
值得注意的是,autoWatch这一属性最好选择true,这样,karma会在指定目录有更新时自动跑测试。
本例中karma.conf.js文件的内容如下,设置了同时在Chrome和Firefox这两个浏览器里里运行测试:
1 // Karma configuration 2 // Generated on Mon Mar 17 2014 12:46:02 GMT+0800 (CST) 3 4 module.exports = function(config) { 5 config.set({ 6 7 // base path, that will be used to resolve files and exclude 8 basePath: ‘‘, 9 10 11 // frameworks to use 12 frameworks: [‘mocha‘], 13 14 15 // list of files / patterns to load in the browser 16 files: [ 17 ‘src/**/*.js‘, 18 ‘test-lib/**/*.js‘, 19 ‘test/**/*.js‘ 20 ], 21 22 // reporters : [‘progress‘], 23 24 // list of files to exclude 25 exclude: [ 26 27 ], 28 29 30 // test results reporter to use 31 // possible values: ‘dots‘, ‘progress‘, ‘junit‘, ‘growl‘, ‘coverage‘ 32 reporters: [‘spec‘], 33 34 35 // web server port 36 port: 9876, 37 38 39 // enable / disable colors in the output (reporters and logs) 40 colors: true, 41 42 43 // level of logging 44 // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 45 logLevel: config.LOG_INFO, 46 47 48 // enable / disable watching file and executing tests whenever any file changes 49 autoWatch: true, 50 51 52 // Start these browsers, currently available: 53 // - Chrome 54 // - ChromeCanary 55 // - Firefox 56 // - Opera (has to be installed with `npm install karma-opera-launcher`) 57 // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`) 58 // - PhantomJS 59 // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`) 60 browsers: [‘Chrome‘, ‘Firefox‘], 61 62 // If browser does not capture in given timeout [ms], kill it 63 captureTimeout: 60000, 64 65 66 // Continuous Integration mode 67 // if true, it capture browsers, run tests and exit 68 singleRun: false 69 }); 70 };
运行测试
要测试的内容很简单,就是看sayHi这个函数能不能在有输入时跟人打个招呼:
1 //greetings.js 2 function sayHi(name){ 3 return name ? "Hi " + name : "Nobody comes"; 4 }
相应的测试代码写在greeting-spec.js中:
1 //greetings-spec.js 2 describe("Counter", function() { 3 4 it("should say Hi given a name", function() { 5 sayHi("Tom").should.equal("Hi Tom"); 6 }); 7 8 it("should not say Hi if no input", function() { 9 sayHi().should.equal("Nobody comes"); 10 }); 11 12 });
直接在demo-karma-mocha下运行 karma start 就可以启动两个浏览器并运行测试了,测试的结果会在命令行中显示。
由于设置了 autoWatch:true ,当改变src、test-lib、test文件夹中的任意一个文件时,karma都会重新运行所有测试。
如果autoWatch的值为false,则在 karma start 后,还需要 karma run 来手动运行每一次测试。
问题
这样还仍然不够方便。
比如,虽然用npm引入了should.js,却还要在node之外手动地将should.js放在test-lib中。而且,为了让其在浏览器里运行,这个程序没有用到node.js模块化的功能。这一点可以用browserify来解决,把运行在后端的js代码转换为浏览器能运行的代码。
另外,grunt也可以集成karma,用它来运行karma测试就更方便了。