模拟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(...);

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