Cómo espiar la solicitud jQuery AJAX?

Question

Las dos formas siguientes de implementar un ajaxRequest (1) (2) deben ser equivalentes.
Una vez dicho esto:

1. ¿Por qué la unidad de prueba (3) que verifica la devolución de llamada se ejecuta, tiene éxito en (1) y falla en (2)?
2. ¿Cómo debo volver a escribir la prueba (3) para espiar la devolución de llamada correcta en (2)?
3. Si trato de stub jQuery.ajax usando sinon y el código (2) me sale un error. ¿Cómo debería arreglarlo?

Por favor, vea los comentarios en el código (3) para más detalles.

---

(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

Aquí hay un tutorial:

Si se utiliza el código en el número 2, que está invocando la función ajax de jQuery:

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

después llamando a esta función con esos parámetros, jQuery devuelve un jqHR que tiene una función de éxito definida. Esa función de éxito se invoca a continuación:

... 
}).success(callback); 

Todo va bien hasta que su prueba de jazmín espíe la función ajax. Las mismas opciones que utilizó para invocar $.ajax se pasan a este nuevo espía.

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

Cuando se pasa este objeto, la función de su falsa realidad intenta llamar options.success, que no existe! De ahí el error.

Answer 2

Hay un complemento jquery que usa sinonjs con qunit y proporciona una manera mucho más fácil de escribir pruebas de Ajax y obtener resultados esperados.

Tome un vistazo a jqueryspy