使用 qunit 和 mockjax 测试 ajax 调用

Question

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

我的淘汰视图模型中的功能 -

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(); 时，该函数立即返回，这意味着您的equal() 断言在源代码中ajax 调用的success 处理程序之前触发。您需要添加一些方法让测试知道 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，所以要么更新，要么你去查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();
    });
});