Как протестировать XMLHttpRequest с помощью жасмина

Как я могу проверить onreadystatechange на XMLHttpRequest или чистую Javascript AJAX без jQuery? Я делаю это, потому что я разрабатываю расширение Firefox. Наверное, я должен использовать шпионов, но не мог понять, почему, поскольку мой аякс ничего не вернет.


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

    }

Ответ 1

Как упоминается в комментариях с SinonJS, вы можете легко mock объект XHR/создать поддельный сервер.

Ответ 2

А как насчет этого?

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 без необходимости использовать внешнюю библиотеку.

Ответ 3

Jasmine имеет собственную библиотеку Ajax mock с именем ajax.js.

Ответ 4

Вы можете протестировать его таким образом

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

Ответ 5

Предоставляется jasmine-ajax. Чтобы издеваться над одним параметром, используйте 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');
    });
  });

Ответ отправляется только при использовании respondWith. Просто загрузите файл и добавьте в качестве src к SpecRunner.html. Пример использования https://github.com/serv-inc/JSGuardian (см. Тестовую папку).

Ответ 6

Согласно факсимиле вашего кода ниже, вы, вероятно, сможете ввести console.log() с кодом состояния и текстом состояния.

Это поможет вам идентифицировать любые ошибки HTTP. В частности, я бы сказал, что статус вернет 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);
    };

}

Альтернативой этому будет просмотр заголовка/ответа запроса в консоли firebug. Что является хорошим моментом: если вы не используете инструменты firebug или chrome dev, вы должны изменить вызов console.log() на то, что добавляет строку к объекту документа не, использовать предупреждение ().

Как проверить события jQuery AJAX с Jasmine?. Подобный ответ, который реализует Жасмин.