Question

我正在为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请求。请帮助我提供宝贵的经验。

Answer 1

您的mockjax设置必须在您的源代码之前。在上面的代码中，在设置mockjax请求处理程序之前初始化WebmailViewModel（执行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();
    });
});

模拟ajax请求的问题

1 个答案: