title: Testing a method that is subscribed to an observable - Angular 2
body: <p>I want to test a method inside of an Angular 2 component that is subscribed to an observable that is returned from a method in a service. Here is the code for the service method in summary: </p>
  
  <pre><code>public create(user: User): Observable&lt;any&gt; {
    return this.http.post(this._api.create,
      JSON.stringify(user), {
        headers: this.apiConfig.getApiHeaders()
      }).map((res: Response) =&gt; res.json());
    }
  </code></pre>
  
  <p>It's easy to unit test this method because it returns an observable so I can just subscribe to it. But I want to test the method in the component that is already subscribed to this: </p>
  
  <pre><code>public onSubmit(user: User): void {
    this._authentication.create(user).subscribe((token) =&gt; {
      localStorage.setItem('token', token);
      this.router.navigate(['/Home']);
    });
  }
  </code></pre>
  
  <p>Heres my spec so far but when I try to spyOn the localStorage.setItem it comes back as not being called. My understanding is it's probably checking to see if it's been called before it's actually been called.</p>
  
  <pre><code>it('Should login a user and on success store a token in localStorage',
    injectAsync([TestComponentBuilder], (tcb) =&gt; {
      return tcb.createAsync(Login).then((fixture) =&gt; {
        let instance = fixture.debugElement.componentInstance;
        localStorage.clear();
        spyOn(localStorage, 'setItem');
        instance.onSubmit({userId: 'some@email.com', password: 'password', siteName: 'sample'});
        expect(localStorage.setItem).toHaveBeenCalled();
      });
    })
  );
  </code></pre>
  
  <p>I'm wondering if I need to mock out the this._authentication.create method to return a new observable with a mock response in it? </p>
  
  <p>After more research a few articles indicated that I do need to mock out the service and return an Observable.of() which runs synchronously to solve the problem, ill copy the code below. This however still doesn't work, I've been working on this most of the day, I don't feel this should be that hard, any help appreciated. </p>
  
  <pre><code>class MockAuthentication extends Authentication {
    public create(user: Object): Observable&lt;any&gt; {
      return Observable.of({'test': 'test'});
    }
  }
  </code></pre>