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 c

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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