Jasmine에서 jQuery AJAX 이벤트를 확인하려면 어떻게 해야 합니까?

Jasmine에서 jQuery AJAX 이벤트를 확인하려면 어떻게 해야 합니까?

Jasmine은 jQuery AJAX의 BDD입니다.모드로 Jasmine을 통해).SpecRunner.htmljquery.js.js.SpecRunner.jquery 。왜 다음 사항이 작동하지 않는지 알고 계십니까?has_hasks " "yppi!" 경보가 정상적으로 표시된다고 해도 true가 되지 않습니다.

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 테스트와 관련된 블로그/자료에 대한 포인트는 매우 감사할 것입니다.

다음 두 가지 테스트를 수행할 수 있습니다.

1. 유닛 테스트에서는 (Jasmine의 스파이를 사용하여) AJAX 요청을 위조하여 AJAX 요청 직전과 직후에 실행되는 모든 코드를 테스트할 수 있습니다.Jasmine을 사용하여 서버의 응답을 위조할 수도 있습니다.실제 AJAX가 실행되고 있지 않기 때문에 이러한 테스트는 더 빠르고 비동기 동작을 처리할 필요가 없습니다.
2. 실제 AJAX 요구를 실행하는 통합 테스트.이것들은 비동기여야 합니다.

재스민은 두 가지 테스트를 모두 할 수 있도록 도와줄 수 있다.

다음으로 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(), waits For() 및 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
    });
}

재스민 프로젝트 http://github.com/pivotal/jasmine-ajax를 보세요.

(jQuery 또는 PROTEM.js의 경우) 요청이 전송되지 않도록 XHR 계층에 스터브하는 드롭인 도우미입니다.그러면 요청에 대해 원하는 모든 것을 기대할 수 있습니다.

그런 다음 모든 사례에 대한 고정 응답을 제공한 다음 성공, 실패, 무허가 등 원하는 각 응답에 대한 테스트를 작성할 수 있습니다.

Ajax 콜을 비동기 테스트의 영역에서 벗어나 실제 응답 핸들러의 동작을 테스트하기 위한 많은 유연성을 제공합니다.

다음은 다음과 같은 앱 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();
 });
});

Jasmine에서 Ajax 코드를 지정하면 원격 호출을 시작하는 종속 함수(예: $.get 또는 $ajax)를 감시함으로써 문제를 해결합니다.그런 다음 설정된 콜백을 가져와 개별적으로 테스트합니다.

다음은 제가 최근에 제시한 예입니다.

https://gist.github.com/946704

Try jqueryspy.com 테스트를 설명하는 우아한 jquery와 같은 구문을 제공하며 Ajax가 완료된 후 콜백을 테스트할 수 있습니다.통합 테스트에 매우 적합하며 최대 에이잭스 대기 시간을 초 또는 밀리초 단위로 설정할 수 있습니다.

Jasmine은 현재 버전 2.4이고 버전 2.0에서 몇 가지 기능이 변경되었기 때문에 좀 더 최신 답변을 해야 할 것 같습니다.

따라서 AJAX 요구 내에서 콜백 함수가 호출되었는지 확인하려면 스파이를 만들고 거기에 call Fake 함수를 추가한 후 스파이를 콜백 함수로 사용해야 합니다.방법은 다음과 같습니다.

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

Jasmine이 에러를 반환해도 가능한 한 빨리 스펙을 실행할 수 있도록 success 함수와 에러 함수의 트릭을 실행했습니다.

에러 함수를 지정하지 않고 AJAX가 에러를 반환하는 경우는, 재스민이 에러를 송신할 때까지 5초(디폴트 타임 아웃 간격)를 기다려야 합니다.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

언급URL : https://stackoverflow.com/questions/4662641/how-do-i-verify-jquery-ajax-events-with-jasmine