title: How to mock service?
body: <p>I have login function inside my LoginComponent:</p>
  
  <pre><code>login() {
          this.loading = true;
  
          this.subscription = this.authenticationService.login(this.model.username, this.model.password)
              .subscribe(result =&gt; {
                  this.em.changeNav(1);
                  this.loading = false;
                  this.Auth.setToken(result);
                  this.router.navigate(['/code']);
                  this.subscription.unsubscribe();
              },
              err =&gt; {
                  this.error = JSON.parse(err._body).error;
                  this.loading = false;
              });
  
  
      }
  </code></pre>
  
  <p><code>this.authenticationService.login</code> is the service which send http request to api...</p>
  
  <p>Here is the test:</p>
  
  <pre><code>it('should login', fakeAsync(() =&gt; {
          spyOn(component, 'login');
  
          let button = fixture.debugElement.nativeElement.querySelector('button');
          button.click();
  
          //CHECK IF LOGIN FUNCTION CALLED
          fixture.whenStable().then(() =&gt; {
              expect(component.login).toHaveBeenCalled();
          })
  
      }));
  </code></pre>
  
  <p>How can I mock <code>this.authenticationService.login</code> service and assert things in subscribe method?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Test:</p>
  
  <pre><code>import { async, ComponentFixture, TestBed, fakeAsync, tick, inject } from '@angular/core/testing';
  import { By } from '@angular/platform-browser';
  import { DebugElement } from '@angular/core';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { RouterTestingModule } from '@angular/router/testing';
  
  import {Router} from '@angular/router';
  import { Http, Request, RequestOptionsArgs, Response, XHRBackend, RequestOptions, ConnectionBackend, Headers, HttpModule, BaseRequestOptions } from '@angular/http';
  import {LoginService} from './login.service';
  import {
      MockBackend,
      MockConnection
  } from '@angular/http/testing';
  import {EmitterService} from '../emitter.service';
  import {AuthTokenService} from '../auth-token.service';
  
  import { LoginComponent } from './login.component';
  import {Observable} from 'rxjs';
  
  describe('LoginComponent', () =&gt; {
      let backend: MockBackend;
      let service: LoginService;
  
      let component: LoginComponent;
      let fixture: ComponentFixture&lt;LoginComponent&gt;;
  
      beforeEach(async(() =&gt; {
          class LoginServiceStub {
              login() { }
          };
  
          class RouterStub {
              navigate(url: string) { return url; }
          }
  
  
          TestBed.configureTestingModule({
              declarations: [LoginComponent],
              imports: [
                  FormsModule,
                  HttpModule,
                  ReactiveFormsModule,
                  RouterTestingModule
              ],
              providers: [
                  LoginService,
                  EmitterService,
                  AuthTokenService,
                  { provide: LoginService, useClass: LoginServiceStub },
                  //                { provide: Router, useClass: RouterStub }
              ]
          })
              .compileComponents();
      }));
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(LoginComponent);
          component = fixture.componentInstance;
          fixture.detectChanges();
      });
  
      it('should create', () =&gt; {
          expect(component).toBeTruthy();
      });
  
      it('Should log in and navigate to dashboard', fakeAsync(inject([LoginService, Router], (authService: LoginService, router: Router) =&gt; {
          spyOn(component, 'login');
          let button = fixture.debugElement.nativeElement.querySelector('button');
  
          spyOn(authService, 'login').and.returnValue(Observable.of(true));
          button.click();
          tick();
  
          expect(component.login).toHaveBeenCalled();
          expect(component.loading).toBe(false);
      })));
  
  });
  </code></pre>
  
  <p>Problem with this is <code>login</code> function from component is never called When I console.log inside <code>login</code> method in component it display message...</p>
  
  <p>This is Html part:</p>
  
  <pre><code>&lt;form name="form" class="form-horizontal" (ngSubmit)="f.form.valid &amp;&amp; login()" #f="ngForm" novalidate&gt;
  &lt;img class="loading-img" *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /&gt;
  
                &lt;div class="form-group" [ngClass]="{ 'has-error': f.submitted &amp;&amp; !username.valid }"&gt;
               &lt;label for="username" class="cols-sm-2 control-label"&gt;Email&lt;/label&gt;
                  &lt;div class="cols-sm-10"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-user fa" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input type="text" class="form-control" name="username" placeholder="Your email" [(ngModel)]="model.username" #username="ngModel" required /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="f.submitted &amp;&amp; !username.valid" class="help-block"&gt;Email is required&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" [ngClass]="{ 'has-error': f.submitted &amp;&amp; !password.valid }"&gt;
                   &lt;label for="password" class="cols-sm-2 control-label"&gt;Password&lt;/label&gt;
                  &lt;div class="cols-sm-10"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-lock fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input type="password" placeholder="Your password"  class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="f.submitted &amp;&amp; !password.valid" class="help-block"&gt;Password is required&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;button id="login" type="submit"  class="btn btn-primary"&gt;Login&lt;/button&gt;
  
  
              &lt;div *ngIf="error" style="margin-top: 20px;" class="text-center alert alert-danger"&gt;{{error}}&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group text-center login-down" &gt;
                  &lt;a routerLink="/register" routerLinkActive="active"&gt;Register now&lt;/a&gt;
                  &lt;a routerLink="/forgot" routerLinkActive="active"&gt;Forgot password&lt;/a&gt;
  
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>