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
- 测试框架 jasmine; npm install karma-jasmin
- 浏览器测试驱动:chrom;karma-chrome-launcher
- 预处理器:默认coffee; npm install karma-coverage
- 报表:默认 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