Jak śledzić żądanie jQuery AJAX?

Question

Następujące dwa sposoby implementacji ajaxRequest (1) (2) powinny być równoważne.
Mimo, że:

1. Dlaczego testów jednostkowych (3), który weryfikuje zwrotnego został stracony, udaje się (1), a nie w (2)?
2. W jaki sposób powinienem przepisać test (3) w celu sprawdzenia oddzwaniania powodzenia w (2)?
3. Jeśli spróbuję użyć stub jQuery.ajax używając sinon i kodu (2) otrzymuję błąd. Jak mam to naprawić?

Proszę zobaczyć komentarze w kodzie (3), aby uzyskać więcej informacji.

---

(1)

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

---

(2)

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

---

(3)

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

---

(4)

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

Answer 1

Oto solucja:

Jeśli używasz kodu z numerem 2, jesteś wywoływanie funkcji ajax na jQuery:

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

po wywołując tę ​​funkcję za pomocą tych parametrów, jQuery zwraca wartość jqHR, która ma zdefiniowaną funkcję sukcesu. Że sukces jest wtedy funkcja wywoływana:

... 
}).success(callback); 

Wszystko jest dobrze do tej pory, aż jaśminu testowych szpiegów o funkcji ajax. Te same opcje, które zostały użyte do wywołania $.ajax, są przekazywane temu nowemu szpiegowi.

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

Gdy obiekt zostanie przekazany, twoja fałszywa funkcja faktycznie próbuje zadzwonić options.success, która nie istnieje! Stąd błąd.

Answer 2

Istnieje wtyczka jquery, która używa sinonjs z qunit i zapewnia znacznie łatwiejszy sposób pisania testów ajaxowych i uzyskania oczekiwanych rezultatów.

Spójrz na jqueryspy