title: Spy on a function that returns an observable
body: <p>I'm testing an Angular 4 component with a function that makes a HTTP request (returning an observable) and then calls another function in the observables subscribe method. I want to test that the function in the subscribe is being called correctly. The component looks like this:</p>
  
  <pre><code>logIn(): void {
    this.loginService.logIn(user)
    .subscribe(() =&gt; {
      this.router.navigateByUrl('/')
    })
  }
  </code></pre>
  
  <p>I've mocked the service in the component's spec:</p>
  
  <pre><code>loginServiceStub = {
    logIn(user: User) {
      return Observable.of(true)
    },
  }
  </code></pre>
  
  <p>And I've attached a spy to the router and the login service to know if they have been called:</p>
  
  <pre><code>const logInSpy = spyOn(loginService, 'logIn')
  const navigateByUrlSpy = spyOn(router, 'navigateByUrl')
  </code></pre>
  
  <p>When calling the components login method, the logInSpy is being called but the navigateByUrlSpy is not and the subscribe method is not being run. How should I set up the mock logIn to get this working?</p>