嘲笑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

不知道如果我明白你的意思，但如果你想为你们例如创建“数据”，这是我知道的方法：

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 3

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

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

在我的JS测试中，我没有模拟DOM，我使用真正的DOM，并且一定会拆除我在测试之间创建的任何东西，这似乎工作得很好。

Answer 4

作为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元素以查找它是否被正确操作。