模拟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。但是，创建具有这些属性的$对象的通用方法也会很棒。谢谢!

对于那些问我的人来说，这是我想出的似乎有点work..but的东西，我不明白为什么。

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

好的，这是我想出来的，用最少的设置就能完成这项工作。这里，为了正确设置jQuery对象，.extend是完全必要的。这允许您模拟构造函数以返回模拟的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

不知道我是否理解你的意思，但如果你想为你的例子创建'data‘，这是我知道的方法：

    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);