jquery - QUnit单元测试: Test Mouse Click

Question

我有以下 HTML 代码:

<div id="main">
  <form Id="search-form" action="/ViewRecord/AllRecord" method="post">
    <div>
        <fieldset>
            <legend>Search</legend>
           <p>
                <label for="username">Staff name</label>
                <input id="username" name="username" type="text" value="" />
                <label for="softype"> software type</label>

                <input type="submit" value="Search" />
            </p>
        </fieldset>
    </div>
  </form>
</div>

以及以下 Javascript 代码(使用 JQuery 作为库):

$(function() {
$("#username").click(function() {
        $.getJSON("ViewRecord/GetSoftwareChoice", {},
    function(data) {
       // use data to manipulate other controls
    });
    });
});

现在，如何测试 $("#username").click 以便对于给定的输入，它

1. 调用正确的网址(在本例中为 ViewRecord/GetSoftwareChoice)
2. 并且，预期输出(在本例中为 function(data))表现正确？

知道如何使用 QUnit 执行此操作吗？ ？

编辑:我读了 QUnit examples ，但他们似乎正在处理一个没有 AJAX 交互的简单场景。尽管 there are ASP.NET MVC examples ，但我认为他们实际上是在测试服务器对 AJAX 调用的输出，即，它仍在测试服务器响应，而不是 AJAX 响应。我想要的是如何测试客户端响应。

Answer 1

您可以用函数调用替换匿名事件处理程序，然后在测试中您可以调用该函数。

所以而不是

$("#username").click(function() {
    $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) {
    // use data to manipulate other controls
    });
});

你可以做类似的事情

function doSomething() {
    $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) {
    // use data to manipulate other controls
    });
}

$("#username").click(doSomething);

然后在您的 QUnit 测试中您可以调用

doSomething();