Angular 2 Register/Login Unit Tests for 2.0 Final Version and Release. Code for https://github.com/xphong/registration-app

app.spec.ts

import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { async, inject, TestBed } from '@angular/core/testing';

import { App } from './app.component';

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

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

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

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

describe('App', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ App ]
    });
  });

  it('should have an app title', inject([ App ], (app) => {
    expect(app.title).toEqual('Registration App');
  }));

});

describe('Router', () => {

  const Routes = [
    { path: '',      component: Home },
    { path: 'home',  component: Home },
    { path: 'about', component: About },
    { path: 'register', component: Register },
    { path: 'login', component: Login },
    { path: '**',    component: Home }
  ];

  let location, router, fixture;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule.withRoutes(Routes) ],
      declarations: [
        App,
        Home,
        About,
        Register,
        Login
      ]
    })
    .compileComponents();
  }));

  beforeEach(inject([Router, Location], (_router: Router, _location: Location) => {
    location = _location;
    router = _router;

    fixture = TestBed.createComponent(App);
    fixture.detectChanges();
  }));

  it('should be able to navigate to Home', async(() => {
    router.navigate(['/home']).then(() => {
      expect(location.path()).toBe('/home');
    });
  }));

  it('should be able to navigate to About', async(() => {
    router.navigate(['/about']).then(() => {
      expect(location.path()).toBe('/about');
    });
  }));

  it('should be able to navigate to Register', async(() => {
    router.navigate(['/register']).then(() => {
      expect(location.path()).toBe('/register');
    });
  }));

  it('should be able to navigate to Login', async(() => {
    router.navigate(['/login']).then(() => {
      expect(location.path()).toBe('/login');
    });
  }));

});

login.component.spec.ts

import { Component } from '@angular/core';
import { async, inject, TestBed } from '@angular/core/testing';
import { BaseRequestOptions, ConnectionBackend, Http } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Observable } from 'rxjs/Rx';

import { RegistrationService } from '../shared/services/registration';
import { Login } from './login';

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

class MockRegistrationService {
  loginUser(user) {
    return Observable.of({
      username: 'TestUser1',
      password: 'TestPassword1'
    });
  }
}

describe('Login', () => {
  let mockRegistrationService = new MockRegistrationService();

  beforeEach(() => TestBed.configureTestingModule({
    declarations: [
      Login,
      Register
    ],
    providers: [
      Login,
      {provide: RegistrationService, useValue: mockRegistrationService }
    ],
    imports: [
      ReactiveFormsModule,
      RouterTestingModule.withRoutes([ {path: 'register', component: Register} ])
    ]
  }));

  it('should log ngOnInit', inject([Login], (login) => {
    spyOn(console, 'log');
    expect(console.log).not.toHaveBeenCalled();

    login.ngOnInit();
    expect(console.log).toHaveBeenCalled();
  }));

  it('should successfully login', async(() => {
    let fixture = TestBed.createComponent(Login);
    let loginComponent = fixture.componentInstance;

    fixture.detectChanges();

    loginComponent.login({
      username: 'TestUser1',
      password: 'TestPassword1'
    });

    expect(loginComponent.successMessage).toEqual('Login successful');
    expect(loginComponent.errorMessage).toEqual('');
  }));

});

register.component.spec.ts

import { Component } from '@angular/core';
import { async, inject, TestBed } from '@angular/core/testing';
import { BaseRequestOptions, ConnectionBackend, Http } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Observable } from 'rxjs/Rx';

import { RegistrationService } from '../shared/services/registration';
import { Register } from './register';

class MockRegistrationService {
  registerUser(user) {
    return Observable.of({
      username: 'TestUser1',
      password: 'TestPassword1'
    });
  }
}

describe('Register', () => {
  let mockRegistrationService = new MockRegistrationService();

  beforeEach(() => TestBed.configureTestingModule({
    declarations: [
      Register
    ],
    providers: [
      Register,
      {provide: RegistrationService, useValue: mockRegistrationService }
    ],
    imports: [
      ReactiveFormsModule,
      RouterTestingModule.withRoutes([ {path: 'register', component: Register} ])
    ]
  }));

  it('should log ngOnInit', inject([Register], (register) => {
    spyOn(console, 'log');
    expect(console.log).not.toHaveBeenCalled();

    register.ngOnInit();
    expect(console.log).toHaveBeenCalled();
  }));

  it('should successfully register a user', async(() => {
    let fixture = TestBed.createComponent(Register);
    let registerComponent = fixture.componentInstance;

    fixture.detectChanges();

    registerComponent.register({
      username: 'TestUser1',
      password: 'TestPassword1'
    });

    expect(registerComponent.successMessage).toEqual('Account successfully created');
    expect(registerComponent.errorMessage).toEqual('');
  }));

});

registration.service.spec.ts

import { Component } from '@angular/core';
import { async, inject, TestBed } from '@angular/core/testing';
import { BaseRequestOptions, ConnectionBackend, Http, Response, ResponseOptions } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Observable } from 'rxjs/Rx';

import { RegistrationService } from './registration';

describe('RegistrationService', () => {

  let mockBackend, registrationService;
  const mockResponse = [
    {
      id: 1,
      username: 'TestUser1',
      password: 'TestPassword1'
    },
    {
      id: 2,
      username: 'TestUser2',
      password: 'TestPassword2'
    }
  ];
  const usersUrl = 'http://localhost:8080/api/users';
  const registerUrl = 'http://localhost:8080/api/register';
  const loginUrl = 'http://localhost:8080/api/login';
  
  beforeEach(() => TestBed.configureTestingModule({
    providers: [
      MockBackend,
      RegistrationService,
      Http,
      ConnectionBackend,
      BaseRequestOptions,
      {
        provide: Http,
        useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
          return new Http(backend, defaultOptions);
        },
        deps: [MockBackend, BaseRequestOptions],
      }
    ]
  }));

  beforeEach(inject([ MockBackend, RegistrationService ], (_mockBackend, _registrationService) => {
    mockBackend = _mockBackend;
    registrationService = _registrationService;
  }));

  it('should have http', () => {
    expect(!!registrationService._http).toEqual(true);
  });

  it('should return users', done => {
    const options = new ResponseOptions({
      body: {
        users: mockResponse,
        status: 200
      }
    });

    const response = new Response(options);
    
    mockBackend.connections.subscribe(connection => {
      connection.mockRespond(response);
      expect(connection.request.url).toEqual(usersUrl);
    });

    registrationService.getUsers().subscribe(data => {
      expect(data.users[0].username).toEqual('TestUser1');
      expect(data.users[0].password).toEqual('TestPassword1');
      expect(data.users[1].username).toEqual('TestUser2');
      expect(data.users[1].password).toEqual('TestPassword2');
      expect(data.users.length).toEqual(2);
      done();
    });
  });

  it('should return registered user', done => {
    const user = {
      username: 'TestUser1',
      password: 'TestPassword1'
    };

    const options = new ResponseOptions({
      body: {
        user: mockResponse[0],
        status: 200
      }
    });

    const response = new Response(options);

    mockBackend.connections.subscribe(connection => {
      connection.mockRespond(response);
      expect(connection.request.url).toEqual(registerUrl);
    });

    registrationService.registerUser(user).subscribe(data => {
      expect(data.user.username).toEqual('TestUser1');
      expect(data.user.password).toEqual('TestPassword1');
      done();
    });
  });

  it('should return login user', done => {
    const user = {
      username: 'TestUser1',
      password: 'TestPassword1'
    };

    const options = new ResponseOptions({
      body: {
        user: mockResponse[0],
        status: 200
      }
    });

    const response = new Response(options);

    mockBackend.connections.subscribe(connection => {
      connection.mockRespond(response);
      expect(connection.request.url).toEqual(loginUrl);
    });

    registrationService.loginUser(user).subscribe(data => {
      expect(data.user.username).toEqual('TestUser1');
      expect(data.user.password).toEqual('TestPassword1');
      done();
    });
  });

  it('should return error for register user', done => {
    const user = {
      username: 'Test',
      password: 'test'
    };

    mockBackend.connections.subscribe(connection => {
      connection.mockError(new Error('error'));
      expect(connection.request.url).toEqual(loginUrl);
    });

    registrationService.loginUser(user).subscribe(user => user, err => {
      done();
    });
  });

});