使用Jasmine在JavaScript中存储WebSocket [英] Stubbing WebSocket in JavaScript with Jasmine

问题描述

我尝试测试 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.

To窥探 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！