基于AngularJS构建的项目框架[五]

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