Knockout.js 使用qunit和mockjax测试ajax调用

我正试图通过ajax调用来测试这一点。我需要测试调用的url是否正确，数据和结果是否正确。从失败的测试开始。我得到的错误是“预期：已保存，实际：”

函数在my knockout viewmodel中的作用-

self.functions.save = function () {
    $.ajax({
        url: '/x',
        data: { test: "" },
        dataType: "json",
        success: function (response) {
            self.saved(response.message);
        }
    });
};

Qunit试验-

test('save does ajax call', function () {
        $.mockjax({
            url: '/x',
            dataType: 'json',
            responseText:
                {
                    message: 'saved'
                }
        });
        mock.functions.save();
        equal(mock.saved(), "saved");
});

---

这里的问题是执行顺序。您的

save（）

方法执行异步操作，Mockjax尊重这一点。因此，当您调用

mock.functions.save（）时

在测试中，该函数立即返回，这意味着您的

equal（）

断言在源代码中ajax调用的

success

处理程序之前触发。您需要添加一些方法让测试知道Ajax调用何时完成。在下面的示例中，我使用了一个简单的回调，但您也可以使用承诺或其他方法来实现

源代码：

self.functions.save = function (callback) {
    callback = callback || function(){};  // ensure we have a callback
    $.ajax({
        url: '/x',
        data: { test: "" },
        dataType: "json",
        success: function (response) {
            self.saved(response.message);
        },
        // when the call is finished, execute the callback (success or error)
        complete: function () {
            callback();
        }
    });
};

在测试中，您需要使用QUnit的异步功能。有一个，所以要么更新，要么您可以查找：

---

您应该在成功回调中放入

console.log（response）

语句，以查看您的mockajax是否正确配置并返回了预期的响应……这是可行的，但是为了测试而在代码库中引入额外代码的方法听起来是错误的。我认为您不理解这个问题。这并不是在源代码中引入任意额外的代码行，而是引入一个回调函数来通知任何调用代码异步操作已经完成。否则，除非设置任意超时，否则无法测试此方法，这是非常糟糕的测试实践。换句话说，代码不是为了“测试”而添加的，而是为了源代码中适当的异步编码风格而添加的，这也有助于测试。我想我确实理解这个问题，除非你有更有力的理由反对。我从来没有说过这是任意代码，尽管代码库可以在没有回调的情况下愉快地离开，而不是测试。然而，目前我还不知道还有其他可行的解决方案。

QUnit.test('save does ajax call', function (assert) {
    // first tell QUnit you need to perform async actions...
    var done = QUnit.async();

    $.mockjax({
        url: '/x',
        dataType: 'json',
        responseText:
            {
                message: 'saved'
            }
    });
    mock.functions.save(function() {
        // this callback fires when the async action is complete,
        // so now we do our assertions
        assert.equal(mock.saved(), "saved");

        // ...and now we tell QUnit we're done with async actions
        done();
    });
});