Làm thế nào để kiểm tra XMLHttpRequest với Jasmine

Question

Làm cách nào để kiểm tra onreadystatechange trên XMLHttpRequest hoặc JavaScript AJAX thuần túy mà không có jQuery? Tôi đang làm điều này bởi vì tôi đang phát triển phần mở rộng của Firefox. Tôi đoán tôi phải sử dụng gián điệp, nhưng không thể tìm ra cách vì ajax của tôi sẽ không trả lại bất cứ thứ gì.

 

    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

Như đã đề cập trong các nhận xét với SinonJS bạn có thể dễ dàng mock the XHR object/create a fake server.

Answer 2

Theo bản fax của mã bên dưới, bạn có thể sẽ tiêm console.log() với mã trạng thái và văn bản trạng thái.

Điều này sẽ giúp bạn xác định mọi lỗi http. Cụ thể, tôi muốn nói trạng thái sẽ trả về 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); 
    }; 

} 

Một giải pháp thay thế là xem xét tiêu đề/phản hồi yêu cầu trong bảng điều khiển firebug. Đó là một điểm tốt: Nếu bạn không sử dụng công cụ firebug hoặc chrome dev, bạn nên thay đổi giao diện console.log() để gọi thứ gì đó gắn chuỗi vào đối tượng tài liệu không sử dụng lệnh gọi alert().

How do I verify jQuery AJAX events with Jasmine?. Một câu trả lời tương tự thực hiện Jasmine.

Answer 3

Còn cái này thì sao?

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

Hoa nhài nguyên chất mà không cần sử dụng bất kỳ thư viện bên ngoài nào.

Answer 4

Jasmine có its own Ajax mock library called ajax.js.

Answer 5

Bạn có thể kiểm tra nó theo cách đó

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

Được cung cấp bởi jasmine-ajax. Để thử cho việc sử dụng đặc tả đơn 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'); 
    }); 
    }); 

Câu trả lời chỉ được gửi khi bạn sử dụng respondWith. Chỉ cần download the file và thêm làm src vào số SpecRunner.html của bạn. Sử dụng ví dụ tại https://github.com/serv-inc/JSGuardian (xem thư mục kiểm tra).