AMD module 单元测试

如有排版效果混乱，请移步https://www.zybuluo.com/bornkiller/note/24759。

前言

• karma配合requirejs进行单元测试，存在官方版本http://karma-runner.github.io/0.8/plus/RequireJS.html，版本虽然陈旧，但是功能实现没有问题。

• 单元测试中配置文件test-main.js与实际main.js存在差异，所以单元测试保证模块的可靠性，具体生产环境下注意模块可正常加载就好。。

• 下面代码仅为局部需特别注意代码，其它字段省略。

package.json

{
  "dependencies": {
  },
  "devDependencies": {
    "karma": "^0.12.19",
    "karma-chrome-launcher": "^0.1.4",
    "karma-cli": "^0.0.4",
    "karma-jasmine": "^0.1.5",
    "karma-requirejs": "^0.2.2",
    "requirejs": "^2.1.14"
  },
}

为单元测试而安装的node模块。

karma.config

推荐在实际使用时，用NPM在项目中再安装一次，更容易理解一些。

// Karma configuration
// Generated on Tue Jul 29 2014 10:24:37 GMT+0800 (中国标准时间)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'requirejs'],

    // list of files / patterns to load in the browser
    files: [
      {pattern: 'lib/**/*.js', included: false},
      {pattern: 'service/**/*.js', included: false},
      {pattern: 'test/**/*spec.js', included: false},
      'test-main.js'
    ],

  });
};

• basePath使用默认值即可。
• framework如上填写后,页面会自动引入断言库和加载库，不在需要手动引入。

<script type="text/javascript" src="/base/node_modules/requirejs/require.js"></script>
<script type="text/javascript" src="/base/node_modules/karma-requirejs/lib/adapter.js"></script>
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/jasmine.js"></script>
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/adapter.js"></script>

• 需要注意的是files字段，included设置为false，表示不会直接通过<script>标签直接显式引入脚本，如果直接引入，会导致define无定义，导致报错。served字段默认为true，表示会提供对应静态文件，可以异步加载。

test-main.js

karma init命令执行时，是否生成requirejs 模板文件，务必需要点是，生成模板如下：

• 第一部分——测试文件模块化

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
  return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    allTestFiles.push(pathToModule(file));
  }
});

功能其实很简单，将spec.js或者test.js结尾的文件去掉后缀，实际上为模块化测试文件，后续使用requirejs加载。

• 第二部分——requirejs配置

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: '/base',

  paths : {
      'jquery' : 'service/jquery',
      'movie' : 'service/movie'
  },

  // dynamically load all test files
  deps: allTestFiles,

  shim : {
    'jquery' : {
        deps : [],
        exports : 'jQuery'
    }
  },

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});

需要注意的是，baseUrl必须/base开头，表示karma webserver根目录。注意deps字段，此处为测试文件异步加载，由于测试文件跟模块文件在两个文件夹下，所以，建议通过path配置模块，避免文件组织结构混乱。

service.spec.js

define(['jquery','movie'], function($,movie) {

    describe('just checking', function() {

        it('works for app', function() {
            expect($).toBeDefined();
        });

        it('works for moive type', function () {
            expect(movie.type).toEqual('comedy')
        });

        it('works for movie name', function () {
            expect(movie.name).toEqual('500 days with summer');
        });

    });

});

包装上，跟常规测试文件有差异，模块必须由define引入内部， 与describe it没有明显的位置排列要求。

问题交流

总的来说，感觉挺啰嗦的，从karma配置文件，requirejs配置文件，测试文件都需要进行特殊处理。可能陈述上有问题，如有疑问
QQ: 491229492
Email: [e-mail]，注明交流即可。