Issue with mocking ajax request - mockjax

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": "deba#tieto.com",
"to": "test1#tieto.com",
"subject": "Subject1",
"date": "22/05/2014"
};
vm = new WebmailViewModel();
$.mockjax({
url: "/mail",
contentType: "application/json",
responseTime: 0,
response: function (settings) {
this.responseText = {"from": "deba#xyz.com", "to": "test1#xyz.com", "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": "deba#tieto.com",
"subject": "Subject1",
"to": "test1#tieto.com"
}
Result: function c( ){
[code]
}
Diff: {
"date": "22/05/2014",
"from": "deba#tieto.com",
"subject": "Subject1",
"to": "test1#tieto.com"
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": "deba#xyz.com", "to": "test1#xyz.com", "subject":"Subject1", "date":"22/05/2014"};
}
});
// then create your test...
test("web mail client test", function() {
stop();
var returnedData = {
"from": "deba#tieto.com",
"to": "test1#tieto.com",
"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();
});
});