摘要：介紹使用，就可以測試指定的案例加入可以進行測試異步模塊的案例安裝全局配置命令行配置加載框架引入。

使用 karma + Jasmine，就可以測試指定的案例, 加入RequireJS, 可以進行測試異步模塊的案例

# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

# Install karma-requirejs
$ npm install requirejs --save-dev
$ npm install karma-requirejs --save-dev

全局配置karma 命令行

npm install -g karma-client

module.exports = function (config) {
  config.set({
    // ...
    frameworks: ["jasmine", "requirejs"],
    files: [
      {pattern: "lib/**/*.js", included: false},
      {pattern: "src/**/*.js", included: false},
      {pattern: "test/**/*[sS]pec.js", included: false},
      "test-main.js"
    ]
    // ...
  })
}

加載karma-jasmine, karma-requirejs 框架, 引入 test-main.js. files。

var allTestFiles = []

// 測試文件
var TEST_REGEXP = /(spec|test).js$/i

// Get a list of all the test files to include
// 解析files 和 frameworks 對應需要加載的文件
Object.keys(window.__karma__.files).forEach(function (file) {

  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    // If you require sub-dependencies of test files to be loaded 
    // as-is (requiring file extension)
    // then do not normalize the paths
    // 將符合條件的測試文件轉化為 requirejs 能加載的模塊名
    var normalizedTestModule = file.replace(/^/base/|.js$/g, "")
    allTestFiles.push(normalizedTestModule)
  }
})

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  // karma 將basePath 對應的靜態路徑設置為 /base
  // requirejs 加載文件也應當由 /base 開始
  baseUrl: "/base",

  // dynamically load all test files
  // 動態加載測試文件
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  // deps 加載完后 執行 單元測試
  callback: window.__karma__.start
})

目錄結構

- test
- src
- lib
- test-main.js
- index.html
- main.js

源文件 src/utils/qs.js

define(function () {

  var encodeURIComponent = window.encodeURIComponent;
  var decodeURIComponent = window.decodeURIComponent;

  function isArray (o) {
    return Object.prototype.toString.call(o) === "[object Array]";
  }
 
  function isObject (o) {
    return Object.prototype.toString.call(o) === "[object Object]";    
  }
  
  return {
    parse: function (url) {

      if (typeof url !== "string") {
        throw new TypeError("qs.parse() Error, url should transmit a string param");
      }

      var result = {};
      url = url.substr(url.indexOf("?") + 1);
      var querystring = url.replace(/#.*/, "");
      var patterns = querystring.split("&");

      patterns.forEach(function(pattern) {
        if (!pattern) {
          return;
        }
        var matched = pattern.match(/([^=]+)=(.*)/);
        if (!matched) {
          return;
        }
        var key = matched[1],
          value = matched[2],
          isArr = false;

        if (key.slice(-2) === "[]") {
          key = key.slice(0, -2);
          isArr = true;
        }

        key = decodeURIComponent(key);
        value = decodeURIComponent(value);

        if (isArr) {
          if (!Array.isArray(result[key])) {
            result[key] = [];    
          }
          result[key].push(value);
        } else {
          result[key] = value;
        }
      }, this);

      return result;
    },

    stringify: function (obj) {

      if (!isObject(obj)) {
        throw new TypeError("qs.stringify() Error, Unexpected obj is not Object");
      }

      return Object.keys(obj).map(function (name, index) {
        if (isArray(obj[name])) {
          return obj[name].map(function (item) {
            return encodeURIComponent(name) + "[]=" + encodeURIComponent(item); 
          }).join("&");
        }
        return encodeURIComponent(name) + "=" + encodeURIComponent(obj[name]);
      }).join("&");
    }
  }
});

測試文件 test/utils/qsSpec.js

define(["src/utils/qs"], function(qs) {

  beforeAll(function () {
    spyOn(qs, "parse").and.callThrough();
    spyOn(qs, "stringify").and.callThrough();
  });

  describe("qs.parse() suite", function() {

    it("should throw TypeError", function() {
      expect(qs.parse).toThrowError(TypeError);
    });

    it("should parse to object", function () {
      var url = "http://liylblog.com/?a=1&b=2&c=3";
      expect(qs.parse(url)).toEqual({
        a: "1",
        b: "2",
        c: "3"
      });
    });

    it("should parse to object array", function () {
      var url = "http://liylblog.com/?a[]=1&a[]=2&a[]=3";
      expect(qs.parse(url)).toEqual({
        a: ["1", "2", "3"]
      });
    });

    it("should be decodeURIComponent", function () {
      var aVal = window.encodeURIComponent("=1");
      var bVal = window.encodeURIComponent("?2");
      var url = "http://liylblog.com/?a=" + aVal + "&b=" + bVal + "&c=3#";
      expect(qs.parse(url)).toEqual({
        a: "=1",
        b: "?2",
        c: "3"
      });
    });

  });

  describe("qs.stringify() suite", function () {
    var obj;

    beforeEach(function () {
      obj = {
        a: 1,
        b: ["你好", "世界"],
        c: ["2", null, ""]
      };
    });
    
    afterEach(function () {
      obj = null;
    });

    it("should throw TypeError", function() {
      expect(qs.stringify).toThrowError(TypeError);
    });

    it("should stringify obj", function () {
      var querystring = qs.stringify(obj); 
      var containB = (function () {
        var str = ""
        for (var i = 0, len = obj["b"].length; i < len; i++) {
          str += i > 0 ? "&" : ""
          str += "b[]=" + encodeURIComponent(obj["b"][i])
        }
        return str;
      })();
      var containC = "c[]=null";

      expect(querystring).toContain("a=1")
      expect(querystring).toContain(containB);
      expect(querystring).toContain(containC);
    });

  });
});

karma start ./karma.conf.js