用karma对基于cmd(seajs)的前端代码进行单元测试

近期做前端单元测试，因为用了seajs，项目中很多定义了匿名的cmd（根据文件名、路径加载），但在用karma测试的过程中遇到了点麻烦，这个blog就总结下解决的问题。

 

1. 首先要先了解下karma的script加载方式

    在karma.conf.js的配置里files都会以<script>标签加载在karma的context.html页面上（即测试页面中）。所以我们要测试的依赖文件、单元测试文件都要写在files里。karma提供了以/base /absolute开头的url路径访问files。所以我们在files里配置的路径，对应karma的浏览器路径就是

/base/yourfile.js

（因为对karma了解得还很少，所以有错误的地方童鞋请指出）

 

2. 要解决匿名cmd的问题

    如果你有一个file，例子a.js，里面这么定义

 

// a.js
define(function(require, exports, module){
	****
});

 

 

   另一个b.js里这么引用require('/absolutepath/a.js')

 

在karma里就出现问题了，因为karma引入<script file="a.js">执行下，对于seajs来说只是定义一个匿名的cmd，真正用的时候，路径就变成了/base/a.js。所以b.js在运行时候会找不到a——测试不能修改已经完成的开发的代码。

为了解决这个，思路可以有两个

    a) 第一就是在测试时候动态修改b.js，修改require的路径，这个不合适，因为有的是引用了已经定义好name的cmd，而不是用路径。无法做到一致修改。

    b) 第二个就是把匿名的cmd，在karma里变成用路径作为其name的cmd——百度之，有一个karma-commonjs的plugin，看了下不适合，但给了思路，用preprocessor，所以模仿写一个，就是替换define(function{而已

 

 

var createPreprocesor = function(basePath, logger) {
  var log = logger.create('preprocessor.commonjs');

  return function(content, file, done) {
	var pat = /(define *\(( *function.+))/;
	var mat = pat.exec(content);
    if (!mat) {
      return done(content);
    }

	var id = file.path.replace(basePath, '');
    var output = content.replace(mat[1], "define('" + id + "'," + mat[2]);

    done(output);
  };
};

createPreprocesor.$inject = ['config.basePath', 'logger'];

// PUBLISH DI MODULE
module.exports = {
  'preprocessor:commonjs': ['factory', createPreprocesor]
};

 

 

这样原本的a.js就变成了

 

// a.js
define('/js/a.js', function(require, exports, module){
	****
});

 

 

3. 需要对cmd的name进行重新定义——由于这个preprocessor写得很简单，就是把file path相对basePath的路径做为cmd的name。所以还是解决不了b.js以相对路径引入a.js的问题。

 

重新定义了还有个必要性就是b.js即便用绝对路径引入了a.js，但如果测试代码依赖需要b.js的执行完成，b.js用seajs的load /base/js/a.js，会出现不同步问题。seajs.use('/js/b.js')虽然执行完下了，b.js里的内容还没执行完，测试内容执行就报错了。

 

所以karma的files再增加一个这样的file

 

// redefine
seajs.use('/js/a.js', function(obj){
	// obj is a function
	/*
	define('a.js', function(){
		return obj;
	});
	*/
	define('a.js', obj);
});

 

 

到此位置就基本上可以测试大多数物理文件上分散的seajs的文件了，如果有require嵌套很深的，就要有多个这样的redefine.js，加载顺序还要固定。

 

具体的测试代码大概是这样的

 

 

seajs.use('/js/b.js');

describe('Test http', function() {
	describe('MyCtrl',function(){
		beforeEach(module('md'));
		var scope, ctrl;
		beforeEach(inject(function($rootScope, $controller){
			scope = $rootScope.$new();
			ctrl = $controller('MyCtrl',{$scope: scope});
		}));
		it('init data', function(){
			expect(scope.val).toBe('123');
		});
	});
});