woogy woogy - 6 months ago 72
Javascript Question

QUnit how to test events?

I have an html page with a button like this:

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


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('yeah');
},
error: function (request, status, error) {
LogError(request, startDate, error);
location.href = "error/error";
}
});
}
}


Now I want to test this functionality though 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);
});


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.

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? I have reviewed the documentation and searched to no avail.

Answer

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 document to test:

<html>
<head>
<body>
    <input id='btnSubmit' type='button'/>
<...

JavaScript to test:

$(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 test file:

<!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...       
});