Mock StompService in Karma tests?

[wbhminnt]

Hello,

I'm trying to involve CI providers to run the tests for my Angular 4 application. The problem is, that while testing I don't have any STOMP broker running. So the application tries to reconnect to the websocket server periodically.

Is there any option to somehow mock the stomService so that the tests pass?

This is the code I have so far:

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { WsClientComponent } from "./components/ws-client/ws-client.component";
import { StompService, StompConfig } from "@stomp/ng2-stompjs";
import { WS_STOMP_CONFIGURATION } from "./configs/ws-stomp-config";

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        WsClientComponent
      ],
      providers: [
        StompService,
        {
          provide: StompConfig,
          useValue: WS_STOMP_CONFIGURATION
        }
      ]
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
});

ws-client.component.spec.ts

import { WsClientComponent } from './ws-client.component';
import { StompService, StompConfig } from "@stomp/ng2-stompjs";
import { WS_STOMP_CONFIGURATION } from "../../configs/ws-stomp-config";

describe('WsClientComponent', () => {
  let component: WsClientComponent;
  let fixture: ComponentFixture<WsClientComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ WsClientComponent ],
      providers: [
        StompService,
        {
          provide: StompConfig,
          useValue: WS_STOMP_CONFIGURATION
        }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(WsClientComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Thanks a lot!

[kum-deepak]

There are quite few approaches. First I will suggest that you upgrade to latest version. That version has 2 classes https://stomp-js.github.io/ng2-stompjs/injectables/StompRService.html and https://stomp-js.github.io/ng2-stompjs/injectables/StompService.html (both have same structures other than the constructor)

StompRService does not need config as part of the constructor and does not try to connect until explicitly asked to do so. Depending on what you want to achieve this itself may be sufficient.

If not, I would suggest one of the following:

• Use StompRService, and stub any calls that you do not need using spy mechanisms of Jasmine.
• Inherit StompRService in your class and stub out any calls that you need to block.

Let me know if you need further assistance.

[kum-deepak]

On the other hand CI's like Travis support RabbitMQ out of the box.

This project goes one step further and uses docker to pull an image of RabbitMQ that has WebStomp enambled. See https://github.com/stomp-js/ng2-stompjs/blob/master/.travis.yml for details.

[wbhminnt]

Great! This will definetively help.
Thanks for the information.