[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);
      })
  }))
});