Come spiare la richiesta jQuery AJAX?

Question

Le seguenti due modalità di implementazione di ajaxRequest (1) (2) dovrebbero essere equivalenti.
Detto questo:

1. Perché l'test di unità (3) che verifica la richiamata è stato eseguito, riesce a (1) e non riesce a (2)?
2. Come dovrei riscrivere il test (3) per spiare il callback di successo in (2)?
3. Se provo a stub jQuery.ajax usando sinon e il codice (2) ottengo un errore. Come dovrei risolverlo?

Per ulteriori dettagli, vedere i commenti nel codice (3).

---

(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

Ecco una guida:

Se si utilizza il codice di numero 2, si invoca la funzione ajax su jQuery:

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

dopo chiamando questa funzione con questi parametri, jQuery restituisce un jqHR che ha una funzione riuscita definita. Tale funzione successo viene poi invocato:

... 
}).success(callback); 

Tutto va bene fino ad ora fino a quando le spie di gelsomino di test sulla funzione ajax. Le stesse opzioni utilizzate per invocare $.ajax vengono passate a questa nuova spia.

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

Quando viene superato questo oggetto, la vostra funzione falso in realtà tenta di chiamare options.success, che non esiste! Quindi l'errore.

Answer 2

C'è un plug-in jquery che utilizza sinonjs con qunit e fornisce un modo molto più semplice di scrivere test ajax e ottenere risultati attesi.

Date un'occhiata a jqueryspy