javascript - 如何对基于 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 等以及如何执行？

Answer 1

我不太明白你在这里使用的是什么模式 - 它似乎有点反模式。它不可测试，并且不会公开任何供现实世界使用的行为。我强烈建议阅读(或至少略读)Javascript Design Patterns作者:Addy Osmani，免费提供。

对于单元测试，我总是在简单构造函数模式和最容易使用的揭示模块模式之间找到一个愉快的中间点。

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 framework用于设置和运行我的 JS 单元测试。它是由 jQuery 团队开发的，所以你知道它会很好;)。我还建议查看 BlanketJS用于报告覆盖范围，以及 qunit-parameterize用于设置多个测试用例。

就其值(value)而言，BDD 不是一种“测试类型”，而是一种工作方式。对于您应该进行哪些测试 - 单元测试和集成测试是最重要的 2，IMO。我使用 QUnit 进行单元测试，使用 Selenium 和 NUnit 进行集成测试。