如何验证jQuery的AJAX事件与茉莉？

问题描述

我试图用茉莉花来写一些BDD规范为基础的jQuery AJAX请求。我目前使用的茉莉花在独立模式（即通过 SpecRunner.html ）我。我已经配置SpecRunner加载jQuery和其他的.js文件。任何想法，为什么下不工作？ has_returned不会成为真正的，甚至想到了yuppi！警报显示的罚款。

I am trying to use Jasmine to write some BDD specs for basic jQuery AJAX requests. I am currently using Jasmine in standalone mode (i.e. through SpecRunner.html). I have configured SpecRunner to load jquery and other .js files. Any ideas why the following doesn't work? has_returned does not become true, even thought the "yuppi!" alert shows up fine.

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

});

我如何测试回调已经叫什么名字？任何与测试相关的异步jQuery的茉莉指针博客/材料将大大AP preciated。

How do I test that the callback has been called? Any pointers to blogs/material related to testing async jQuery with Jasmine will be greatly appreciated.

推荐答案

我想有两种类型的测试，你可以这样做：

I guess there are two types of tests you can do:

1. 在单元测试，假冒AJAX请求（采用茉莉花的间谍），让你在运行的测试所有的code之前的AJAX请求，和只是事后。你甚至可以用茉莉花伪造来自服务器的响应。这些测试会更快 - 而且他们不会需要处理异步行为 - 因为没有任何真正的AJAX回事
2. 执行真正的AJAX请求集成测试。这些需要是异步的。

1. Unit tests that fake the AJAX request (using Jasmine's spies), enabling you to test all of your code that runs just before the AJAX request, and just afterwards. You can even use Jasmine to fake a response from the server. These tests would be faster - and they would not need to handle asynchronous behaviour - since there isn't any real AJAX going on.
2. Integration tests that perform real AJAX requests. These would need to be asynchronous.

茉莉花可以帮你做两种类型的测试。

Jasmine can help you do both kinds of tests.

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

Here is a sample of how you can fake the AJAX request, and then write a unit test to verify that the faked AJAX request was going to the correct 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"
    });
}

对于茉莉花2.0 使用来代替：

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

在this回答

下面是一个类似的单元测试，验证你的回调被处决，在一个AJAX请求成功完成：

Here is a similar unit test that verifies your callback was executed, upon an AJAX request completing successfully:

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

对于茉莉花2.0 使用来代替：

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

在this回答

最后，你在别处暗示你可能要编写集成测试，使真正的AJAX请求 - 集成的目的。等待（），waitsFor（）和运行（）：这可以通过茉莉花asyncronous功能来完成

Finally, you have hinted elsewhere that you might want to write integration tests that make real AJAX requests - for integration purposes. This can be done using Jasmine's asyncronous features: waits(), waitsFor() and 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
    });
}

这篇关于如何验证jQuery的AJAX事件与茉莉？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！