Проблема с дразнящим запросом ajax

Question

Я пишу тест для веб-клиента viewmodel в Qunit и использовал Mockjax для имитации запроса ajax, но, похоже, я что-то не так делаю во время moking, пожалуйста, помогите мне решить следующую проблему.

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": "[e-mail]",
        "to": "[e-mail]",
        "subject": "Subject1",
        "date": "22/05/2014"
    }; 

    vm = new WebmailViewModel();

    $.mockjax({
        url: "/mail",
        contentType: "application/json",
        responseTime: 0,
        response: function (settings) {
            this.responseText = {"from": "[e-mail]", "to": "[e-mail]", "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);
});

Результат испытаний:

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

Result: function c( ){
    [code]
}

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

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

Я верю, что проблема заключается в том, чтобы высмеивать запрос Ajax Пожалуйста, помогите мне с вашим ценным опытом.

Answer 1

Ваша настройка mockjax должна предшествовать вашему исходному коду. В приведенном выше коде вы инициализируете WebmailViewModel (который выполняет запросы ajax) перед настройкой обработчика запросов mockjax. Попробуйте структурировать такие вещи:

// 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);
        });
    };
};

Теперь вы можете создать свой тестовый код с обратными вызовами, когда они закончат подключать ваши утверждения в...

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

// then create your test...
test("web mail client test", function() {
    stop();
    var returnedData = {
        "from": "[e-mail]",
        "to": "[e-mail]",
        "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();
    });
});