QUnit with Ajax! QUnit passes the failing tests!

Question

I am looking into QUnit for JavaScript unit testing. I am in a strange situation where I am checking against the value returned from the Ajax call.

For the following test I am purposely trying to fail it.

 // test to check if the persons are returned! 
        test("getPersons", function() {

            getPersons(

            function(response) {

                //persons = $.evalJSON(response.d);                
                equals("boo", "Foo", "The name is valid");
            }
            );

But it ends up passing all the time. Here is the getPersons method that make the Ajax call.

function getPersons(callback) {

    var persons = null;

    $.ajax(

    {
        type: "POST",
        dataType: "json",
        data: "{}",
        contentType: "application/json",
        url: "AjaxService.asmx/GetPersons",
        success: function(response) {            
            callback(response);
        }
    }
    );   

}

Answer 1

ive done some qunit testing with ajax. its not pretty. the best thing i could come with is stopping the test when ajax is fired, and starting it again in the success callback. (using start() and stop()) methods. This meant one ajax request at a time, but i could live with that. Good luck

Answer 2

Starting and stopping using the QUnit library seems to be working!

 // test to check if the persons are returned! 
        test("getPersons", function() {

            stop();

            getPersons(

            function(response) {
            persons = $.evalJSON(response.d);

            equals(persons[0].FirstName, "Mohammad");

                start();

            }
            );



        });

Answer 3

The real problem here isn't needing to call the start() and stop() methods - in fact you could get into trouble using that approach if you are not careful in calling stop() again at the end of your callback if you have additional .ajax() methods. Which then means you find yourself in some snarled mess of having to keep track if all the callbacks have been fired to know if you still need to call stop() again.

The root of the problem involves the default behavior of asynchronous requests - and the simple solution is to make the .ajax() request happen synchronously by setting the async property to false:

test("synchronous test", function() {
  $.ajax({
    url:'Sample.asmx/Service',
    async:false,
    success: function(d,s,x) { ok(true, "Called synchronously"); }
  });
});

Even still, the best approach is to allow the asynchronous behavior and use the right test method invocation: asyncTest(). According to the docs "Asynchronous tests are queued and run one after the other. Equivalent to calling a normal test() and immediately calling stop()."

test("asynchronous test", function() {
  asyncTest("a test", function() {
    $.ajax({
      url: 'Sample.asmx/Service',
      success: function(d,s,x) {
        ok(true, "asynchronous PASS!");
        start();
      }
    });
  });
});