Come testare XMLHttpRequest con Jasmine

Question

Come posso testare onreadystatechange su XMLHttpRequest o puro Javascript AJAX senza jQuery? Lo sto facendo perché sto sviluppando l'estensione per Firefox. Credo di dover usare spie, ma non riesco a capire come, perché il mio ajax non restituirà nulla.

 

    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

Come menzionato nei commenti con SinonJS si può facilmente mock the XHR object/create a fake server.

Answer 2

Come per il facsimile del codice qui sotto è probabile che sia possibile iniettare console.log() con il codice di stato e il testo di stato.

Ciò consente di identificare eventuali errori http. Speculativamente Direi che lo stato tornerà 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); 
    }; 

} 

Un'alternativa a questo potrebbe essere quella di guardare la richiesta di intestazione/risposta all'interno della console di Firebug. Il che è un buon punto: se non si utilizzano gli strumenti firebug o chrome dev, è necessario modificare la chiamata a console.log() a qualcosa che aggiunge la stringa a un oggetto documento non utilizzare utilizzando una chiamata di avviso().

How do I verify jQuery AJAX events with Jasmine?. Una risposta simile che implementa Jasmine.

Answer 3

E che dire di questo?

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 senza necessità di utilizzare alcuna libreria esterna.

Answer 4

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

Answer 5

È possibile verificare in maniera tale

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

Fornito da jasmine-ajax. Per prendere in giro per un uso singolo spec 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 risposta viene inviato solo quando si utilizza respondWith. Solo download the file e aggiungi come src al numero SpecRunner.html. Esempio di utilizzo allo https://github.com/serv-inc/JSGuardian (consultare la cartella di test).