如何监视jQuery AJAX请求

How to spy jQuery AJAX request?

本文关键字：jQuery AJAX 请求 监视 何监视      更新时间：2023-09-26

以下两种实现ajaxRequest (1( (2(的方法应该是等效的。
话虽如此：

  1. 为什么验证回调是否已执行的单元测试 (3( 在 (1( 中成功，在 (2( 中失败？
  2. 我应该如何重写测试 (3( 以监视 (2( 中的成功回调？
  3. 如果我尝试使用 sinon 和代码 (2( stub jQuery.ajax，则会出现错误。我应该如何解决它？

有关更多详细信息，请参阅代码(3(中的注释。

(1(

ajaxRequest: function (message, callback) {
    return $.ajax({
        url: backendRouter.generate('feedback_send'),
        type: 'POST',
        dataType: 'json',
        data: {
            message: message
        },
        success: callback
    });
}

(二(

ajaxRequest: function (message, callback) {
    return $.ajax({
        url: backendRouter.generate('feedback_send'),
        type: 'POST',
        dataType: 'json',
        data: {
            message: message
        }
    }).success(callback);
}

(三(

it("should execute the callback function on success", function () {
    spyOn($, "ajax").andCallFake(function(options) {
        options.success();
    }); // If I use the code (2) I get the following error
        // TypeError: Object #<Object> has no method 'success'
    var callback = jasmine.createSpy();
    ajaxRequest('some message', callback);
    expect(callback).toHaveBeenCalled();
});

(四(

it("makes a GET request for todo items", function () {
    sinon.stub(jQuery, 'ajax');
    backendController.ajaxRequest('some message', sinon.spy()); 
    // Cannot call method 'success' of undefined
});

下面是一个演练：

如果你使用数字 2 中的代码，你就是在 jquery 上调用 ajax 函数：

return $.ajax({
  url: backendRouter.generate('feedback_send'),
  type: 'POST',
  dataType: 'json',
  data: {
    message: message
  }
...

使用这些参数调用此函数后，jQuery 返回一个恰好定义了成功函数的 jqHR。 然后调用该成功函数：

...
}).success(callback);

到目前为止，一切都很好，直到您的茉莉花测试监视 ajax 函数。 您用来调用$.ajax的相同选项将传递给此新间谍。

// this is the value of the options parameter
{
    url: backendRouter.generate('feedback_send'),
    type: 'POST',
    dataType: 'json',
    data: {
        message: message
    }
}

当这个对象被传递时，你的假函数实际上试图调用options.success，它不存在！ 因此错误。

有一个jquery插件，它将sinonjs与qunit一起使用，并提供了一种更简单的方法来编写ajax测试并获得预期的结果。

看看jqueryspy

相关文章：