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