QUnit如何测试事件? [英] QUnit how to test events?
问题描述
我有一个带有这样的按钮的html页面:
I have an html page with a button like this:
<input id='btnSubmit' type='button'/>
触发在document.ready函数中定义的点击处理程序，如下所示:
which triggers a click handler defined within the document.ready function like this:
$(document).ready(function () {
$("#btnSubmit").click(function () {
$.ajax({
url: myUrl,
data: { 'startDate': startDateId, 'endDate': endDateId },
dataType: "json",
type: "POST",
cache: false,
success: function (data) {
alert('yay!');
},
error: function (request, status, error) {
LogError(request, startDate, error);
location.href = "error/error";
}
});
}
}
现在，我想使用QUnit测试此功能，因此我在一个单独的html文件中构建了以下单元测试，该文件引用了包含上述代码块的.js文件:
Now I want to test this functionality with QUnit, so I have built the following unit test in a separate html file that references the .js file containing the code blocks above:
QUnit.test("Test", function (assert) {
var fixture = $("#qunit-fixture");
fixture.append("<input type='button' id='btnSubmit'/>");
$("#btnSubmit").trigger("click");
assert(something);
});
此文件中还有许多其他测试都可以正常执行，但是每当我尝试创建一个测试来测试qunit-fixture中某个元素的事件处理程序的测试时，它都无法调用实际的处理程序.
I have numerous other tests within this file that are all executing properly, but whenever I try to create a test that exercises the event handler of an element within the qunit-fixture, it fails to call the actual handler.
我知道我需要模拟ajax调用才能真正测试该功能.但是我首先需要确定如何触发事件.如何使用qunit正确触发和测试事件?
I understand that I will need to mock the ajax call to truly test this function. But I first need to determine how to trigger the event. How do I properly trigger and test events with qunit?
推荐答案
好，我最终只是在测试html文档的正文中添加了按钮，而不是通过qunit-fixture元素.现在$(#btnSubmit").trigger("click");触发被测JS文件中的实际事件处理程序.哦，我要做的另一件事是将按钮标记为隐藏，这不是必需的，但是会清理测试文档.因此最终版本如下:
OK, I ended up just adding the button within the body of the test html document rather than through the qunit-fixture element. Now $("#btnSubmit").trigger("click"); triggers the actual event handler within the JS file under test. Oh, one other thing I did was mark the button as hidden which isn't necessary, but cleans up the test document. So the final version looks like this:
要测试的html文档:
<html>
<head>
<body>
<input id='btnSubmit' type='button'/>
<...
要测试的JavaScript:
$(document).ready(function () {
$("#btnSubmit").click(function () {
$.ajax({
url: myUrl,
data: { 'startDate': startDateId, 'endDate': endDateId },
dataType: "json",
type: "POST",
cache: false,
success: function (data) {
alert('yeah!');
},
error: function (request, status, error) {
LogError(request, startDate, error);
location.href = "error/error";
}
});
}
}
QUnit测试文件:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>QUnit Tests</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
<script src="http://code.jquery.com/qunit/qunit-1.14.0.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<input id='btnSubmit' type='button' hidden='hidden'/>
<script>
QUnit.test("Test", function (assert) {
$("#btnSubmit").trigger("click");
//assertions...
});
这篇关于QUnit如何测试事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
