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