Mocking jQuery 测试基本使用

Question

我很难理解如何设置一个允许我测试我的 jQuery 调用的对象。我不需要模拟任何异步调用或任何东西，只需基本使用。因此，让我列出我想要测试的函数（为简单起见截断）：

listGamesCallback : function(data) {
     var gameList = $("#gameList select");

     gameList.empty();

     $.each(data, function() {
          var newOption = $('<option>', {value : this.gameId });
          newOption.text(string);
          newOption.data("isJoinable", isJoinable);

          // Add it to the list
          gameList.append(newOption);
     });


}

我需要在这里模拟 jQuery 来对这个方法进行单元测试，但我无法弄清楚如何在 javascript 中执行此操作。即使没有 jsMockito，我也不知道如何创建一个具有 jQuery 在这种情况下具有的属性的对象。对此的任何帮助将不胜感激。

我正在使用 jsTestDriver、jsHamcrest、jsMockito 和 jQuery。但是，创建具有这些属性的 $ 对象的通用方法也很棒。谢谢！

对于那些询问的人，这是我想出的似乎有点工作的东西..但我不明白为什么。

var saved$ = $;

var mockContruct = mockFunction();
var mockedGamelist = mock(jQuery);
var mockedOption = mock(jQuery);

mocked$ = (function() {
    var test = function(name) {
        var args = jQuery.makeArray(arguments);
        return mockContruct.call(test, args);
    };

    $.extend(test, $);

    // This is what confuses me.  This worked, but it's wierd
    // It allows me to use the regular jQuery functions like
    // $.each, while returning mocked objects when selectors are used.
    test.prototype.constructor = test;

    return test;
})();

$ = mocked$;    

when(mockContruct).call(anything(), hasItem(containsString("#gameList")))
    .thenReturn(mockedGamelist);

when(mockContruct).call(anything(), hasItems(containsString("<option>"), both(object()).and(hasMember("value"))))
        .thenReturn(mockedOption);

headerFunctions.listGamesCallback([ {
    gameId : 1,
    isWhitesTurn : false,
    isGameOver : false,
    whiteUserName : "foobar",
    blackUserName : "barfoo"
} ]);

JsMockito.verify(mockedGamelist).empty();
JsMockito.verify(mockedGamelist).append(mockedOption);

$ = saved$;

Answer 1

好的，这就是我想出的以最少的设置完成工作的方法。 .extend 在这里是完全必要的，以便正确设置 jQuery 对象。这允许您模拟构造函数以返回可用于运行测试的模拟 jQuery 对象。作为间谍，jQuery 将在所有情况下都按预期工作，除非您希望它做其他事情。这里是：

TestCase("HeaderTest", {
    testListGamesCallback : function () {
       var saved$ = $;

       $ = $.prototype.construct = jQuery.extend(spy(jQuery), jQuery);

       var mockGameList = mock(jQuery);
       when($)(containsString("#gameList")).thenReturn(mockGameList);

       headerFunctions.listGamesCallback([ {
          gameId : 1,
          isWhitesTurn : false,
          isGameOver : false,
          whiteUserName : "foobar",
          blackUserName : "barfoo"
       } ]);

       verify(mockGameList).empty();
       verify(mockGameList).append(object());

       $ = saved$;
   }
});

这个解决方案的警告是，除了构造函数之外，模拟任何东西都有点棘手。您必须设置要模拟的每个单独的功能，然后对行为进行编程。所以：

 $.each = mockFunction();
 when($.each)(...matchers...).thenReturn(...);

但它仍然允许测试您需要的内容。

Answer 2

作为 alpian 答案的扩展，您可以创建 DOM 元素而无需将它们添加到页面中。让你的 JS 函数将相关元素作为参数：

listGamesCallback : function(data, gameListSelectElem) {
    var gameList = $(gameListSelectElem);
    ...

并像这样测试它们：

var fakeSelect = $('<select>'),
    data = ...;

listGamesCallback(data, fakeSelect[0]);

equal(fakeSelect.find('option').length, 1, 'must have exactly 1 option');
...

上面的最后一行代码用于 qUnit。取你需要的任何东西，关键是说你可以传递一个从未添加到页面中的 DOM 元素，然后使用 jQuery 调查该 DOM 元素以查找它是否被正确操作。

Answer 3

不知道我是否理解你的意思，但如果你想为你的例子创建“数据”，这是我知道的方法：

    var data = [ { id : 1 , name : 'foo' } , { id : 2, name : 'bar' ] ​

但是 - 如果你想创建一个选项列表，那么你的代码需要一些修复： 见http://jsfiddle.net/7MMap/

var data = [ { gameId : 1 , name : 'foo' ,isJoinable:true} , { gameId : 2, name : 'bar' ,isJoinable:false}] 

    listGamesCallback = function(data) {
     var gameList = $("#gameList select")
                     .empty();

     $.each(data, function(i,d) {
          var newOption = $('<option>', {value : d.gameId })
           .text(d.name)
           .data("isJoinable", d.isJoinable);

          // Add it to the list
          gameList.append(newOption);
     })
             };

listGamesCallback(data);

Answer 4

Mocking jQuery 不是 mocking 的用途。你应该只嘲笑你对象的合作者。 jQuery 为您提供了一些实用程序——它不是协作者，因此不应被嘲笑。

您在这里协作的是 DOM，或者是您的代码和 DOM 之间的一些中间对象。 data 是一个值对象，可以按照 Avi 的建议在您的测试中简单地创建。

在我的 JS 测试中，我不模拟 DOM，我使用真实的 DOM，并且肯定会拆除我在测试之间创建的任何内容，这似乎工作得很好。