我该如何为基于jQuery的代码进行单元测试？

Question

我有一个名为index.js的文件，其中包含以下代码。我想测试其中的一些函数，其中add和print是主要的。

(function($){
  "use strict";

  $(function(){

    var add = function(a, b){
    // ...
      },
    print = function(str){
    // ...
      },
      setup = function(){
    // ...
      },
      init = function(){
    // ...
      };

      setup();
      init();
  });
})(jQuery);

我应该怎么做呢？这种编码方式对客户端是否有任何安全保障？我只有运行在客户端的代码，没有任何服务器参与。

我尝试过：

var outerObj = (function(greet){
    var innerObj = (function(){
        return {test: function(){ console.log(greet); }}
    })();
    return innerObj;
})("hi");

outerObj.test();

但是，在我的情况下，innerObj这一行在等号右边有一个$，导致控制台报错，提示$(...)不是一个函数。我同意，它是单个文档对象的数组。

在任何启用jquery的网页的控制台中检查var a = (function(){ var val = $(function(){return 10;})(); })();，以查看错误。

即使我放弃外壳并且将$(function() {});带出来。我该如何测试呢？

它仍然是一个对象，仍然有错误。

我可以进行什么样的测试，单元测试、bdd测试等，如何进行？

- user900360

Answer 1

我不太清楚您在这里使用的模式是什么 - 它似乎有点反模式。它无法进行测试，并且不会暴露任何真实世界使用的行为。我强烈建议阅读（或至少浏览）Addy Osmani的Javascript设计模式，可免费获取。

对于单元测试，我始终发现简单构造函数模式和揭示模块模式之间的中间点最容易使用。

var x = function($){
"use strict";

  var add = function(a, b){
     alert('add');
    },
    print = function(str){
     return 1;
    },
    setup = function(){
      alert('setup');
    },
    init = function(){
      alert('init');
    };

  init();
  setup();

  return {
      add: add,
      print: print
  };
};

var y = new x(jQuery);

在上面的示例中，y将拥有add和print方法。请查看this fiddle上的样本测试。

顺便说一下，我最近一直在使用出色的QUnit框架来设置和运行我的JS单元测试。它是由jQuery团队开发的，所以你知道它会很好 ;) 我还建议查看BlanketJS以获取覆盖率报告，以及qunit-parameterize用于设置多个测试用例。

就其价值而言，BDD不是“测试类型”，而是一种工作方式。对于应该进行哪些测试 - 单元测试和集成测试是最重要的两种，我个人认为。我使用QUnit进行单元测试，使用Selenium和NUnit进行集成测试。

- Dave Salomon