Failed to check component with service

Question

After reading this guide, I decided to check out my simple login page containing only 2 input fields and a submit button. The component then uses LoginServiceto transfer this data to the backend.

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

To begin with, I just wanted to check if the initial value of the input element is #usernameempty. But I could not even get the specification to work due to the problems listed below:

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 to remove 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

, LoginService

@Component({
  providers: [ LoginService ]
})

, , . , :

• . , @NgModule.providers .

• @Component.providers .

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

Answer 2

Alexus,

Http ""? , . , LoginService {Http} , {Http}, .

EDIT:

TestBed.configureTestingModule({
  declarations: [ LoginComponent, DummyComponent ], // declare the test component
  providers: [
   { provide: LoginService,  useClass: LoginServiceStub },
   Http,
  ],
  imports: [ 
    FormsModule , 
    RouterTestingModule.withRoutes([
     { path: 'singup', component: DummyComponent }
    ])
  ]

!:

, , , Http, unit test. "MockBackend" @angular/http/testing - "", , Http, MockBackend .