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是一个相对路径，那么它会被解析为相对于配置文件的 __dirnamebasePath: '',// 你要使用的测试框架列表，通常，你会设定为[’jasmine’], [’mocha’] 或 [’qunit’]frameworks: ['jasmine'], // 被加载到浏览器的 文件/模式 列表files: [],// 不会被加载的 文件/模式 列表exclude: [], //当捕获到浏览器时用到的hostnamehostname:'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_DEBUGlogLevel: config.LOG_INFO,//日志输出器列表。可以使用log4jsloggers:[{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 aliasfor (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) {// 创建一个空白的 scopescope = $rootScope.$new();// 模拟controllercontroller = $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