jasmine+seajs+angular+karma 单元测试开发

jasmine+seajs+angular+karma 单元测试开发

开发环境

karma它是由node构建的,所以配置node服务环境是基础;如何配置node,请参考此文章:www.cnblogs.com/seanlv/archive/2011/11/22/2258716.html


以下安装都是在项目路径 d:/testspec 下

  • 安装karma
    命令:npm install karma

  • 初始化karma配置文件
    命令: karma init karma.conf.js
    配置文件代码如下:

module.exports = function(config) {
  config.set({
   // 用来解析定义在files 和 exclude里的相对路径的根目录。如果basePath是一个相对路径,那么它会被解析为相对于配置文件的 __dirname
    basePath: '',

    // 你要使用的测试框架列表,通常,你会设定为[’jasmine’], [’mocha’] 或 [’qunit’]
    frameworks: ['jasmine'], 

     // 被加载到浏览器的 文件/模式 列表
    files: [],

    // 不会被加载的 文件/模式 列表
    exclude: [], 

    //当捕获到浏览器时用到的hostname
    hostname:'localhost',

    //用到的预处理器映射表
    preprocessors: {’*/.coffee’: ‘coffee’},

    //代理映射表,例如:{'/static':'http://gstatic.com','/web':'http://localhost:9000'}
    proxies:{},

    //当发现非法的SSL证书时,karma或者浏览器是否需要报错
    proxyValidateSSL:true,

    //karma会报告所有慢于给定时间的测试,默认情况是禁用的,因为值为0.
    reportSlowerThan:0,

    //reporters报表。Karma的报表也是可以自定义的:可以把报表设置成在终端中显示关于所有类型测试状态的有用输出。其它的 reporters, 例如 growl, junit, teamcity 或者 coverage 可以以插件方式加载
    reporters: ['progress'],

    //web server 监听的端口
    port: 9876,

    //日志记录级别.config.LOG_DISABLE,config.LOG_ERROR,config.LOG_WARN,config.LOG_INFO,config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    //日志输出器列表。可以使用log4js
    loggers:[{type:'console'}],

    //需要加载的插件列表。插件可以是一个字符串,或者是一个inline plugin-Object。默认情况下,karma加载所有以karma-*开始的兄弟npm 模块
    plugins:['karma-*'],

    //开启或关闭监测文件,当文件发生变化时自动执行测试    
    autoWatch: true,

    //当开启autoWatch时,karma会尝试将多个修改打包到一起运行一次测试代码,以此来减少运行次数。该配置项告诉karma在发生更改后需要等待多长时间(毫秒)再开始执行测试。
    autoWatchBatchDelay:250,

    //需要启动和控制的浏览器列表。当karma启动时,它会同时启动列表里的浏览器。当karma关闭时,它也会关闭列表里的浏览器。你可以通过访问Karma web server监听的url,手动的让karma控制任何浏览器。
    browsers: ['Chrome'],

    //捕获浏览器的过期时间(毫秒).captureTimeout代表了允许浏览器启动并连上karma的最大时间。在该时间内,如果任何一个浏览器没有连接上,karma会断开它,并尝试重新连接,如果尝试三次都没有成功,karma就会放弃。
    captureTimeout:60000,

    //karma需要等待多长时间来允许浏览器重新连接(毫秒)。浏览器通常会断开连接,但实际上测试仍在正常运行。karma并不会把断开连接立即判定为失败,而是会等待browserDisconnectTimeout 毫秒,如果在这期间,浏览器重新连接上,那么一切正常。
    browserDisconnectTimeout:2000,

    //允许断开连接的次数。disconnectTolerance的值代表了当断开连接时,浏览器尝试重连的最大次数。通常任何断开都会被视为失败,但是该选项允许你定义一个容忍度,允许Karma server与浏览器断开连接再重连
    browserDisconnectTolerance:0,

    //karma在断开一个浏览器连接之前会等待多长时间(毫秒)来接收信息。在测试执行过程中,如果在browserNoActivityTimeout(毫秒)时间内,Karma没收到任何来自某浏览器的消息,那么它会断开与该浏览器的连接
    browserNoActivityTimeout:10000,

    //开启或关闭彩色输出
    colors:true,

    //CI模式;如果设为true,karma会启动并捕获浏览器,运行测试然后退出,至于exit code 是0还是1,就要看是否所有测试都通过还是有任何测试失败。
    singleRun: false,

    //浏览器与测试服务器之间允许的传输方式。该配置会传递给socket.io(用于管理浏览器与测试服务器的通信)。
    transports:[’websocket’, ‘flashsocket’, ‘xhr-polling’, ‘jsonp-polling’],

    //karma运行的基础路径;所有karma url都会以urlRoot 做前缀。当使用代理时,这非常有用,因为有时候你会想代理一个karma已经占用的url。
    urlRoot:'/',
    client:{

        //如果设为true,karma会在一个Iframe里运行测试。如果设为false,karma会在一个新窗口运行测试。因为一些测试可能无法再iframe里运行,需要打开新窗口。
        useIframe:true,

        ,//捕获所有console输出,并输送到terminal,
        captureConsole:true,

        //当通过命令行提供了额外的参数给karma run 时,这些参数会通过karma.config.args传递给test adapter。
        args:[],
    }
  });
};

  

  • 安装karma配置文件中依赖的npm

    1. 测试框架 jasmine; npm install karma-jasmin
    2. 浏览器测试驱动:chrom;karma-chrome-launcher
    3. 预处理器:默认coffee; npm install karma-coverage
    4. 报表:默认 progress; npm install karma-progress
  • 因为我们使用的是seajs来模块化加载文件,所以需要一个test-main.js文件来代替主应用文件,提供引用测试文件的能力,无需把应用真正启动起来。

// test-main.js
(function(__karma__, seajs) {
    var tests = [],
        file;
    var  alias = {};
  // src alias
  for (var file in window.__karma__.files) {
    if (window.__karma__.files.hasOwnProperty(file)) {
          var name = file.match(/([^.]+).js/)[1]
          alias[name] = file
    }
  }
    seajs.config({
        alias: alias
    })

    var __start = __karma__.start;
    __karma__.start = function() {
        seajs.use(['test-spec.js'], function() {
            __start.call(); //要在seajs模块载入后调用,否则会加载不到任何测试用例
        });        
    };
})(window.__karma__, seajs);

  

  • 运行karma: karma start karma.conf.js

 

为什么angular更易于单元测试

Angular主要的优点之一就是它的依赖注入(Dependency Injection),它非常利于代码的单元测试

简单的测试应用

  • 单元测试依赖的文件
      files: [
        'http://assets.spmjs.org/seajs/??seajs/2.1.0/sea.js',
        'bower_components/angular/angular.js',
        'bower_components/angular-mocks/angular-mocks.js', 
        'file.js',
        'test-spec.js',
        'test-main.js'
      ]
    

      

  • d:/testspec 下新建 file.js

    define(function(){
      var app = angular.module("apptest", []);
    
      app.controller("SimpleCtrl", ['$scope',function($scope){
          $scope.message = "Hello World";
      }]); 
    })
    

      

  • d:/testspec 下新建 单元测试文件 test-spec.js

    describe("app module", function () {
       //beforeEach 方法来运行一组设置函数。
      //beforeEach() 函数带一个参数:一个函数,在每个细则运行之前被调用一次。
      //模拟我们 apptest 模块
      beforeEach(angular.mock.module("apptest"));
      describe("SimpleCtrl", function () {
          var scope,
              controller;
    
          beforeEach(angular.mock.inject(function ($rootScope, $controller) {
              // 创建一个空白的 scope
              scope = $rootScope.$new();
              // 模拟controller
              controller = $controller;
          }));
    
          it("should assign message to hello world", function () {
              // 将scope注入到控制器 SimpleCtrl内
              controller("SimpleCtrl", {$scope: scope});
              expect(scope.message).toBe("Hello World");
          });
      });
    });
    

      

  • 启动karma

    karma  start  karma.conf.js