title: Angular 2 issue with async tests
body: <p>I have the following method in a component:</p>
  
  <pre><code>onSignup() {
      if (this.form.valid) {
        let email = this.form.value.email;
        let password = this.form.value.password;
        this.usersService.signup(email, password)
          .then(() =&gt; {
            this.router.navigate(['/app/recipes']);
          })
          .catch(err =&gt; {
            console.log('2')
            this.mdlSnackbarService.showToast(err);
          });
      }
    }
  </code></pre>
  
  <p>And the following unit test:</p>
  
  <pre><code>it('#onSignup should show error on error', async(() =&gt; {
      spyOn(fixture.debugElement.injector.get(UsersService), 'signup')
        .and.returnValue(Promise.reject('some error'));
  
      component.form.setValue({'email': 'mail@mail.com', 'password': '123456'});
  
      console.log('1')
      component.onSignup();
  
      fixture.whenStable().then(() =&gt; {
        console.log('3')
        expect(snackbar.showToast).toHaveBeenCalled();
      })
    }));
  </code></pre>
  
  <p>I have mocked the snackBarService with:</p>
  
  <pre><code>snackbar = { showToast: jasmine.createSpy('showToast').and.callFake((str)=&gt;console.log(str)) };
  </code></pre>
  
  <p>Checking the output, I can see how the mock is properly called, although, something is not quite right with the synchronization:</p>
  
  <pre><code>LOG: '1'
  Chrome 56.0.2924 (Mac OS X 10.10.5): Executed 0 of 7 SUCCESS (0 secs / 0 secs)
  LOG: '3'
  Chrome 56.0.2924 (Mac OS X 10.10.5): Executed 0 of 7 SUCCESS (0 secs / 0 secs)
  LOG: '2'
  Chrome 56.0.2924 (Mac OS X 10.10.5): Executed 0 of 7 SUCCESS (0 secs / 0 secs)
  LOG: 'some error'
  </code></pre>
  
  <p>It seems like the check for the method to been called is executed before it is called. Then it fails with <code>Expected spy showToast to have been called.</code>.</p>
  
  <p>Can anyone point out what I am doing wrong here?</p>