115

我正在尝试使用 Jasmine 为基本的 jQuery AJAX 请求编写一些 BDD 规范。我目前在独立模式下使用 Jasmine（即通过SpecRunner.html）。我已将 SpecRunner 配置为加载 jquery 和其他 .js 文件。任何想法为什么以下不起作用？has_returned 没有变成真的，甚至想到了“雅皮！” 警报显示正常。

describe("A jQuery ajax request should be able to fetch...", function() {

  it("an XML file from the filesystem", function() {
    $.ajax_get_xml_request = { has_returned : false };  
    // initiating the AJAX request
    $.ajax({ type: "GET", url: "addressbook_files/addressbookxml.xml", dataType: "xml",
             success: function(xml) { alert("yuppi!"); $.ajax_get_xml_request.has_returned = true; } }); 
    // waiting for has_returned to become true (timeout: 3s)
    waitsFor(function() { $.ajax_get_xml_request.has_returned; }, "the JQuery AJAX GET to return", 3000);
    // TODO: other tests might check size of XML file, whether it is valid XML
    expect($.ajax_get_xml_request.has_returned).toEqual(true);
  }); 

});

如何测试回调是否被调用？任何指向与使用 Jasmine 测试异步 jQuery 相关的博客/材料的指针将不胜感激。

4

6 回答 6

235

我想你可以做两种类型的测试：

  1. 伪造 AJAX 请求的单元测试（使用 Jasmine 的间谍），使您能够测试在 AJAX 请求之前和之后运行的所有代码。你甚至可以使用 Jasmine 来伪造来自服务器的响应。这些测试会更快——它们不需要处理异步行为——因为没有任何真正的 AJAX 发生。
  2. 执行真正的 AJAX 请求的集成测试。这些需要是异步的。

Jasmine 可以帮助您进行这两种测试。

下面是一个如何伪造 AJAX 请求的示例，然后编写一个单元测试来验证伪造的 AJAX 请求是否发送到正确的 URL：

it("should make an AJAX request to the correct URL", function() {
    spyOn($, "ajax");
    getProduct(123);
    expect($.ajax.mostRecentCall.args[0]["url"]).toEqual("/products/123");
});

function getProduct(id) {
    $.ajax({
        type: "GET",
        url: "/products/" + id,
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
}

对于Jasmine 2.0 ，请改用：

expect($.ajax.calls.mostRecent().args[0]["url"]).toEqual("/products/123");

如本答案所述

这是一个类似的单元测试，用于验证您的回调是否已在 AJAX 请求成功完成后执行：

it("should execute the callback function on success", function () {
    spyOn($, "ajax").andCallFake(function(options) {
        options.success();
    });
    var callback = jasmine.createSpy();
    getProduct(123, callback);
    expect(callback).toHaveBeenCalled();
});

function getProduct(id, callback) {
    $.ajax({
        type: "GET",
        url: "/products/" + id,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: callback
    });
}

对于Jasmine 2.0 ，请改用：

spyOn($, "ajax").and.callFake(function(options) {

如本答案所述

最后，您在别处暗示您可能想要编写发出真正 AJAX 请求的集成测试 - 用于集成目的。这可以使用 Jasmine 的异步功能来完成：waits()、waitsFor() 和 runs()：

it("should make a real AJAX request", function () {
    var callback = jasmine.createSpy();
    getProduct(123, callback);
    waitsFor(function() {
        return callback.callCount > 0;
    });
    runs(function() {
        expect(callback).toHaveBeenCalled();
    });
});

function getProduct(id, callback) {
    $.ajax({
        type: "GET",
        url: "data.json",
        contentType: "application/json; charset=utf-8"
        dataType: "json",
        success: callback
    });
}
于 2011-06-01T09:37:51.657 回答
13

看看 jasmine-ajax 项目： //github.com/pivotal/jasmine-ajax。

它是一个插入式助手（对于 jQuery 或 Prototype.js）在 XHR 层存根，因此请求永远不会发出。然后，您可以期待有关该请求的所有信息。

然后它允许您为所有案例提供固定响应，然后为您想要的每个响应编写测试：成功、失败、未经授权等。

它使 Ajax 调用脱离了异步测试的范围，并为您测试实际响应处理程序的工作方式提供了很大的灵活性。

于 2011-01-12T17:00:00.600 回答
7

这是一个简单的示例测试套件，适用于这样的应用程序 js

var app = {
               fire: function(url, sfn, efn) {
                   $.ajax({
                       url:url,
                       success:sfn,
                       error:efn
                   });
                }
         };

一个示例测试套件，它将基于 url regexp 调用回调

describe("ajax calls returns", function() {
 var successFn, errorFn;
 beforeEach(function () {
    successFn = jasmine.createSpy("successFn");
    errorFn = jasmine.createSpy("errorFn");
    jQuery.ajax = spyOn(jQuery, "ajax").andCallFake(
      function (options) {
          if(/.*success.*/.test(options.url)) {
              options.success();
          } else {
              options.error();
          }
      }
    );
 });

 it("success", function () {
     app.fire("success/url", successFn, errorFn);
     expect(successFn).toHaveBeenCalled();
 });

 it("error response", function () {
     app.fire("error/url", successFn, errorFn);
     expect(errorFn).toHaveBeenCalled();
 });
});
于 2013-02-01T10:13:25.487 回答
5

当我使用 Jasmine 指定 ajax 代码时，我通过监视启动远程调用的任何依赖函数（例如，$.get 或 $ajax）来解决问题。然后我检索在它上面设置的回调并离散地测试它们。

这是我最近举的一个例子：

https://gist.github.com/946704

于 2011-05-22T00:51:54.567 回答
0

试试 jqueryspy.com 它提供了一个优雅的类似 jquery 的语法来描述你的测试，并允许回调在 ajax 完成后进行测试。它非常适合集成测试，您可以以秒或毫秒为单位配置最大 ajax 等待时间。

于 2012-07-24T16:22:25.377 回答
0

我觉得我需要提供一个更新的答案，因为 Jasmine 现在是 2.4 版，并且一些功能已经从 2.0 版更改。

因此，要验证您的 AJAX 请求中是否调用了回调函数，您需要创建一个间谍，向其添加一个 callFake 函数，然后使用该间谍作为您的回调函数。事情是这样的：

describe("when you make a jQuery AJAX request", function()
{
    it("should get the content of an XML file", function(done)
    {
        var success = jasmine.createSpy('success');
        var error = jasmine.createSpy('error');

        success.and.callFake(function(xml_content)
        {
            expect(success).toHaveBeenCalled();

            // you can even do more tests with xml_content which is
            // the data returned by the success function of your AJAX call

            done(); // we're done, Jasmine can run the specs now
        });

        error.and.callFake(function()
        {
            // this will fail since success has not been called
            expect(success).toHaveBeenCalled();

            // If you are happy about the fact that error has been called,
            // don't make it fail by using expect(error).toHaveBeenCalled();

            done(); // we're done
        });

        jQuery.ajax({
            type : "GET",
            url : "addressbook_files/addressbookxml.xml",
            dataType : "xml",
            success : success,
            error : error
        });
    });
});

我已经完成了成功函数和错误函数的技巧，以确保即使您的 AJAX 返回错误，Jasmine 也会尽快运行规范。

如果您没有指定错误函数并且您的 AJAX 返回错误，则必须等待 5 秒（默认超时间隔），直到 Jasmine 抛出错误Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.。您还可以像这样指定自己的超时时间：

it("should get the content of an XML file", function(done)
{
    // your code
},
10000); // 10 seconds
于 2016-07-17T09:48:30.900 回答