問題描述

我嘗試測試 onmessage 是否是一個正確的函數.

I try to test if onmessage is a proper function.

這是一個測試:

  describe(".init(address, window)", function() {
    beforeEach(function() {
      address = 'ws://test.address';
      window = {};
      e = {
        data: {}
      }
      spyOn(window, 'WebSocket').and.returnValue(function() {return {onmessage: null}});
      spyOn(subject, 'handleMessage');
    });

    it("should create a WebSocket client which connects to the given address", function() {
      subject.init(address, window);
      expect(window.WebSocket).toHaveBeenCalledWith(address);
    });

    it("should have onmessage method overriden with a function which handles message", function() {
      ws = subject.init(address, window);
      alert(JSON.stringify(ws));
      ws.onmessage(e);
      expect(subject.handleMessage).toHaveBeenCalledWith(e.data);
    });
  });

這里是實現:

FL.init = function(address, window) {
  if ('WebSocket' in window) {
    var ws = new WebSocket(address);
    ws.onmessage = function(e) {
      this.handleMessage(e.data);
    };
    return ws;
  }
};

第一個測試通過.第二個，ws 是undefined.這是為什么?我在控制臺中嘗試過 new function() {return {onmessage: null}} 看起來應該沒問題.

The first test passes. In the second, ws is undefined. Why is that? I tried in a console new function() {return {onmessage: null}} and it looks it should be ok.

推薦答案

我不完全確定你的代碼應該如何表現，但如果你需要監視 WebSocket構造函數和存根 .send 方法來模擬一些傳入的消息，這里是如何實現的.

I'm not completely sure that I figured out how your code is supposed to behave, but if you need to spy on WebSocket constructor and stub .send method to mock some incoming messages, here is how to achieve it.

要監視 WebSocket，您需要調用 .and.callThrough 而不是 returnValue.然而，它導致抱怨缺少 new 關鍵字(如 here)，所以你需要偽造構造函數:

To spy on WebSocket you will need to call .and.callThrough rather than returnValue. However it result with complains about lack of new keyword (as mentioned in here), so you need to fake the constructor:

var realWS = WebSocket;
var WebSocketSpy = spyOn(window, "WebSocket").and.callFake(function(url,protocols){
  return new realWS(url,protocols);
});

要為傳入的消息做一個間諜，你可以簡單地做

To make a spy for incoming messages you can simply do

var onmessageCallbackSpy = jasmine.createSpy('onmessageCallback');

您還可以監視 .send 方法，并提供一些模擬響應:

You can also spy on .send method, and provide some mocked responses with:

var sendSpy = spyOn(WebSocket.prototype, "send").and.callFake(function(outMsg){
  // process/check outgoing message
  // setTimeout, or call it immediately
  this.onmessage("mock message goes here");
}); 

但請確保使用 WebSocket.prototype，然后再將其替換為 WebSocketSpy.

But make sure to use WebSocket.prototype, before you replace it with WebSocketSpy.

完整的工作示例應該如下所示:

So full working example, should look like this:

it("should spy and callFake WebSocket constructor, and stub prototype methods", function (done) {
    var realWS= WebSocket;  
    var sendSpy = spyOn(WebSocket.prototype, "send").and.callFake(function(outMsg){
      if(outMsg == "outgoing message"){
        this.onmessage("incoming mocked message goes here");
      }
    });  
    // var messageSpy = spyOn(WebSocket.prototype, "onmessage");//.and.returnValue("mock message goes here");      
    var WSSpy = spyOn(window, "WebSocket").and.callFake(function(url,protocols){
      return new realWS(url,protocols);
    }); 
    var onmessageCallbackSpy = jasmine.createSpy('onmessageCallback');       

    // Your code
    // (function init(url, onmessageCallbackSpy){
        var ws = new WebSocket("ws://some/where");
        ws.onmessage = onmessageCallbackSpy;
        // code that results with receiving a message
        // or mocked send, that calls `.onmessage` immediately
        ws.send("outgoing message");
    // })();    

    expect(WSSpy).toHaveBeenCalledWith("ws://some/where");
    expect(onmessageCallbackSpy).toHaveBeenCalledWith("mock message goes here");
    done();
});

這篇關于使用 Jasmine 在 JavaScript 中存根 WebSocket的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！