Unable to test a component with a service

Question

After reading this guide I've decided to test my simple login page which contains just 2 input boxes and a submit button. The component then uses a LoginService to pass these data to backend.

( Also note that I'm new to Unit testing as such, so I'm not sure if this is a good approach as how to test such component. )

For starters, I only wanted to check, if the initial value of #username input element is empty. But I couldn't even make the spec to work due to the below reported issues:

Chrome 55.0.2883 (Windows 7 0.0.0) LoginComponent Username field should be empty FAILED
        Failed: Unexpected value 'Http' imported by the module 'DynamicTestModule'
        Error: Unexpected value 'Http' imported by the module 'DynamicTestModule'
        TypeError: Cannot read property 'detectChanges' of undefined
Chrome 55.0.2883 (Windows 7 0.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.348 secs)

When I tried deleting the Http module, I got this error :

Chrome 55.0.2883 (Windows 7 0.0.0) LoginComponent Username field should be empty FAILED
        Error: DI Error
        Error: Uncaught (in promise): Error: No provider for Http!
        TypeError: Cannot read property 'detectChanges' of undefined
Chrome 55.0.2883 (Windows 7 0.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.456 secs)

login.component.html

<div class="login jumbotron center-block">
  <h1>Login</h1>

  <form (ngSubmit)="onSubmit($event)" #loginForm="ngForm">

    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" [(ngModel)]="model.username" name="username" 
              placeholder="Username" #username="ngModel" required>
      <div [hidden]="username.valid || username.pristine" class="alert alert-danger"> Username is required </div>
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" [(ngModel)]="model.password" name="password" placeholder="Password" #password="ngModel" required>
      <div [hidden]="password.valid || password.pristine" class="alert alert-danger"> Password is required </div>
    </div>

    <button type="submit" class="btn btn-default" [disabled]="!loginForm.form.valid" >Submit</button>
    <a [routerLink]="['/signup']">Click here to Signup</a>
  </form>
</div>

login.component.ts

import { Component }      from '@angular/core';
import { Router }         from '@angular/router';
import { LoginService }   from '../services/login.service';
import { User }           from '../extensions/user.class';

@Component({
  moduleId: module.id,
  selector: 'login',
  templateUrl: '../templates/login.component.html',
  styleUrls: [ '../styles/login.component.css' ],
  providers: [ LoginService ]
})
export class LoginComponent {

  private submitted = false;
  private model = new User();

  constructor(
    private router: Router,
    private loginService: LoginService
  ) {}

  public onSubmit(event: any): void {
    event.preventDefault();
    if ( ! this.submitted ) {
      this.submitted = true;

      if ( this.model.username && this.model.password ) {
        this.loginService.login(this.model).then( (token) => {
          localStorage.setItem('id_token', token.id);
          this.router.navigate(['home']);
        }).catch( (error) => this.onLoginFailed(error) );
      } else {
        console.warn('No username or password provided');
      }

    }
  }

  private onLoginFailed( error: any ): void { 
    //// errors are already handled in login-service ////
    console.error(error);
    this.submitted = false; /// reset form submit funcitonality ///
  }

  public signup(event: any): void {
    event.preventDefault();
    this.router.navigate(['signup']);
  }
}

login.component.spec.ts

import { async }                             from '@angular/core/testing';

import { FormsModule }                       from '@angular/forms';
import { RouterTestingModule }               from '@angular/router/testing';
import { Component }                         from '@angular/core';
import { Location }                          from '@angular/common';

import { LoginComponent }                    from './login.component';
import { LoginService }                      from '../services/login.service';
import { Http }   from '@angular/http';

import { User }           from '../extensions/user.class';

@Component({
  template: ''
})
class DummyComponent{}

class LoginServiceStub {
  login( user: User ){
    return true;
  }
}

describe('LoginComponent', () => {
  let comp:      LoginComponent;
  let fixture:   ComponentFixture<LoginComponent>;
  let de:        DebugElement;
  let el:        HTMLElement;
  let location:  Location;

  // async beforeEach
  beforeEach( async(() => {

    TestBed.configureTestingModule({
      declarations: [ LoginComponent, DummyComponent ], // declare the test component
      providers: [
       { provide: LoginService,  useClass: LoginServiceStub }
      ],
      imports: [ 
        FormsModule , 
        RouterTestingModule.withRoutes([
         { path: 'singup', component: DummyComponent }
        ])
      ]
    }).compileComponents()  // compile template and css
    .then( () => {
      fixture = TestBed.createComponent(LoginComponent);
      comp = fixture.componentInstance; // LoginComponent test instance
      de = fixture.debugElement.query(By.css('input[name="username"]'));
      el = de.nativeElement;
    });

  }));

  it('Username field should be empty', () => {
    fixture.detectChanges();
    expect(el.textContent).toContain('');
  });

});

Answer 1

The problem is that the LoginService is declared at the component level

@Component({
  providers: [ LoginService ]
})

This will supersede any same service declared at the module level, which is where you declare the mock in the test. There are a couple things you can do:

1. Don't declare the service at the component level. If there is not good reason to scope it to the component, then just declare it at the @NgModule.providers and make it a singleton.

2. Override the @Component.providers in the test.

   TestBed.configureTestingModule({})
   TestBed.overrideComponent(LoginComponent, {
     set: {
       providers: [
         { provide: LoginService,  useClass: LoginServiceStub }
       ]
     }
   });