QUnit 单元测试：测试鼠标点击答案

【问题标题】：QUnit Unit Testing: Test Mouse ClickQUnit 单元测试：测试鼠标点击
【发布时间】：2023-04-10 08:14:01
【问题描述】：

我有以下 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 以便对于给定的输入，它

调用正确的url（在本例中为ViewRecord/GetSoftwareChoice）
而且，预期的输出（在本例中为function(data)）行为是否正确？

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

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

【问题讨论】：

恐怕不是很多；我真的不知道如何开始。

标签： jquery qunit

【解决方案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();

【讨论】：

我认为这是最好的。拥有 $(...) 选择器会使代码更加脆弱并与标记绑定。

【解决方案2】：

在您的测试中覆盖 $.getJSON 以断言传入的 url 是正确的。如果您经常需要这样做，您可以创建一个辅助函数来覆盖 getJSON 并声明 url。确保在断言之后调用默认实现。此外，在断言 url 之后， stop() 测试。

用一个开始测试的函数包装传入的回调，并调用回调。

开始测试。

触发点击#username。

编辑：

这可能会有所帮助： QUnit with Ajax, QUnit passes the failing tests

【讨论】：

好的，有没有办法传回虚拟数据？
你是什么意思'传回'，在哪里？什么虚拟数据？
dummy data=服务器返回的数据。

【解决方案3】：

您并不总是想进行真正的 ajax 调用。在这种情况下，mockjax 是一个很好的解决方案。您可以在测试中分配一个返回值。因此，您无需实现或其他文件即可请求信息。

在你的情况下，它可能是这样的：

$.mockjax({
  url: '/ViewRecord/GetSoftwareChoice',
  responseTime: 750,
  responseText: {
    status: 'success',
    result: 'your data can be put here' //in that case it is data.result with value string
  }
});

你可以测试ajax调用的请求，你可以测试点击，你可以测试其他的行为。

附言。您用您的结果“覆盖”ajax 调用。 PS2。 Mockjax 可以在这里找到：https://github.com/appendto/jquery-mockjax

【讨论】：