title: How to mock a service from a service in Angular 2 Test
body: <p>I'm writing a test for a service. It calls another service called 'SignlarService'. So I would like to mock SingnalrService and I have no idea how to mock. </p>
  
  <p>I'm having following error:</p>
  
  <pre><code>TypeError: signalr.createHubConnetion is not a function
  </code></pre>
  
  <p>Here is .spec file for vendorService</p>
  
  <pre><code>import { TestBed, async, inject } from '@angular/core/testing';
  import { DebugElement } from '@angular/core';
  import { By } from '@angular/platform-browser';
  import { Observable } from 'rxjs';
  
  import { VendorService } from './game-vendor.service';
  import { HttpModule, Http, BaseRequestOptions } from '@angular/http';
  import { MockBackend } from '@angular/http/testing';
  import { SignalrService } from '../shared/services/signalr.service';
  import { Store } from '@ngrx/store';
  
  import { RequestService } from '../shared/services/request-handler.service';
  import { AppConfig } from './../app.config';
  import { MockStore } from '../shared/helper/mock-store-helper';
  
    beforeEach(() =&gt; {
  
      TestBed.configureTestingModule({
        providers: [
          { provide: RequestService, useValue: {} },
          { provide: SignalrService, useValue: {} },
          { provide: Store, useClass: MockStore },
          VendorService,
          {
            provide: Http,
            userFactory: (mockBackend: MockBackend, options: BaseRequestOptions) =&gt; {
              return new Http(mockBackend, options);
            },
            deps: [ MockBackend, BaseRequestOptions ],
          },
          MockBackend,
          BaseRequestOptions,
          AppConfig,
        ],
      });
   });
  
    it('should toBeTruthy', inject([VendorService], (service: VendorService) =&gt; {
      expect(service).toBeTruthy();
    }));
  });
  </code></pre>
  
  <p>Here is vendorService.ts and it calls SignalrService</p>
  
  <pre><code>@Injectable()
  export class VendorService {
    VendorServiceUrl: string = `${this.config.baseUrl}v1/Vendors`;
    signalrUrl: string = `${this.config.baseUrl}v1/Vendors/signalr`;
    signalrHubName: string = 'VendorsHub';
    constructor(
      private request: RequestService,
      private config: AppConfig,
      private signalr: SignalrService,
      private store: Store&lt;any&gt;,
    ) {
      signalr.createHubConnetion(this.signalrUrl)
        .createHubProxy(this.signalrHubName)
        .event$
        .map(e =&gt;
          new VendorActions.GetVendorAction())
        .subscribe(store);
    }
  }
  </code></pre>
  
  <p>Here is signalrService.ts</p>
  
  <pre><code>import { Injectable, Inject, NgZone } from '@angular/core';
  import { Subject } from 'rxjs/Subject';
  import { Observable } from 'rxjs/Observable';
  
  export class SignalrWindow {
    $: any;
  }
  
  export enum ConnectionState {
    Idle = 0,
    Connecting = 1,
    Connected = 2,
    Reconnecting = 3,
    Disconnected = 4,
  }
  
  export class SignalrEvent {
    name: string;
    payload: any;
  }
  
  export class HubConnection {
    constructor(
      private zone: NgZone,
      public connection: any,
      public connectionState$: Observable&lt;ConnectionState&gt;,
      public error$: Observable&lt;string&gt;) { }
  
    createHubProxy(hubName: string): HubProxy {
      const eventSubject = new Subject&lt;SignalrEvent&gt;();
      if (this.connection) {
        const newHub = this.connection.createHubProxy(hubName);
        newHub.on('onEvent', (event: SignalrEvent) =&gt; {
          this.zone.run(() =&gt; eventSubject.next(event));
        });
      }
      return new HubProxy(eventSubject.asObservable());
  
    }
  }
  
  export class HubProxy {
    constructor(public event$: Observable&lt;SignalrEvent&gt;) { }
  }
  
  @Injectable()
  export class SignalrService {
    constructor(
      @Inject(SignalrWindow) private window: SignalrWindow,
      private zone: NgZone,
    ) { }
  
    createHubConnetion(url: string): HubConnection {
      const connectionStateSubject = new Subject&lt;ConnectionState&gt;();
      const errorSubject = new Subject&lt;any&gt;();
      if (this.window.$ === undefined || this.window.$.hubConnection === undefined) {
        console.warn('SignalR failed to load. Some features have been disabled.');
        return new HubConnection(this.zone, null, connectionStateSubject.asObservable(), errorSubject.asObservable());
      }
      const connection = this.window.$.hubConnection();
      connection.url = url;
  
      connection.stateChanged((state: any) =&gt; {
        let newState: ConnectionState;
        switch (state.newState) {
          case this.window.$.signalR.connectionState.connecting:
            newState = ConnectionState.Connecting;
            break;
          case this.window.$.signalR.connectionState.connected:
            newState = ConnectionState.Connected;
            break;
          case this.window.$.signalR.connectionState.reconnecting:
            newState = ConnectionState.Reconnecting;
            break;
          case this.window.$.signalR.connectionState.disconnected:
            newState = ConnectionState.Disconnected;
            break;
          default:
            newState = ConnectionState.Idle;
        }
        this.zone.run(() =&gt; connectionStateSubject.next(newState));
      });
  
      connection.error((error: any) =&gt; {
        this.zone.run(() =&gt; errorSubject.next(error));
      });
      connection.start();
      return new HubConnection(this.zone, connection, connectionStateSubject.asObservable(), errorSubject.asObservable());
    }
  }
  </code></pre>