[javascript] Jasmine으로 jQuery AJAX 이벤트를 어떻게 확인합니까?

두 가지 유형의 테스트를 수행 할 수 있습니다.

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

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

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

답변

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

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

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

it("should get the content of an XML file", function(done)
{
    // your code
},
10000); // 10 seconds