Testing with QUnit: a test mouse

Question

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 a library):

 $(function() { $("#username").click(function() { $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) { // use data to manipulate other controls }); }); }); 

Now, how to check $("#username").click so that for a given input it

• calls the correct URL (in this case its ViewRecord/GetSoftwareChoice )
• And is an output expected (in this case function(data) )?

Any idea how to do this with QUnit ?

Edit: I read QUnit Examples , but they seem to be dealing with a simple script without AJAX interaction. And although there are ASP.NET MVC examples , but I think they really test the server output for an AJAX call, i.e. It is still checking the server response, not the AJAX response. I want to test the response on the client side.

Answer 1

You can replace the anonymous event handler with a function call, and in your tests you could just call that function.

So instead

 $("#username").click(function() { $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) { // use data to manipulate other controls }); }); 

You can do something like

 function doSomething() { $.getJSON("ViewRecord/GetSoftwareChoice", {}, function(data) { // use data to manipulate other controls }); } $("#username").click(doSomething); 

And then in QUnit tests you can just call

 doSomething(); 

Answer 2

• override $ .getJSON in your test to validate the passed in URL is correct. if you need to do this a lot, you can create a helper function that overrides getJSON and validates the url. Be sure to call the default implementation after approval. Also, after you confirm the URL, stop () the test.

Wrap the passed in callback with a function that starts the test and calls the callback.

Run the test.

click on the name #username.

Edit:

This may help: QUnit with Ajax, QUnit passes failed tests

Answer 3

You do not always want to make real ajax calls. In this case, mockjax is a great solution. You can assign a return value in your test. Thus, you can request information without requiring implementation or other files.

In your case, it might be something like this:

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

You can test the ajax call request, you can test the click, and you can test the different behavior.

Ps. You override the ajax call with your result. Ps2. Mockjax can be found here: https://github.com/appendto/jquery-mockjax