Grunt + Mocah做AMD模块的单元测试（windows环境）

1 引言

Grunt可以看成JS领域的ANT，被广泛用于前端项目的构建工作，Grunt基于大名鼎鼎的node.js.有关Grunt的具体介绍以及安装，参见http://www.gruntjs.net/docs/getting-started/； 

本文主要介绍如何在Grunt构建任务中增加mocha测试用例，并在Grunt中利用jsdom这个npm来模拟浏览器的运行环境。

Mocha是一款主流的基于node.js的js测试框架，提供TDD和BDD两种测试模式，有关Mocha的详细介绍，请参见http://cnodejs.org/topic/516526766d38277306c7d277；

2.环境准备

笔者是在windows环境做的，所以这里指阐述windows相关的环境搭建。

1）安装node.js 

下载地址 http://nodejs.org/download/ 安装完毕后将node的路径加入到系统环境变量Path中，例如D:\nodejs\

2）安装npm

http://nodejs.org/dist/npm找到最新的版本。解压npm，将 npm挪node.exe到目录下，这样npm就可以调用到node了，参见

d:\nodejs 的目录
2014/03/06  16:50    <DIR>          .
2014/03/06  16:50    <DIR>          ..
2014/03/06  16:50               298 grunt
2014/03/06  16:50               159 grunt.cmd
2014/03/04  21:54               290 mocha
2014/03/04  21:54               151 mocha.cmd
2014/03/06  08:55               324 node-debug
2014/03/06  08:55               185 node-debug.cmd
2014/03/06  08:55               322 node-inspector
2014/03/06  08:55               183 node-inspector.cmd
2014/02/18  15:52         6,930,792 node.exe
2014/01/28  18:55               697 nodevars.bat
2014/01/28  18:55             6,584 node_etw_provider.man
2014/03/06  16:50    <DIR>          node_modules
2014/01/28  18:55             4,974 node_perfctr_provider.man
2014/03/04  21:49               296 npm
2014/03/04  21:49               157 npm.cmd
2014/03/04  21:54               292 _mocha
2014/03/04  21:54               153 _mocha.cmd

3）安装Grunt

执行如下命令即可实现安装，命令npm install -g grunt-cli。

4）安装Mocha

命令：npm install grunt-mocha-test。

5）安装Mocha的Grunt插件

 grunt-mocha-test，命令：npm install grunt-mocha-test

6）安装node环境下模拟BOM和DOM的插件jsdom

在安装jsdom前需要安装python，并将python路径加入到Path中，执行npm install jsdom即可

3.代码调整

jsdom的window模拟是一个异步回调函数，而Grunt是一个串行执行的过程，所以需要修改cli.js代码如下：

将原先的 grunt.tasks(cli.tasks, cli.options, done);
修改如下，其中documentRoot指定了模块加载器的基准路径，另外模拟出的window对象不支持localStroage所以增加了模拟localStorage的代码

var jsdom = require('jsdom');
  jsdom.env({
    html: "<DIV/>",
	documentRoot: '<%= pkg.name%>/../../../',
    scripts: [],
	done:function(errors, window){
	  global.window = window;
	  for (var p in window)
	  {
	      if (!global[p])
		  {
		      global[p] = window[p];
		  }
	  }	  
	  window.localStorage = {};
	  window.localStorage.get = function(){
	      return this;
	  }
	  window.localStorage.getItem = function(name){
	      return this[name];
	  }
	  window.localStorage.set = function(data){
	      this = data;
	  }
	  window.localStorage.setItem = function(name, value){
	      this[name] = value;
	  }
      grunt.tasks(cli.tasks, cli.options, done);
  }});

nodejs的require是CMD规范，模块加载时同步，而项目代码是AMD规范，加载是异步的，所以需要安装requirejs(npm install requirejs)增加如下代码，来根据参数个数来区分是ADM require还是CMD require。

var requirejs = require('requirejs');
var c_require = require;
requirejs.config({
    //Pass the top-level main.js/index.js require
    //function to requirejs so that node modules
    //are loaded relative to the top-level JS file.
    baseUrl: '../../src',
    nodeRequire: require
});

require = function(path, callback)
{
    if (arguments.length == 2)
    {
        return requirejs.call(global, path, callback);         
    }
    else
    {
        return c_require.call(global, path);   
    }
}

项目代码中不能使用web绝对路径，需要调整为相对路径，基准路径一般就是gurntfile所在路径，否则不能识别。

gruntfile.js代码如下

'use strict';
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    
	mochaTest: {
      test: {
        options: {
          ui: 'tdd',
          reporter: 'spec'
        },
        src: ['<%= pkg.name%>/testcase/*.js']
      }
    }
  });  
  grunt.loadNpmTasks('grunt-mocha-test');
  grunt.registerTask('default', ['mochaTest']);
};

在mochaTest的option中可以指定测试模式是tdd还是bdd

这里我们使用的是tdd模式