[Angular Testing] Unit Testing -- Test component and service.

Recommend to use angular-cli to generate component and service, so we can get testing templates.

ng g s heros // generate a heros service

Component with injected service:

import { TestBed, async, inject } from '@angular/core/testing';
import { AppComponent } from './app.component';
import {HerosService} from "./heros.service";
import {By} from "@angular/platform-browser";

let fixture, comInstance, herosService, element, de;

describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
providers: [
HerosService
]
});
TestBed.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
de = fixture.debugElement;
comInstance = fixture.debugElement.componentInstance;
herosService = fixture.debugElement.injector.get(HerosService);
element = fixture.nativeElement;      // to access DOM element
});

it('should create the app', async(() => {
expect(comInstance).toBeTruthy();
}));

it(`should have as title 'app works!'`, async(() => {
expect(comInstance.title).toEqual('app works!');
}));

it('should render title in a h1 tag', async(() => {
fixture.detectChanges();
expect(element.querySelector('h1').textContent).toContain('app works!');
}));

it('should able to change the title', async(() => {
const expected = "Change title";
comInstance.title = expected;
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(element.querySelector('h1').innerText).toBe(expected);
expect(de.query(By.css('h1')).nativeElement.innerText).toBe(expected);
});
}));

it('should have HerosService defined', async(() => {
const expected = herosService.foo();
const result = "foo";
expect(expected).toBe(result);
}));
});

Service:

/* tslint:disable:no-unused-variable */

import { TestBed, async, inject } from '@angular/core/testing';
import { HerosService } from './heros.service';
import {HttpModule} from "@angular/http";

let service;

describe('HerosService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ HttpModule ],
providers: [
HerosService
]
});
});

beforeEach(inject([HerosService], s => {
service = s;
}));

it('should ...', inject([HerosService], (service: HerosService) => {
expect(service).toBeTruthy();
}));

it('should able to get foo from foo()', inject([HerosService], service => {
const expected = service.foo();
const result = "foo";
expect(expected).toBe(result);
}));

it('should able to get heros from api', async(() => {
service.getHeros()
.subscribe(( heros )=> {
expect(heros.length).toEqual(82);
})
}))
});