Issue with mocking ajax request

Question

I am writing a test for webclient viewmodel in Qunit and used Mockjax for moking ajax request, but it seems i am doing something wrong while moking, please help me to solve the following problem.

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();
    self.chosenFolderData = ko.observable();
    self.chosenMailData = ko.observable();

    // Behaviours
    self.goToFolder = function(folder) { 
        self.chosenFolderId(folder);
        self.chosenMailData(null); // Stop showing a mail
        $.post('/mail', { folder: folder }, function(returnedData) {
            self.chosenFolderData(returnedData);
        });
    }

    self.goToMail = function(mail) { 
        self.chosenFolderId(mail.folder);
        self.chosenFolderData(null); // Stop showing a folder
        $.get("/mail", { mailId: mail.id }, self.chosenMailData);
    };

    self.goToFolder('Inbox');
};

$(function() { 
    ko.applyBindings(new WebmailViewModel());
});

test("web mail client test", function() {
    stop(2); 
    var returnedData = {
        "from": "[email protected]",
        "to": "[email protected]",
        "subject": "Subject1",
        "date": "22/05/2014"
    }; 

    vm = new WebmailViewModel();

    $.mockjax({
        url: "/mail",
        contentType: "application/json",
        responseTime: 0,
        response: function (settings) {
            this.responseText = {"from": "[email protected]", "to": "[email protected]", "subject":"Subject1", "date":"22/05/2014"}; 
            start();
        }
    });

    vm.goToFolder('Inbox');

    setTimeout(function() {    
        deepEqual(vm.chosenFolderData,returnedData, "Two objects can be the same in value" ); 
        start();
    }, 150);
});

Test Result:

Two objects can be the same in valueExpected: {
    "date": "22/05/2014",
    "from": "[email protected]",
    "subject": "Subject1",
    "to": "[email protected]"
}

Result: function c( ){
    [code]
}

Diff: {
    "date": "22/05/2014",
    "from": "[email protected]",
    "subject": "Subject1",
    "to": "[email protected]"
    function c( ){
        [code]
} 

Source: at Anonymous function (file:///C:/Users/dasssdeb/Desktop/JS%20Tests/QUnit/tests/tests.js:174:8)

I belive issue is with moking the ajax request. please help me with your valuable experience.

Answer 1

Your mockjax setup must come before your source code. In the code above you initialize the WebmailViewModel (which performs ajax requests) before you set up the mockjax request handler. Try structuring things like this instead:

// SOURCE CODE
// in your source code you will need to have a callback for your WebmailViewModel method arguments...
function WebmailViewModel() {
    // ...

    // Behaviours
    self.goToFolder = function(folder, callback) { 
        self.chosenFolderId(folder);
        self.chosenMailData(null); // Stop showing a mail
        $.post('/mail', { folder: folder }, function(returnedData) {
            self.chosenFolderData(returnedData);
            callback(returnedData);
        });
    }

    self.goToMail = function(mail) { 
        self.chosenFolderId(mail.folder);
        self.chosenFolderData(null); // Stop showing a folder
        $.get("/mail", { mailId: mail.id }, function(returnedData) {
            self.chosenMailData(returnedData);
            callback(returnedData);
        });
    };
};

Now you can create your test code with callbacks when they finish to hook your assertions into...

// TEST CODE
// Set up the request handler first...
$.mockjax({
    url: "/mail",
    contentType: "application/json",
    responseTime: 0,
    response: function (settings) {
        this.responseText = {"from": "[email protected]", "to": "[email protected]", "subject":"Subject1", "date":"22/05/2014"};
    }
});

// then create your test...
test("web mail client test", function() {
    stop();
    var returnedData = {
        "from": "[email protected]",
        "to": "[email protected]",
        "subject": "Subject1",
        "date": "22/05/2014"
    }; 

    vm = new WebmailViewModel();

    vm.goToFolder('Inbox', function(returnedData) {
        // this is the callback for when going to the folder finishes...
        deepEqual(vm.chosenFolderData, returnedData, "Two objects can be the same in value" );
        start();
    });
});