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