title: How to spy a service call in Angular2
body: <p>Following the code example found on Ari Lerner ng-book2, and using Angular 2 beta 7, I'm trying to mock and spy a call to a service unsuccessfully.</p>
  
  <p>This is the main component using the service:</p>
  
  <p><em>user-list.component.ts</em></p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component, OnInit} from 'angular2/core';
  import {UserService} from './user.service';
  import {IUser} from './user.model';
  
  @Component({
    selector: 'user-list',
    providers: [UserService],
    template: `
      &lt;div *ngFor="#user of users" class="user"&gt;
        &lt;span class="username"&gt;Username: {{ user.username }}&lt;/span&gt;&lt;br&gt;
        &lt;span class="email"&gt;Email: {{ user.email }}&lt;/span&gt;
      &lt;/div&gt;
    `
  })
  export class UserListComponent implements OnInit {
    public users: IUser[];
    private userService: UserService;
  
    constructor(userService: UserService) {
      this.userService = userService;
    }
  
    ngOnInit(): void {
      this.userService.getAllUsers().subscribe(
        (users: IUser[]) =&gt; {
          this.users = users;
        },
        (error: any) =&gt; {
          console.log(error);
        }
      );
    }
  }
  </code></pre>
  
  <p>And this is the service itself.</p>
  
  <p><em>user.service.ts</em></p>
  
  <pre class="lang-js prettyprint-override"><code>import {Injectable} from 'angular2/core';
  import {Http} from 'angular2/http';
  import {Observable} from 'rxjs/Observable';
  import 'rxjs/Rx';
  import {IUser} from './user.model';
  
  @Injectable()
  export class UserService {
    private http: Http;
    private baseUrl: string = 'http://jsonplaceholder.typicode.com/users';
  
    constructor(http: Http) {
      this.http = http;
    }
  
    public getAllUsers(): Observable&lt;IUser[]&gt; {
      return this.http.get(this.baseUrl)
        .map(res =&gt; res.json());
    }
  }
  </code></pre>
  
  <p>In order to test the <code>UserListComponent</code>, I'm trying to mock the <code>UserService</code> and spy its method call <code>getAllUser</code> using the following code:</p>
  
  <p><em>user-list.component.spec.ts</em></p>
  
  <pre class="lang-js prettyprint-override"><code>import {
    describe, 
    expect, 
    it,
    injectAsync,
    TestComponentBuilder,
    ComponentFixture,
    setBaseTestProviders,
  } from 'angular2/testing';
  
  import {SpyObject} from 'angular2/testing_internal';
  
  import {
    TEST_BROWSER_PLATFORM_PROVIDERS, 
    TEST_BROWSER_APPLICATION_PROVIDERS
  } from 'angular2/platform/testing/browser';
  
  import {provide} from 'angular2/core';
  
  import {UserListComponent} from './user-list.component';
  import {UserService} from './user.service';
  
  class SpyUserService extends SpyObject {
    public getAllUsers: Function;
    public fakeResponse: any = null;
  
    constructor() {
      super(UserService);
      this.getAllUsers = this.spy('getAllUsers').andReturn(this);
    }
  
    public subscribe(callback) {
      callback(this.fakeResponse);
    }
  
    public setResponse(data: any): void {
      this.fakeResponse = data;
    }
  }
  
  describe('When rendering the UserListComponent and mocking the UserService', () =&gt; {
  
    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);  
  
    it('should show one mocked user', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) =&gt; {
  
      let spyUserService = new SpyUserService();
      spyUserService.setResponse([{
        username: 'ryan',
        email: 'ryan@gmail.com'
      }]);
  
      return tcb
        .overrideProviders(UserListComponent, [provide(UserService, {useValue: spyUserService})])
        .createAsync(UserListComponent)
        .then((fixture: ComponentFixture) =&gt; {
          fixture.detectChanges();
          expect(spyUserService.getAllUsers).toHaveBeenCalled();
        });
    }));
  
  });
  </code></pre>
  
  <p>When using karma to run the test I'm getting the following console error:</p>
  
  <pre class="lang-sh prettyprint-override"><code>Chrome 48.0.2564 (Mac OS X 10.11.3) ERROR
    Uncaught TypeError: Cannot read property 'isSlow' of null
    at /Users/david/apps/sandbox/angular2-testing-cookbook/src/tests.entry.ts:19430
  </code></pre>
  
  <p><strong>Do anybody know why is this error being thrown or the proper way to mock and spy a service for unit testing an Angular 2 component?</strong></p>