Cómo probar XMLHttpRequest con Jasmine

Question

¿Cómo puedo probar onreadystatechange en XMLHttpRequest o Javascript puro AJAX sin jQuery? Estoy haciendo esto porque estoy desarrollando la extensión de Firefox. Supongo que tengo que usar espías, pero no pude entender cómo porque mi ajax no devolverá nada.

 

    submit : function() { 
     var url = window.arguments[0]; 
     var request = new XMLHttpRequest(); 
     request.open("POST", 'http://'+this.host+'/doSomething', true); 
     request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     request.send("param="+param+"&emotions="+this.getParams()); 
     request.onreadystatechange = function() { 
      if(this.readyState == 4) { 
       // alert(this.responseText); 
      } 
     }; 

    } 
 

Answer 1

Como se mencionó en los comentarios con SinonJS puede fácilmente mock the XHR object/create a fake server.

Answer 2

Según el facsímil de su código de abajo es probable que sea capaz de inyectar console.log() con el código de estado y mensajes de estado.

Esto lo ayudará a identificar cualquier error HTTP. Especulativamente yo diría que el estado volverá 404.

submit : function() { 
    var url = window.arguments[0]; 
    var request = new XMLHttpRequest(); 
    request.open("POST", 'http://'+this.host+'/doSomething', true); 
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    request.send("param="+param+"&emotions="+this.getParams()); 
    request.onreadystatechange = function() { 
     console.log(this.status+ " - "+ this.statusText); 
    }; 

} 

Una alternativa a esto sería mirar el encabezado de solicitud/respuesta dentro de la consola de Firebug. Lo cual es un buen punto: si no está utilizando las herramientas firebug o chrome dev, debe cambiar la llamada de console.log() a algo que anexe la cadena a un objeto de documento no use use una llamada de alerta().

How do I verify jQuery AJAX events with Jasmine?. Una respuesta similar que implementa Jasmine.

Answer 3

¿Y qué hay de este?

beforeEach(function() { 
    // spyOn(XMLHttpRequest.prototype, 'open').andCallThrough(); // Jasmine 1.x 
    spyOn(XMLHttpRequest.prototype, 'open').and.callThrough(); // Jasmine 2.x 
    spyOn(XMLHttpRequest.prototype, 'send'); 
}); 

... 

it("should call proper YQL! API", function() { 
    podcast.load_feed('http://www.faif.us/feeds/cast-ogg/'); 

    expect(XMLHttpRequest.prototype.open).toHaveBeenCalled(); 
}); 

Pure Jasmine sin necesidad de utilizar ninguna biblioteca externa.

Answer 4

Jasmine tiene its own Ajax mock library called ajax.js.

Answer 5

puede probarlo de tal manera

it("should make XHR request", function() { 

    // arrange 

    var xhr = { 
     open: jasmine.createSpy('open') 
    }; 

    XMLHttpRequest = jasmine.createSpy('XMLHttpRequest'); 
    XMLHttpRequest.and.callFake(function() { 
     return xhr; 
    }); 

    // act 

    submit(); 

    // assert 

    expect(xhr.open).toHaveBeenCalled(); 
}); 

Answer 6

Proporcionado por jasmine-ajax. Para burlarse de un solo uso de especificaciones withMock:

it("allows use in a single spec", function() { 
    var doneFn = jasmine.createSpy('success'); 
    jasmine.Ajax.withMock(function() { 
     var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(args) { 
     if (this.readyState == this.DONE) { 
      doneFn(this.responseText); 
     } 
     }; 

     xhr.open("GET", "/some/cool/url"); 
     xhr.send(); 

     expect(doneFn).not.toHaveBeenCalled(); 

     jasmine.Ajax.requests.mostRecent().respondWith({ 
     "status": 200, 
     "responseText": 'in spec response' 
     }); 

     expect(doneFn).toHaveBeenCalledWith('in spec response'); 
    }); 
    }); 

La respuesta se envía únicamente cuando se utiliza respondWith. Solo download the file, y añada como src a su SpecRunner.html. Ejemplo de uso en https://github.com/serv-inc/JSGuardian (vea la carpeta de prueba).