Question

我有一个带有如下按钮的html页面：

<input id='btnSubmit' type='button'/>

触发document.ready函数中定义的单击处理程序，如下所示：

$(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文件：

QUnit.test("Test", function (assert) {
            var fixture = $("#qunit-fixture");
            fixture.append("<input type='button' id='btnSubmit'/>");
            $("#btnSubmit").trigger("click");
            assert(something);        
});

我在这个文件中有很多其他测试都正常执行，但每当我尝试创建一个测试来运行qunit-fixture中元素的事件处理程序时，它就无法调用实际的处理程序。

我知道我需要模拟ajax调用来真正测试这个函数。但我首先需要确定如何触发事件。如何使用qunit正确触发和测试事件？

Answer 1

好的，我最后只是在测试html文档的正文中添加了按钮而不是通过qunit-fixture元素。现在$（“＃btnSubmit”）。触发器（“点击”）;触发被测JS文件中的实际事件处理程序。哦，我做的另一件事是将按钮标记为隐藏，这是不必要的，但清理测试文档。所以最终版本看起来像这样：

要测试的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...       
});

Answer 2

这里是QUnit中存在的事件列表和简单实现

EVENT ，说明

开始：测试套件开始时触发
完成：测试套件结束时触发
log：断言完成后触发
moduleDone：模块完成时触发
moduleStart：模块启动时触发
testDone：测试完成时触发

testStart：测试开始时触发

QUnit.begin(function( details ) {
   console.log( "Event for Test Suit Starting." );
});

QUnit.done(function( details ) {
  console.log( "Event for Test Suit Ending. Results: Total: ", details.total, " Failed: ", details.failed, " Passed: ", details.passed, " Runtime: ", details.runtime );
});

QUnit.log(function( details ) {
 console.log( "Event for Assertion complete. Details: ", details.result, details.message );
});

QUnit.moduleStart(function( details ) {
  console.log( "Event for Starting module: ", details.module );
});

QUnit.moduleDone(function( details ) {
 console.log( "Event for Finished Running Module: ", details.name, "Failed/total: ", details.failed, details.total );
 });

QUnit.testStart(function( details ) {
 console.log( "Event for Now Running Test: ", details.module, details.name );
});

QUnit.testDone(function( details ) {
 console.log( "Event for Finished Running Test: ", details.module, details.name, "Failed/total: ", details.failed, details.total, details.duration );
});

QUnit如何测试事件？

2 个答案: