JavaScript中Web套接字的单元测试

Question

我需要使用sinon向Web套接字客户端编写单元测试。代码如下：

Socket = {
    connect: function ()
    {
        socket = new WebSocket('ws://localhost:12345');
        socket.onopen = function()
        {

            console.log('connected to the server');
        };

        socket.onmessage = function(message)
        {
            console.log('Received:', message.data);
        };

    }
};

Answer 1

我们最后需要在connect方法中返回套接字实例。因为您为onopen和onmessage事件分配了两个新功能。它将覆盖套接字对象上的spy或stub方法。

测试环境：节点

这里是单元测试解决方案：

index.js：

const Socket = {
  connect: function() {
    socket = new WebSocket("ws://localhost:12345");
    socket.onopen = function() {
      console.log("connected to the server");
    };

    socket.onmessage = function(message) {
      console.log("Received:", message.data);
    };
    return socket;
  }
};

module.exports = Socket;

index.spec.js：

const sinon = require("sinon");
const { expect } = require("chai");
const Socket = require("./index");

class WebSocket {
  constructor(uri) {}
  onopen() {}
  onmessage() {}
}
global.WebSocket = WebSocket;

describe("17806481", () => {
  it("should test connect correctly", () => {
    const logSpy = sinon.spy(console, "log");
    const socket = Socket.connect();
    const onopenSpy = sinon.spy(socket, "onopen");
    const onmessageSpy = sinon.spy(socket, "onmessage");
    onopenSpy();
    expect(logSpy.firstCall.calledWith("connected to the server")).to.be.true;
    const mMessage = { data: "fake data" };
    onmessageSpy(mMessage);
    expect(logSpy.secondCall.calledWith("Received:", mMessage.data)).to.be.true;
  });
});

Socket模块具有100％覆盖率的单元测试结果：

 17806481
connected to the server
Received: fake data
    ✓ should test connect correctly


  1 passing (10ms)

---------------|----------|----------|----------|----------|-------------------|
File           |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
---------------|----------|----------|----------|----------|-------------------|
All files      |      100 |      100 |       75 |      100 |                   |
 index.js      |      100 |      100 |      100 |      100 |                   |
 index.spec.js |      100 |      100 |       60 |      100 |                   |
---------------|----------|----------|----------|----------|-------------------|

源代码：https://github.com/mrdulin/mocha-chai-sinon-codelab/tree/master/src/stackoverflow/17806481