0

我正在 Qunit 中为 webclient viewmodel 编写测试，并使用 Mockjax 来模拟​​ ajax 请求，但似乎我在模拟时做错了，请帮我解决以下问题。

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

测试结果：

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)

我相信问题是与 ajax 请求有关。请帮助我您的宝贵经验。

4

1 回答 1

0

你的 mockjax 设置必须在你的源代码之前。WebmailViewModel在上面的代码中，您在设置 mockjax 请求处理程序之前初始化（执行 ajax 请求）。尝试构建这样的东西：

// 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": "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();
    });
});
于 2014-06-09T19:41:33.970 回答