O
O
Oleg Parfenyuk2018-11-27 19:09:57
Angular
Oleg Parfenyuk, 2018-11-27 19:09:57

How to test SocketIO with Jasmine?

I can't find clear documentation or examples anywhere on how to test SocketIO with Jasmine?
I write tests using examples, but they don't pass...
Here is my socket service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import io from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class SocketService {
  private url = '/';
  public socket;
  public interviewId: Number;

  constructor() { }

  public connectToSockets() {
    this.socket = io.connect(this.url);
  }

  public setInterviewId(id) {
    this.interviewId = id;
  }

  public initiateInterview(interviewData) {
    this.interviewId = interviewData.interviewId;
    this.socket.emit('initiateInterview', interviewData);
  }

  public joinInterview() {
    this.socket.emit('joinInterview', this.interviewId);
  }

  public endInterview() {
    // if we weren't connected, there is no need to unsub
    if (!this.socket) {
      return;
    }

    this.socket.emit('endInterview', this.interviewId);
    this.interviewId = null;
  }

  public updateInterviewList() {
    const interviewInfoProvider = new Observable(observer => {
      this.socket.on('updateInterviewList', (interviewData) => {
        observer.next(interviewData);
      });

      return () => {
        this.socket.disconnect();
      };
    });

    return interviewInfoProvider; 
  }

  // interview events

  public sendClick(eventInfo) {
    eventInfo.interviewId = this.interviewId;
    this.socket.emit('click', eventInfo);
  }

  public sendMouseMovement(eventInfo) {
    eventInfo.interviewId = this.interviewId;
    this.socket.emit('mouseMove', eventInfo);
  }

  public sendFocusEvent(eventInfo) {
    eventInfo.interviewId = this.interviewId;
    this.socket.emit('focusEvent', eventInfo);
  }
  
  public sendKeysEvent(eventInfo) {
    eventInfo.interviewId = this.interviewId;
    this.socket.emit('keyPress', eventInfo);
  }

  public sendOnChangetEvent(eventInfo) {
    eventInfo.interviewId = this.interviewId;
    this.socket.emit('onChange', eventInfo);
  }

  public getClickEvent() {
    const eventObservable = new Observable(observer => {
      this.socket.on('mouseClick', (eventData) => {
        observer.next(eventData);
      });

      return () => {
        this.socket.disconnect();
      };
    });

    return eventObservable.pipe(debounceTime(100)); 
  }

  public getMouseMove() {
    const eventObservable = new Observable(observer => {
      this.socket.on('newMouseMove', (eventData) => {
        observer.next(eventData);
      });

      return () => {
        this.socket.disconnect();
      };
    });

    return eventObservable;
  }

  public getFocusEvent() {
    const eventObservable = new Observable(observer => {
      this.socket.on('newFocus', (eventData) => {
        observer.next(eventData);
      });

      return () => {
        this.socket.disconnect();
      };
    });

    return eventObservable;
  }

  public getKeyboardEvent() {
    const eventObservable = new Observable(observer => {
      this.socket.on('newKeyPress', (eventData) => {
        observer.next(eventData);
      });

      return () => {
        this.socket.disconnect();
      };
    });

    return eventObservable;
  }

  public getOnChangeEvent() {
    const eventObservable = new Observable(observer => {
      this.socket.on('newOnChange', (eventData) => {
        observer.next(eventData);
      });

      return () => {
        this.socket.disconnect();
      };
    });

    return eventObservable;
  }
}

Here is an example of my clumsy tests:
import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { Server } from 'mock-socket';
import { SocketService } from './socket-service.service';
import io from 'socket.io-client';
  
  describe('BackendService', () => {


 /* setup for mock-socket in order to test socket.io */
  let SERVER_URL = 'ws://localhost:3000';
  let mockServer = new Server(SERVER_URL);
  let originalTimeout;
  let backendService: SocketService;

  // setting up server mock
  mockServer.on('connection', socket => {
    setTimeout(() => {
        console.log('sending');
        mockServer.emit('server-message', { message: 'test message 1'});
           
      }, 500);
    
  });

  beforeEach(function() {
    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
});

afterEach(function() {
  jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
});

    
    
  it('tests simple connection and messaging with mock-socket setup', async(done: DoneFn) => { 

  // setting up client
  backendService.socket = io('/');

  
  backendService.socket.on('server-message', (message) => {
    console.log(message);
    expect(message.message).toEqual('test message 1');
    mockServer.stop();
    done();
  });  

  });

});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question