使用 qunit 和 mockjax 测试 ajax 调用

Question

我正在尝试测试 ajax 调用。我需要测试是否使用正确的数据和结果调用了正确的 url。从这个失败的测试开始。我得到的错误是 "Expected: saved, Actual: ".

我的 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");
});

Answer 1

这里的问题是执行顺序。您的 save() 方法执行异步操作，Mockjax 尊重这一点。因此，当您在测试中调用 mock.functions.save(); 时，该函数 立即 returns，这意味着您的 equal() 断言在 success 处理程序之前触发源代码中的 ajax 调用。您需要添加一些方法让测试知道 Ajax 调用何时完成。在下面的示例中，我使用了一个简单的回调，但您也可以使用 Promises 或其他一些方法来实现。

源代码：

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的异步能力。有一个new way to do async testing in v1.16.0, so either update, or you can look up the old way:

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

使用 qunit 和 mockjax 测试 ajax 调用

Test ajax call with qunit and mockjax

knockout.js

qunit

mockjax