Qunit parameterized tests and mocking

Question

I have two questions:

Can you have parameterised unit tests in qunit?

How do you do mocking with qunit e.g. mocking a getJSON call?

Thanks

Ferment

Answer 1

For mocking ajax requests, you can try something like this...

Here's the function you want to test:

    var functionToTest = function () {
        $.ajax({
            url: 'someUrl',
            type: 'POST',
            dataType: 'json',
            data: 'foo=1&foo=2&foo=3',
            success: function (data) {
                $('#main').html(data.someProp);
            }
        });
    };

Here's the test case:

    test('ajax mock test', function () {
        var options = null;
        jQuery.ajax = function (param) {
            options = param;
        };
        functionToTest();
        options.success({
            someProp: 'bar'
        });
        same(options.data, 'foo=1&foo=2&foo=3');
        same($('#main').html(), 'bar');
    });

It's essentially overriding jQuery's ajax function and then checks the following 2 things: - the value that was passed to the ajax function - invokes the success callback and asserts that it did what it was supposed to do

Sanctum

It took me about half an hour to get the function(param){options=param;}, but then it hit me... Really cool. – Vestigial

If you were testing nested calls, would these options be best kept in an array and for each call to .push() the options objects to that array? – Darwinism

@James Kingsbery If you got it can you explain it? – Chickamauga

Answer 2

Instead of overriding jQuery's AJAX function, you could also use the jQuery Mockjax plugin developed by .appendTo. This plugin essentially does what the other answer suggests, but it allows for much more sophisticated mocking. For example, if you have the function:

$.ajax({
    url:"/api/user",
    type:"GET",
    dataType:"json",
    data:'{"uid":"foobar"}',
    success:function(data){
        console.log("Success!");
    },
    error:function(data){
        console.log("Error!");
    }
});

You can mock it with mockjax by simply calling the function mockjax, which is automatically included in jQuery:

$.mockjax({
    url:"/api/user",
    type:"GET",
    response:function(requestData){
         //handle the mock response in here
         this.responseText = '{"fullname":"Mr. Foo Bar"}';
    }
});

The second mocking function can be included in an external JavaScript file, say "mocks.js," and the only other thing that needs to be done is include the mockjax library (which can be found at https://github.com/appendto/jquery-mockjax/). The only thing to keep in mind is that this will only mock jQuery ajax calls, not all XMLHttpRequests. If you want to do that, then follow @bertvh's advice and use Sinon.js.

Dupondius

+1 to using mockjax. I've just started using it and it's pretty good for unit testing as well as dummy data for screen development. The only issue I had was the json data files were being cached by Chrome browser. Clearing the cache fixed any stale file issues. – Sapphira

Answer 3

I just started using Sinon.JS, which allows mocking of XMLHttpRequests and also offers a simple fake-server API. Really easy to use! It also offers integration with qunit.

Ardent

Answer 4

There is my implementation of addon which allows to parameterize qunit tests: https://github.com/AStepaniuk/qunit-parameterize

Minion

Answer 5

See this link to mock the getJSON call in your setup/teardown methods, http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=505

Dumfound

Dead link, FYI. – Riley