Karma和Jasmine自动化单元测试
单元测试是我们开发过程中必不可少的一部分。在本项目中,使用Jasmine来写单元测试,Karma跑单元测试,Grunt启动Karma任务。
Jasmine
Jasmine是一个Behavior-Driven的测试框架。说到Behavior-Driven,感觉这是在测试领域一个挺火的概念。BDD(Behavior-Driven Development)是根据使用实际的用户案例来驱动软件的开发。在这里不详细展开,具体的可以看:http://en.wikipedia.org/wiki/Behavior-driven_development。
Jasmine不依赖于任何其他JavaScript框架。它拥有灵巧而明确的语法,可以让你轻松地编写测试代码。当前的版本是2.2。一个典型的测试程序如下:
describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); });
Jasmine可以部署在浏览器端,把Jasmine和测试文件和要测试的JavaScript文件都放到一个HTML文件中。
Karma
Karma则可以帮助我们从命令行运行Jasmine测试。Karma是一个基于Node.js的JavaScript的Test Runner。之前我们讲到Jasmine时,里面讲到要跑case就要把所有JavaScript文件放到HTML中。而Karma的功能就是它会生成一个Web Server和浏览器实例来执行JavaScript文件(包括测试脚本和要测试的源代码)。这样我们就不要自己手动跑Jasmine了。Karma的配置项中有一个比较核心的配置项就是files,它是一个包括你需要加载的JavaScript文件的数组。这些文件会被加载到浏览器实例中。
准确地说,Karma并不是一个测试框架,也不是一个Assertion Library。Karma所做的只是启动一个HTTP server,并生成用来跑测试的HTML文件。Karma支持Jasmine、Mocha等的是框架,分别有对应的Plugin。
Karma需要一个配置文件,下面是一个例子(karma.conf.js):
module.exports = function(config){ config.set({ basePath : '../', files : [ 'app/bower_components/angular/angular.js', 'app/bower_components/angular-route/angular-route.js', 'app/bower_components/angular-mocks/angular-mocks.js', 'app/js/**/*.js', 'test/unit/**/*.js' ], autoWatch : true, frameworks: ['jasmine'], browsers : ['Chrome'], plugins : [ 'karma-chrome-launcher', 'karma-firefox-launcher', 'karma-jasmine' ], junitReporter : { outputFile: 'test_out/unit.xml', suite: 'unit' } }); };
用命令行启动测试:
karma start karma.conf.js
与Grunt集成
Grunt-karma是Grunt的一个插件,用于Grunt和Karma的集成。
下面是一个简单的Karma Task配置例子:
module.exports = function(grunt) { var path = require('path'); grunt.loadNpmTasks('grunt-karma'); grunt.config('karma',{ options: { basePath: '../', // web server port port: 9876, // browserNoActivityTimeout: 100000, client: { captureConsole: !!grunt.option("with-logs") }, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, browsers: ['PhantomJS'], exclude: [], files: [ 'Angular-Grunt-Boilerplate/target/build/webapp/app.js', 'Angular-Grunt-Boilerplate/tests/spec/test.js', ], plugins : [ 'karma-jasmine', 'karma-phantomjs-launcher', ], // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter // requirejs issue, "Disconnected (1 times), because no message in 10000 ms",see below: // http://stackoverflow.com/questions/23667102/disconnected-1-times-because-no-message-in-10000-ms-using-karma-jasmine frameworks: ['jasmine'], // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter // html - https://github.com/matthias-schuetz/karma-htmlfile-reporter reporters: ['progress'], colors: true, }, daemon: { options: { singleRun: false } }, run: { options: { singleRun: true } } }); };
其中options里是一些公共的设置。
然后在Gruntfile.js中加入一句:
grunt.registerTask('test', ['karma:run']);
然后我们就可以通过
grunt test
来跑测试了。
Leave a Reply