Estoy escribiendo algunas pruebas de QUnit para un JavaScript que realiza llamadas AJAX.
Para el aislamiento, sobrescribo $.ajax
para escribir la matriz de parámetros de una llamada AJAX a una variable. Esto funciona para probar cómo los métodos usan las funciones AJAX, pero tengo dificultades para probar el controlador de éxito de $.load()
De la documentación en http://api.jquery.com/load/ :
Cuando se detecta una respuesta exitosa (es decir, cuando textStatus es "éxito" o "no modificado"), .load() establece el contenido HTML del elemento coincidente con los datos devueltos.
Entonces, intenté devolver un objeto que contiene objetos con el mismo nombre que las variables para el controlador de éxito:
//Mock ajax function $.ajax = function (param) { _mockAjaxOptions = param; var fakeAjaxSuccess = { responseText: "success", textStatus: "success", XMLHttpRequest: "success" }; return fakeAjaxSuccess; };
Pero este enfoque no ha funcionado.
¿Cómo puedo replicar el comportamiento de una llamada AJAX exitosa?
Esta pregunta tiene algunos años y para las nuevas versiones de jQuery ha cambiado un poco.
Para hacer esto con Jasmin, puedes probar el enfoque de Michael Falaga.
Solución
function ajax_response(response) { var deferred = $.Deferred().resolve(response); return deferred.promise; }
con jazmín
describe("Test test", function() { beforeEach(function() { spyOn($, 'ajax').and.returnValue( ajax_response([1, 2, 3]) ); }); it("is it [1, 2, 3]", function() { var response; $.ajax('GET', 'some/url/i/fancy').done(function(data) { response = data; }); expect(response).toEqual([1, 2, 3]); }); });
sin jazmín
$.ajax = ajax_response([1, 2, 3]); $.ajax('GET', 'some/url/i/fancy').done(function(data) { console.log(data); // [1, 2, 3] });
Después de leer inspirado por @Robusto y @Val, encontré un método que funciona:
//Mock ajax function $.ajax = function (param) { _mockAjaxOptions = param; //call success handler param.complete("data", "textStatus", "jqXHR"); };
En lugar de generar el evento desde cualquier código $.ajax real o desencadenar cualquier evento, hago que mi objeto ajax falso llame a la función (que se pasa como parámetro a $.ajax()
) como parte de mi función falsa.
$.ajax
con una respuesta ficticiaDespués de probar la respuesta aceptada y la respuesta publicada por el usuario 1634074 , ideé esta combinación simple y flexible de las dos.
En su forma más básica…
function ajax_response(response) { return function (params) { params.success(response); }; } $.ajax = ajax_response('{ "title": "My dummy JSON" }');
En el ejemplo anterior, defina una función ajax_response()
que acepte alguna cadena JSON como argumento (o cualquier cantidad de argumentos personalizados útiles para simular una respuesta) y devuelva una función de cierre anónima que se asignará a $.ajax
como anulación de examen de la unidad.
La función anónima acepta un argumento params
que contendrá el objeto de configuración pasado a la función $.ajax
. Y usa los argumentos pasados a la función externa para simular una respuesta del servidor. En este ejemplo, siempre simula una respuesta exitosa del servidor, simplemente invocando la devolución de llamada success
y proporcionándole el JSON ficticio.
Es fácil de reconfigurar…
function ajax_response(response, success) { return function (params) { if (success) { params.success(response); } else { params.error(response); } }; } // Simulate success $.ajax = ajax_response('{ "title": "My dummy JSON." }', true); doAsyncThing(); // Function that calls $.ajax // Simulate error $.ajax = ajax_response('{ "error": "Who is the dummy now?" }', false); doAsyncThing(); // Function that calls $.ajax
A continuación podemos verlo en acción…
/* FUNCTION THAT MAKES AJAX REQUEST */ function doAsyncThing() { $.ajax({ type: "POST", url: "somefile.php", // data: {…}, success: function (results) { var json = $.parseJSON(results), html = $('#ids').html(); $('#ids').html(html + '<br />' + json.id); } }); } /* BEGIN MOCK TEST */ // CREATE CLOSURE TO RETURN DUMMY FUNCTION AND FAKE RESPONSE function ajax_response(response) { return function (params) { params.success(response); }; } var n = prompt("Number of AJAX calls to make", 10); for (var i = 1; i <= n; ++i) { // OVERRIDE $.ajax WITH DUMMY FUNCTION AND FAKE RESPONSE $.ajax = ajax_response('{ "id": ' + i + ' }'); doAsyncThing(); } /* END MOCK TEST */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="ids">IDs:</p>