How to test XMLHttpRequest with Jasmine

Question

How can I test the onreadystatechange on XMLHttpRequest or pure Javascript AJAX without jQuery? I'm doing this because I'm developing Firefox extension. I guess I have to use spies, but couldn't figure out how because my ajax won't return anything.


    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);
            }
        };

    }

possible duplicate of [How to create Stub for ajax function using Jasmine BDD](http://stackoverflow.com/questions/8884060/how-to-create-stub-for-ajax-function-using-jasmine-bdd) — Andreas Köberle, Jan 17 '12 at 21:30
Well, that one is using jQuery, but I'm trying to use pure XMLHttpRequest. — toy, Jan 17 '12 at 21:37
Sure but the answer (using SininJS mocking framework) is working for your case as well. — Andreas Köberle, Jan 17 '12 at 21:38
Sorry didn't think SininJS can do that. Thanks! Will try that. — toy, Jan 18 '12 at 13:03

score 39 · Answer 1 · edited Feb 19 '16 at 21:06

39

And what about this one?

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 without need to use any external library.

edited Feb 19 '16 at 21:06

Albin

4,180
2
27
19

answered Feb 13 '13 at 03:06

mcepl

2,688
1
23
38

2

This worked for me. But how to emulate xhr response handlers like onError, onLoad etc.? – sonam May 22 '15 at 07:58
Great answer, this helped me. – Matt West Dec 14 '18 at 00:21

score 11 · Answer 2 · answered Mar 11 '14 at 16:29

11

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

answered Mar 11 '14 at 16:29

taro

699
1
9
20

Thanks @taro! I use `jasmine-ajax` and now, my test case looks really simple! Demo: https://github.com/piecioshka/test-angular-services-testing/blob/master/src/app/photos.service.spec.ts#L84 – piecioshka Mar 21 '20 at 19:36

score 6 · Accepted Answer · answered Jan 19 '12 at 07:23

6

As mention in the comments with SinonJS you can easily mock the XHR object / create a fake server.

answered Jan 19 '12 at 07:23

Andreas Köberle

106,652
57
273
297

score 5 · Answer 4 · answered Jan 18 '16 at 13:57

5

You can test it in such manner

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(); 
});

answered Jan 18 '16 at 13:57

Alvis

3,543
5
36
41

It could be a solution to the JavaScript project. In my Angular app TypeScript has complain for overriding XMLHttpRequest which is inferred to XMLHttpRequest interface. – piecioshka Mar 21 '20 at 19:38

serv-inc · Answer 5 · 2017-08-12T10:19:21.217

Provided by jasmine-ajax. To mock for a single spec use 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');
    });
  });

The response is only sent when you use respondWith. Just download the file, and add as a src to your SpecRunner.html. Example usage at https://github.com/serv-inc/JSGuardian (see the test folder).

jasmine-ajax FTW — demo into my specs: https://github.com/piecioshka/test-angular-services-testing/blob/master/src/app/photos.service.spec.ts#L84 — piecioshka, Mar 21 '20 at 19:39

score -1 · Answer 6 · edited May 23 '17 at 12:26

As per the facsimile of your code below you will likely be able to inject console.log() with the status code and status text.

This will help you identify any http errors. Speculatively I'd say the status will return 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);
    };

}

An alternative to this would be to look at the request header / response within the firebug console. Which is a good point: If you're not using firebug or chrome dev tools you should change the console.log() call to something that appends the string to a document object do not use an alert() call.

How do I verify jQuery AJAX events with Jasmine?. A similar answer that implements Jasmine.

I'm not familiar with Jasmine however I've added a link to my answer which points to an answer from a similar thread that appears to be the Jasmine test you're looking for. — CBusBus, Jan 17 '12 at 21:25

How to test XMLHttpRequest with Jasmine

6 Answers6

Linked