QUnit Unit Testing: Test Mouse Click
- by Ngu Soon Hui
I have the following HTML code:
<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>
And the following Javascript code ( with JQuery as the library):
$(function() {
$("#username").click(function() {
$.getJSON("ViewRecord/GetSoftwareChoice", {},
function(data) {
// use data to manipulate other controls
});
});
});
Now, how to test $("#username").click so that for a given input, it
calls the correct url ( in this case, its ViewRecord/GetSoftwareChoice)
And, the output is expected (in this case, function(data)) behaves correctly?
Any idea how to do this with QUnit?
Edit: I read the QUnit examples, but they seem to be dealing with a simple scenario with no AJAX interaction. And although there are ASP.NET MVC examples, but I think they are really testing the output of the server to an AJAX call, i.e., it's still testing the server response, not the AJAX response. What I want is how to test the client side response.
