测试

content_copyng test

content_copy10% building modules 1/1 modules 0 active
...INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
...INFO [launcher]: Launching browser Chrome ...
...INFO [launcher]: Starting browser Chrome
...INFO [Chrome ...]: Connected on socket ... 
Chrome ...: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)

content_copy// Straight Jasmine testing without Angular's testing supportdescribe('ValueService', () => {  let service: ValueService;  beforeEach(() => { service = new ValueService( }   it('#getValue should return real value', () => {    expect(service.getValue()).toBe('real value'  }   it('#getObservableValue should return value from observable',    (done: DoneFn) => {    service.getObservableValue().subscribe(value => {      expect(value).toBe('observable value'      done(    }  }   it('#getPromiseValue should return value from a promise',    (done: DoneFn) => {    service.getPromiseValue().then(value => {      expect(value).toBe('promise value'      done(    }  }}

content_copy@Injectable()
export class MasterService {
  constructor(private valueService: ValueService) { }
  getValue() { return this.valueService.getValue( }
}

content_copydescribe('MasterService without Angular testing support', () => {  let masterService: MasterService;   it('#getValue should return real value from the real service', () => {    masterService = new MasterService(new ValueService()    expect(masterService.getValue()).toBe('real value'  }   it('#getValue should return faked value from a fakeService', () => {    masterService = new MasterService(new FakeValueService()    expect(masterService.getValue()).toBe('faked service value'  }   it('#getValue should return faked value from a fake object', () => {    const fake =  { getValue: () => 'fake value' };    masterService = new MasterService(fake as ValueService    expect(masterService.getValue()).toBe('fake value'  }   it('#getValue should return stubbed value from a spy', () => {    // create `getValue` spy on an object representing the ValueService    const valueServiceSpy =      jasmine.createSpyObj('ValueService', ['getValue']     // set the value to return when the `getValue` spy is called.    const stubValue = 'stub value';    valueServiceSpy.getValue.and.returnValue(stubValue     masterService = new MasterService(valueServiceSpy     expect(masterService.getValue())      .toBe(stubValue, 'service returned stub value'    expect(valueServiceSpy.getValue.calls.count())      .toBe(1, 'spy method was called once'    expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)      .toBe(stubValue  }}

content_copylet service: ValueService;

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

content_copyit('should use ValueService', () => {
  service = TestBed.get(ValueService
  expect(service.getValue()).toBe('real value'
}

content_copybeforeEach(() => {
  TestBed.configureTestingModule{ providers: [ValueService] }
  service = TestBed.get(ValueService
}

content_copylet masterService: MasterService;
let valueServiceSpy: jasmine.SpyObj<ValueService>;

beforeEach(() => {
  const spy = jasmine.createSpyObj('ValueService', ['getValue']

  TestBed.configureTestingModule{
    // Provide both the service-to-test and its (spy) dependency
    providers: [
      MasterService,
      { provide: ValueService, useValue: spy }
    ]
  }
  // Inject both the service-to-test and its (spy) dependency
  masterService = TestBed.get(MasterService
  valueServiceSpy = TestBed.get(ValueService
}

content_copyit('#getValue should return stubbed value from a spy', () => {
  const stubValue = 'stub value';
  valueServiceSpy.getValue.and.returnValue(stubValue

  expect(masterService.getValue())
    .toBe(stubValue, 'service returned stub value'
  expect(valueServiceSpy.getValue.calls.count())
    .toBe(1, 'spy method was called once'
  expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
    .toBe(stubValue
}

content_copyfunction setup() {
  const valueServiceSpy =
    jasmine.createSpyObj('ValueService', ['getValue']
  const stubValue = 'stub value';
  const masterService = new MasterService(valueServiceSpy

  valueServiceSpy.getValue.and.returnValue(stubValue
  return { masterService, stubValue, valueServiceSpy };
}

content_copyit('#getValue should return stubbed value from a spy', () => {
  const { masterService, stubValue, valueServiceSpy } = setup(
  expect(masterService.getValue())
    .toBe(stubValue, 'service returned stub value'
  expect(valueServiceSpy.getValue.calls.count())
    .toBe(1, 'spy method was called once'
  expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
    .toBe(stubValue
}

content_copyconst { masterService, stubValue, valueServiceSpy } = setup(

content_copylet httpClientSpy: { get: jasmine.Spy };let heroService: HeroService; beforeEach(() => {  // TODO: spy on other methods too  httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']  heroService = new HeroService(<any> httpClientSpy} it('should return expected heroes (HttpClient called once)', () => {  const expectedHeroes: Hero[] =    [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];   httpClientSpy.get.and.returnValue(asyncData(expectedHeroes)   heroService.getHeroes().subscribe(    heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),    fail    expect(httpClientSpy.get.calls.count()).toBe(1, 'one call'} it('should return an error when the server returns a 404', () => {  const errorResponse = new HttpErrorResponse{    error: 'test 404 error',    status: 404, statusText: 'Not Found'  }   httpClientSpy.get.and.returnValue(asyncError(errorResponse)   heroService.getHeroes().subscribe(    heroes => fail('expected an error, not heroes'),    error  => expect(error.message).toContain('test 404 error')  }

content_copy@Component{
  selector: 'lightswitch-comp',
  template: `
    <button (click)="clicked()">Click me!</button>
    <span>{{message}}</span>`
})
export class LightswitchComponent {
  isOn = false;
  clicked() { this.isOn = !this.isOn; }
  get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
}

content_copydescribe('LightswitchComp', () => {
  it('#clicked() should toggle #isOn', () => {
    const comp = new LightswitchComponent(
    expect(comp.isOn).toBe(false, 'off at first'
    comp.clicked(
    expect(comp.isOn).toBe(true, 'on after click'
    comp.clicked(
    expect(comp.isOn).toBe(false, 'off after second click'
  }

  it('#clicked() should set #message to "is on"', () => {
    const comp = new LightswitchComponent(
    expect(comp.message).toMatch(/is off/i, 'off at first'
    comp.clicked(
    expect(comp.message).toMatch(/is on/i, 'on after clicked'
  }
}

content_copyexport class DashboardHeroComponent {
  @Input() hero: Hero;
  @Output() selected = new EventEmitter<Hero>(
  click() { this.selected.emit(this.hero }
}

content_copyit('raises the selected event when clicked', () => {
  const comp = new DashboardHeroComponent(
  const hero: Hero = { id: 42, name: 'Test' };
  comp.hero = hero;

  comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero)
  comp.click(
}

content_copyexport class WelcomeComponent  implements OnInit {
  welcome: string;
  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.welcome = this.userService.isLoggedIn ?
      'Welcome, ' + this.userService.user.name : 'Please log in.';
  }
}

content_copyclass MockUserService {
  isLoggedIn = true;
  user = { name: 'Test User'};
};

content_copybeforeEach(() => {
  TestBed.configureTestingModule{
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  }
  // inject both the component and the dependent service.
  comp = TestBed.get(WelcomeComponent
  userService = TestBed.get(UserService
}

content_copyit('should not have welcome message after construction', () => {
  expect(comp.welcome).toBeUndefined(
}

it('should welcome logged in user after Angular calls ngOnInit', () => {
  comp.ngOnInit(
  expect(comp.welcome).toContain(userService.user.name
}

it('should ask user to log in if not logged in after ngOnInit', () => {
  userService.isLoggedIn = false;
  comp.ngOnInit(
  expect(comp.welcome).not.toContain(userService.user.name
  expect(comp.welcome).toContain('log in'
}

content_copyng generate component banner --inline-template --inline-style --module app

content_copyimport { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BannerComponent } from './banner.component';

describe('BannerComponent', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule{
      declarations: [ BannerComponent ]
    })
    .compileComponents(
  })

  beforeEach(() => {
    fixture = TestBed.createComponent(BannerComponent
    component = fixture.componentInstance;
    fixture.detectChanges(
  }

  it('should create', () => {
    expect(component).toBeDefined(
  }
}

content_copydescribe('BannerComponent (minimal)', () => {
  it('should create', () => {
    TestBed.configureTestingModule{
      declarations: [ BannerComponent ]
    }
    const fixture = TestBed.createComponent(BannerComponent
    const component = fixture.componentInstance;
    expect(component).toBeDefined(
  }
}

content_copyTestBed.configureTestingModule{
  declarations: [ BannerComponent ]
}

content_copyconst fixture = TestBed.createComponent(BannerComponent

content_copyconst component = fixture.componentInstance;
expect(component).toBeDefined(

content_copydescribe('BannerComponent (with beforeEach)', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule{
      declarations: [ BannerComponent ]
    }
    fixture = TestBed.createComponent(BannerComponent
    component = fixture.componentInstance;
  }

  it('should create', () => {
    expect(component).toBeDefined(
  }
}

content_copyit('should contain "banner works!"', () => {
  const bannerElement: HTMLElement = fixture.nativeElement;
  expect(bannerElement.textContent).toContain('banner works!'
}

content_copyit('should have <p> with "banner works!"', () => {
  const bannerElement: HTMLElement = fixture.nativeElement;
  const p = bannerElement.querySelector('p'
  expect(p.textContent).toEqual('banner works!'
}

content_copyconst bannerElement: HTMLElement = fixture.nativeElement;

content_copyconst bannerDe: DebugElement = fixture.debugElement;
const bannerEl: HTMLElement = bannerDe.nativeElement;

content_copyit('should find the <p> with fixture.debugElement.nativeElement)', () => {
  const bannerDe: DebugElement = fixture.debugElement;
  const bannerEl: HTMLElement = bannerDe.nativeElement;
  const p = bannerEl.querySelector('p'
  expect(p.textContent).toEqual('banner works!'
}

content_copyimport { DebugElement } from '@angular/core';

content_copyimport { By } from '@angular/platform-browser';

content_copyit('should find the <p> with fixture.debugElement.query(By.css)', () => {
  const bannerDe: DebugElement = fixture.debugElement;
  const paragraphDe = bannerDe.query(By.css('p')
  const p: HTMLElement = paragraphDe.nativeElement;
  expect(p.textContent).toEqual('banner works!'
}

content_copy@Component{
  selector: 'app-banner',
  template: '<h1>{{title}}</h1>',
  styles: ['h1 { color: green; font-size: 350%}']
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}

content_copylet component: BannerComponent;
let fixture:   ComponentFixture<BannerComponent>;
let h1:        HTMLElement;

beforeEach(() => {
  TestBed.configureTestingModule{
    declarations: [ BannerComponent ],
  }
  fixture = TestBed.createComponent(BannerComponent
  component = fixture.componentInstance; // BannerComponent test instance
  h1 = fixture.nativeElement.querySelector('h1'
}

content_copyit('should display original title', () => {
  expect(h1.textContent).toContain(component.title
}

content_copyexpected '' to contain 'Test Tour of Heroes'.

content_copyit('no title in the DOM after createComponent()', () => {
  expect(h1.textContent).toEqual(''
}

content_copyit('should display original title after detectChanges()', () => {
  fixture.detectChanges(
  expect(h1.textContent).toContain(component.title
}

content_copyit('should display a different test title', () => {
  component.title = 'Test Title';
  fixture.detectChanges(
  expect(h1.textContent).toContain('Test Title'
}

content_copyimport { ComponentFixtureAutoDetect } from '@angular/core/testing';

content_copyTestBed.configureTestingModule{
  declarations: [ BannerComponent ],
  providers: [
    { provide: ComponentFixtureAutoDetect, useValue: true }
  ]
}

content_copyit('should display original title', () => {
  // Hooray! No `fixture.detectChanges()` needed
  expect(h1.textContent).toContain(comp.title
}

it('should still see original title after comp.title change', () => {
  const oldTitle = comp.title;
  comp.title = 'Test Title';
  // Displayed title is old because Angular didn't hear the change :(
  expect(h1.textContent).toContain(oldTitle
}

it('should display updated title after detectChanges', () => {
  comp.title = 'Test Title';
  fixture.detectChanges( // detect changes explicitly
  expect(h1.textContent).toContain(comp.title
}

content_copyit('should convert hero name to Title Case', () => {  // get the name's input and display elements from the DOM  const hostElement = fixture.nativeElement;  const nameInput: HTMLInputElement = hostElement.querySelector('input'  const nameDisplay: HTMLElement = hostElement.querySelector('span'   // simulate user entering a new name into the input box  nameInput.value = 'quick BROWN  fOx';   // dispatch a DOM event so that Angular learns of input value change.  nameInput.dispatchEvent(newEvent('input')   // Tell Angular to update the display binding through the title pipe  fixture.detectChanges(   expect(nameDisplay.textContent).toBe('Quick Brown  Fox'}

content_copy@Component{
  selector: 'app-banner',
  templateUrl: './banner-external.component.html',
  styleUrls:  ['./banner-external.component.css']
})

content_copyError: This test module uses the component BannerComponent 
which is using a "templateUrl" or "styleUrls", but they were never compiled. 
Please call "TestBed.compileComponents" before your test.

content_copyimport { Component, OnInit } from '@angular/core';
import { UserService }       from '../model/user.service';

@Component{
  selector: 'app-welcome',
  template: '<h3 class="welcome"><i>{{welcome}}</i></h3>'
})
export class WelcomeComponent  implements OnInit {
  welcome: string;
  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.welcome = this.userService.isLoggedIn ?
      'Welcome, ' + this.userService.user.name : 'Please log in.';
  }
}

content_copyTestBed.configureTestingModule{
   declarations: [ WelcomeComponent ],
// providers:    [ UserService ]  // NO! Don't provide the real service!
                                  // Provide a test-double instead
   providers:    [ {provide: UserService, useValue: userServiceStub } ]
}

content_copylet userServiceStub: Partial<UserService>;

userServiceStub = {
  isLoggedIn: true,
  user: { name: 'Test User'}
};

content_copy// UserService actually injected into the component
userService = fixture.debugElement.injector.get(UserService

content_copy// UserService from the root injector
userService = TestBed.get(UserService

content_copyit('stub object and injected UserService should not be the same', () => {
  expect(userServiceStub === userService).toBe(false

  // Changing the stub object has no effect on the injected service
  userServiceStub.isLoggedIn = false;
  expect(userService.isLoggedIn).toBe(true
}

content_copylet userServiceStub: Partial<UserService>;

beforeEach(() => {
  // stub UserService for test purposes
  userServiceStub = {
    isLoggedIn: true,
    user: { name: 'Test User'}
  };

  TestBed.configureTestingModule{
     declarations: [ WelcomeComponent ],
     providers:    [ {provide: UserService, useValue: userServiceStub } ]
  }

  fixture = TestBed.createComponent(WelcomeComponent
  comp    = fixture.componentInstance;

  // UserService from the root injector
  userService = TestBed.get(UserService

  //  get the "welcome" element by CSS selector (e.g., by class name)
  el = fixture.nativeElement.querySelector('.welcome'
}

content_copyit('should welcome the user', () => {
  fixture.detectChanges(
  const content = el.textContent;
  expect(content).toContain('Welcome', '"Welcome ..."'
  expect(content).toContain('Test User', 'expected name'
}

it('should welcome "Bubba"', () => {
  userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
  fixture.detectChanges(
  expect(el.textContent).toContain('Bubba'
}

it('should request login if not logged in', () => {
  userService.isLoggedIn = false; // welcome message hasn't been shown yet
  fixture.detectChanges(
  const content = el.textContent;
  expect(content).not.toContain('Welcome', 'not welcomed'
  expect(content).toMatch(/log in/i, '"log in"'
}

content_copytemplate: `
  <p class="twain"><i>{{quote | async}}</i></p>
  <button (click)="getQuote()">Next quote</button>
  <p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>`,

content_copygetQuote() {
  this.errorMessage = '';
  this.quote = this.twainService.getQuote().pipe(
    startWith('...'),
    catchError( (err: any) => {
      // Wait a turn because errorMessage already set once this turn
      setTimeout(() => this.errorMessage = err.message || err.toString()
      return of('...' // reset message to placeholder
    })
  

content_copybeforeEach(() => {
  testQuote = 'Test Quote';

  // Create a fake TwainService object with a `getQuote()` spy
  const twainService = jasmine.createSpyObj('TwainService', ['getQuote']
  // Make the spy return a synchronous Observable with the test data
  getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) 

  TestBed.configureTestingModule{
    declarations: [ TwainComponent ],
    providers:    [
      { provide: TwainService, useValue: twainService }
    ]
  }

  fixture = TestBed.createComponent(TwainComponent
  component = fixture.componentInstance;
  quoteEl = fixture.nativeElement.querySelector('.twain'
}

content_copy// Create a fake TwainService object with a `getQuote()` spy
const twainService = jasmine.createSpyObj('TwainService', ['getQuote']
// Make the spy return a synchronous Observable with the test data
getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) 

content_copyit('should show quote after component initialized', () => {
  fixture.detectChanges( // onInit()

  // sync spy result shows testQuote immediately after init
  expect(quoteEl.textContent).toBe(testQuote
  expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called'
}

content_copyit('should display error when TwainService fails', fakeAsync(() => {  // tell spy to return an error observable  getQuoteSpy.and.returnValue(    throwError('TwainService test failure')   fixture.detectChanges( // onInit()  // sync spy errors immediately after init   tick( // flush the component's setTimeout()   fixture.detectChanges( // update errorMessage within setTimeout()   expect(errorMessage()).toMatch(/test failure/, 'should display error'  expect(quoteEl.textContent).toBe('...', 'should show placeholder'})

content_copyfakeAsync(() => { /* test body */ })`

content_copy// Simulate delayed observable values with the `asyncData()` helper
getQuoteSpy.and.returnValue(asyncData(testQuote)

content_copy/** Create async observable that emits-once and completes
 *  after a JS engine turn */
export function asyncData<T>(data: T) {
  return defer(() => Promise.resolve(data)
}

content_copy/** Create async observable error that errors
 *  after a JS engine turn */
export function asyncError<T>(errorObject: any) {
  return defer(() => Promise.reject(errorObject)
}

content_copyit('should show quote after getQuote (fakeAsync)', fakeAsync(() => {
  fixture.detectChanges( // ngOnInit()
  expect(quoteEl.textContent).toBe('...', 'should show placeholder'

  tick( // flush the observable to get the quote
  fixture.detectChanges( // update view

  expect(quoteEl.textContent).toBe(testQuote, 'should show quote'
  expect(errorMessage()).toBeNull('should not show error'
})

content_copyit('should show quote after getQuote (async)', async(() => {
  fixture.detectChanges( // ngOnInit()
  expect(quoteEl.textContent).toBe('...', 'should show placeholder'

  fixture.whenStable().then(() => { // wait for async getQuote
    fixture.detectChanges(        // update view with quote
    expect(quoteEl.textContent).toBe(testQuote
    expect(errorMessage()).toBeNull('should not show error'
  }
})

content_copyit('should show last quote (quote done)', (done: DoneFn) => {
  fixture.detectChanges(

  component.quote.pipe( last() ).subscribe(() => {
    fixture.detectChanges( // update view with quote
    expect(quoteEl.textContent).toBe(testQuote
    expect(errorMessage()).toBeNull('should not show error'
    done(
  }
}

content_copyit('should show quote after getQuote (spy done)', (done: DoneFn) => {
  fixture.detectChanges(

  // the spy's most recent call returns the observable with the test quote
  getQuoteSpy.calls.mostRecent().returnValue.subscribe(() => {
    fixture.detectChanges( // update view with quote
    expect(quoteEl.textContent).toBe(testQuote
    expect(errorMessage()).toBeNull('should not show error'
    done(
  }
}

content_copyimport { cold, getTestScheduler } from 'jasmine-marbles';

content_copyit('should show quote after getQuote (marbles)', () => {
  // observable test quote value and complete(), after delay
  const q$ = cold('---x|', { x: testQuote }
  getQuoteSpy.and.returnValue( q$ 

  fixture.detectChanges( // ngOnInit()
  expect(quoteEl.textContent).toBe('...', 'should show placeholder'

  getTestScheduler().flush( // flush the observables

  fixture.detectChanges( // update view

  expect(quoteEl.textContent).toBe(testQuote, 'should show quote'
  expect(errorMessage()).toBeNull('should not show error'
}

content_copyconst q$ = cold('---x|', { x: testQuote }

content_copygetTestScheduler().flush( // flush the observables

content_copyit('should display error when TwainService fails', fakeAsync(() => {
  // observable error after delay
  const q$ = cold('---#|', null, new Error('TwainService test failure')
  getQuoteSpy.and.returnValue( q$ 

  fixture.detectChanges( // ngOnInit()
  expect(quoteEl.textContent).toBe('...', 'should show placeholder'

  getTestScheduler().flush( // flush the observables
  tick(                     // component shows error after a setTimeout()
  fixture.detectChanges(    // update error message

  expect(errorMessage()).toMatch(/test failure/, 'should display error'
  expect(quoteEl.textContent).toBe('...', 'should show placeholder'
})

content_copyconst q$ = cold('---#|', null, new Error('TwainService test failure')

content_copy<dashboard-hero *ngFor="let hero of heroes"  class="col-1-4"
  [hero]=hero  (selected)="gotoDetail($event)" >
</dashboard-hero>

content_copy@Component{
  selector: 'dashboard-hero',
  template: `
    <div (click)="click()" class="hero">
      {{hero.name | uppercase}}
    </div>`,
  styleUrls: [ './dashboard-hero.component.css' ]
})
export class DashboardHeroComponent {
  @Input() hero: Hero;
  @Output() selected = new EventEmitter<Hero>(
  click() { this.selected.emit(this.hero }
}

content_copyconstructor(
  private router: Router,
  private heroService: HeroService) {
}

content_copyTestBed.configureTestingModule{
  declarations: [ DashboardHeroComponent ]
})
fixture = TestBed.createComponent(DashboardHeroComponent
comp    = fixture.componentInstance;

// find the hero's DebugElement and element
heroDe  = fixture.debugElement.query(By.css('.hero')
heroEl = heroDe.nativeElement;

// mock the hero supplied by the parent component
expectedHero = { id: 42, name: 'Test Name' };

// simulate the parent setting the input property with that hero
comp.hero = expectedHero;

// trigger initial data binding
fixture.detectChanges(

content_copyit('should display hero name in uppercase', () => {
  const expectedPipedName = expectedHero.name.toUpperCase(
  expect(heroEl.textContent).toContain(expectedPipedName
}

content_copyit('should raise selected event when clicked (triggerEventHandler)', () => {
  let selectedHero: Hero;
  comp.selected.subscribe((hero: Hero) => selectedHero = hero

  heroDe.triggerEventHandler('click', null
  expect(selectedHero).toBe(expectedHero
}

content_copyheroDe.triggerEventHandler('click', null

content_copyit('should raise selected event when clicked (element.click)', () => {
  let selectedHero: Hero;
  comp.selected.subscribe((hero: Hero) => selectedHero = hero

  heroEl.click(
  expect(selectedHero).toBe(expectedHero
}

content_copy/** Button events to pass to `DebugElement.triggerEventHandler` for RouterLink event handler */
export const ButtonClickEvents = {
   left:  { button: 0 },
   right: { button: 2 }
};

/** Simulate element click. Defaults to mouse left-button click event. */
export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
  if (el instanceof HTMLElement) {
    el.click(
  } else {
    el.triggerEventHandler('click', eventObj
  }
}

content_copyit('should raise selected event when clicked (click helper)', () => {
  let selectedHero: Hero;
  comp.selected.subscribe(hero => selectedHero = hero

  click(heroDe // click helper with DebugElement
  click(heroEl // click helper with native element

  expect(selectedHero).toBe(expectedHero
}

content_copy@Component{
  template: `
    <dashboard-hero
      [hero]="hero" (selected)="onSelected($event)">
    </dashboard-hero>`
})
class TestHostComponent {
  hero: Hero = {id: 42, name: 'Test Name' };
  selectedHero: Hero;
  onSelected(hero: Hero) { this.selectedHero = hero; }
}

content_copyTestBed.configureTestingModule{
  declarations: [ DashboardHeroComponent, TestHostComponent ]
})
// create TestHostComponent instead of DashboardHeroComponent
fixture  = TestBed.createComponent(TestHostComponent
testHost = fixture.componentInstance;
heroEl   = fixture.nativeElement.querySelector('.hero'
fixture.detectChanges( // trigger initial data binding

content_copyit('should display hero name', () => {
  const expectedPipedName = testHost.hero.name.toUpperCase(
  expect(heroEl.textContent).toContain(expectedPipedName
}

it('should raise selected event when clicked', () => {
  click(heroEl
  // selected hero should be the same data bound hero
  expect(testHost.selectedHero).toBe(testHost.hero
}

content_copyconstructor(
  private router: Router,
  private heroService: HeroService) {
}

content_copygotoDetail(hero: Hero) {
  let url = `/heroes/${hero.id}`;
  this.router.navigateByUrl(url
}

content_copyconst routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']
const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']

TestBed.configureTestingModule{
  providers: [
    { provide: HeroService, useValue: heroServiceSpy },
    { provide: Router,      useValue: routerSpy }
  ]
})

content_copyit('should tell ROUTER to navigate when hero clicked', () => {

  heroClick( // trigger click on first inner <div class="hero">

  // args passed to router.navigateByUrl() spy
  const spy = router.navigateByUrl as jasmine.Spy;
  const navArgs = spy.calls.first().args[0];

  // expecting to navigate to id of the component's first hero
  const id = comp.heroes[0].id;
  expect(navArgs).toBe('/heroes/' + id,
    'should nav to HeroDetail for first hero'
}

content_copyconstructor(
  private heroDetailService: HeroDetailService,
  private route:  ActivatedRoute,
  private router: Router) {
}

content_copyngOnInit(): void {
  // get hero when `id` param changes
  this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id'))
}

content_copyimport { convertToParamMap, ParamMap, Params } from '@angular/router';
import { ReplaySubject } from 'rxjs';

/**
 * An ActivateRoute test double with a `paramMap` observable.
 * Use the `setParamMap()` method to add the next `paramMap` value.
 */
export class ActivatedRouteStub {
  // Use a ReplaySubject to share previous values with subscribers
  // and pump new values into the `paramMap` observable
  private subject = new ReplaySubject<ParamMap>(

  constructor(initialParams?: Params) {
    this.setParamMap(initialParams
  }

  /** The mock paramMap observable */
  readonly paramMap = this.subject.asObservable(

  /** Set the paramMap observables's next value */
  setParamMap(params?: Params) {
    this.subject.next(convertToParamMap(params)
  };
}

content_copydescribe('when navigate to existing hero', () => {
  let expectedHero: Hero;

  beforeEach(async(() => {
    expectedHero = firstHero;
    activatedRoute.setParamMap{ id: expectedHero.id }
    createComponent(
  })

  it('should display that hero\'s name', () => {
    expect(page.nameDisplay.textContent).toBe(expectedHero.name
  }
}

content_copydescribe('when navigate to non-existent hero id', () => {
  beforeEach(async(() => {
    activatedRoute.setParamMap{ id: 99999 }
    createComponent(
  })

  it('should try to navigate back to hero list', () => {
    expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called'
    expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called'
  }
}

content_copydescribe('when navigate with no hero id', () => {
  beforeEach(async( createComponent )

  it('should have hero.id === 0', () => {
    expect(component.hero.id).toBe(0
  }

  it('should display empty hero name', () => {
    expect(page.nameDisplay.textContent).toBe(''
  }
}

content_copy<app-banner></app-banner>
<app-welcome></app-welcome>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

content_copy@Component{selector: 'app-banner', template: ''})
class BannerStubComponent {}

@Component{selector: 'router-outlet', template: ''})
class RouterOutletStubComponent { }

@Component{selector: 'app-welcome', template: ''})
class WelcomeStubComponent {}

content_copyTestBed.configureTestingModule{
  declarations: [
    AppComponent,
    RouterLinkDirectiveStub,
    BannerStubComponent,
    RouterOutletStubComponent,
    WelcomeStubComponent
  ]
})

content_copyTestBed.configureTestingModule{
  declarations: [
    AppComponent,
    RouterLinkDirectiveStub
  ],
  schemas: [ NO_ERRORS_SCHEMA ]
})

content_copyTestBed.configureTestingModule{
  declarations: [
    AppComponent,
    BannerStubComponent,
    RouterLinkDirectiveStub
  ],
  schemas: [ NO_ERRORS_SCHEMA ]
})

content_copy@Directive{
  selector: '[routerLink]',
  host: { '(click)': 'onClick()' }
})
export class RouterLinkDirectiveStub {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  onClick() {
    this.navigatedTo = this.linkParams;
  }
}

content_copybeforeEach(() => {
  fixture.detectChanges( // trigger initial data binding

  // find DebugElements with an attached RouterLinkStubDirective
  linkDes = fixture.debugElement
    .queryAll(By.directive(RouterLinkDirectiveStub)

  // get attached link directive instances
  // using each DebugElement's injector
  routerLinks = linkDes.map(de => de.injector.get(RouterLinkDirectiveStub)
}

content_copy<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
  <a routerLink="/about">About</a>
</nav>

content_copyit('can get RouterLinks from template', () => {
  expect(routerLinks.length).toBe(3, 'should have 3 routerLinks'
  expect(routerLinks[0].linkParams).toBe('/dashboard'
  expect(routerLinks[1].linkParams).toBe('/heroes'
  expect(routerLinks[2].linkParams).toBe('/about'
}

it('can click Heroes link in template', () => {
  const heroesLinkDe = linkDes[1];   // heroes link DebugElement
  const heroesLink = routerLinks[1]; // heroes link directive

  expect(heroesLink.navigatedTo).toBeNull('should not have navigated yet'

  heroesLinkDe.triggerEventHandler('click', null
  fixture.detectChanges(

  expect(heroesLink.navigatedTo).toBe('/heroes'
}

content_copy<div *ngIf="hero">
  <h2><span>{{hero.name | titlecase}}</span> Details</h2>
  <div>
    <label>id: </label>{{hero.id}}</div>
  <div>
    <label for="name">name: </label>
    <input id="name" [(ngModel)]="hero.name" placeholder="name" />
  </div>
  <button (click)="save()">Save</button>
  <button (click)="cancel()">Cancel</button>
</div>

content_copyclass Page {
  // getter properties wait to query the DOM until called.
  get buttons()     { return this.queryAll<HTMLButtonElement>('button' }
  get saveBtn()     { return this.buttons[0]; }
  get cancelBtn()   { return this.buttons[1]; }
  get nameDisplay() { return this.query<HTMLElement>('span' }
  get nameInput()   { return this.query<HTMLInputElement>('input' }

  gotoListSpy: jasmine.Spy;
  navigateSpy:  jasmine.Spy;

  constructor(fixture: ComponentFixture<HeroDetailComponent>) {
    // get the navigate spy from the injected router spy object
    const routerSpy = <any> fixture.debugElement.injector.get(Router
    this.navigateSpy = routerSpy.navigate;

    // spy on component's `gotoList()` method
    const component = fixture.componentInstance;
    this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough(
  }

  //// query helpers ////
  private query<T>(selector: string): T {
    return fixture.nativeElement.querySelector(selector
  }

  private queryAll<T>(selector: string): T[] {
    return fixture.nativeElement.querySelectorAll(selector
  }
}

content_copy/** Create the HeroDetailComponent, initialize it, set test variables  */
function createComponent() {
  fixture = TestBed.createComponent(HeroDetailComponent
  component = fixture.componentInstance;
  page = new Page(fixture

  // 1st change detection triggers ngOnInit which gets a hero
  fixture.detectChanges(
  return fixture.whenStable().then(() => {
    // 2nd change detection displays the async-fetched hero
    fixture.detectChanges(
  }
}

content_copyit('should display that hero\'s name', () => {
  expect(page.nameDisplay.textContent).toBe(expectedHero.name
}

it('should navigate when click cancel', () => {
  click(page.cancelBtn
  expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called'
}

it('should save when click save but not navigate immediately', () => {
  // Get service injected into component and spy on its`saveHero` method.
  // It delegates to fake `HeroService.updateHero` which delivers a safe test result.
  const hds = fixture.debugElement.injector.get(HeroDetailService
  const saveSpy = spyOn(hds, 'saveHero').and.callThrough(

  click(page.saveBtn
  expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called'
  expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called'
}

it('should navigate when click save and save resolves', fakeAsync(() => {
  click(page.saveBtn
  tick( // wait for async save to complete
  expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called'
})

it('should convert hero name to Title Case', () => {
  // get the name's input and display elements from the DOM
  const hostElement = fixture.nativeElement;
  const nameInput: HTMLInputElement = hostElement.querySelector('input'
  const nameDisplay: HTMLElement = hostElement.querySelector('span'

  // simulate user entering a new name into the input box
  nameInput.value = 'quick BROWN  fOx';

  // dispatch a DOM event so that Angular learns of input value change.
  nameInput.dispatchEvent(newEvent('input')

  // Tell Angular to update the display binding through the title pipe
  fixture.detectChanges(

  expect(nameDisplay.textContent).toBe('Quick Brown  Fox'
}

content_copyError: This test module uses the component BannerComponent 
which is using a "templateUrl" or "styleUrls", but they were never compiled. 
Please call "TestBed.compileComponents" before your test.

content_copyimport { Component } from '@angular/core';

@Component{
  selector: 'app-banner',
  templateUrl: './banner-external.component.html',
  styleUrls:  ['./banner-external.component.css']
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}

content_copybeforeEach(() => {
  TestBed.configureTestingModule{
    declarations: [ BannerComponent ],
  }
  fixture = TestBed.createComponent(BannerComponent
}

content_copyError: ViewDestroyedError: Attempt to use a destroyed view

content_copyimport { async, ComponentFixture, TestBed } from '@angular/core/testing';

content_copybeforeEach(async(() => {
  TestBed.configureTestingModule{
    declarations: [ BannerComponent ],
  })
  .compileComponents(  // compile template and css
})

content_copybeforeEach(() => {
  fixture = TestBed.createComponent(BannerComponent
  component = fixture.componentInstance; // BannerComponent test instance
  h1 = fixture.nativeElement.querySelector('h1'
}

content_copybeforeEach(async(() => {
  TestBed.configureTestingModule{
    declarations: [ BannerComponent ],
  })
  .compileComponents()
  .then(() => {
    fixture = TestBed.createComponent(BannerComponent
    component = fixture.componentInstance;
    h1 = fixture.nativeElement.querySelector('h1'
  }
})

content_copyTestBed.configureTestingModule{
  declarations: [ DashboardHeroComponent ]
})

content_copybeforeEach(async(() => {
  const routerSpy = createRouterSpy(

  TestBed.configureTestingModule{
    imports:      [ FormsModule ],
    declarations: [ HeroDetailComponent, TitleCasePipe ],
    providers: [
      { provide: ActivatedRoute, useValue: activatedRoute },
      { provide: HeroService,    useClass: TestHeroService },
      { provide: Router,         useValue: routerSpy},
    ]
  })
  .compileComponents(
})

content_copybeforeEach(async(() => {
  const routerSpy = createRouterSpy(

  TestBed.configureTestingModule{
    imports:      [ SharedModule ],
    declarations: [ HeroDetailComponent ],
    providers: [
      { provide: ActivatedRoute, useValue: activatedRoute },
      { provide: HeroService,    useClass: TestHeroService },
      { provide: Router,         useValue: routerSpy},
    ]
  })
  .compileComponents(
})

content_copybeforeEach(async(() => {
  const routerSpy = createRouterSpy(

  TestBed.configureTestingModule{
    imports:   [ HeroModule ],
    providers: [
      { provide: ActivatedRoute, useValue: activatedRoute },
      { provide: HeroService,    useClass: TestHeroService },
      { provide: Router,         useValue: routerSpy},
    ]
  })
  .compileComponents(
})

content_copy@Component{
  selector:    'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls:  ['./hero-detail.component.css' ],
  providers:  [ HeroDetailService ]
})
export class HeroDetailComponent implements OnInit {
  constructor(
    private heroDetailService: HeroDetailService,
    private route:  ActivatedRoute,
    private router: Router) {
  }
}

content_copy@Injectable()
export class HeroDetailService {
  constructor(private heroService: HeroService) {  }
/* . . . */
}

content_copybeforeEach(async(() => {
  const routerSpy = createRouterSpy(

  TestBed.configureTestingModule{
    imports:   [ HeroModule ],
    providers: [
      { provide: ActivatedRoute, useValue: activatedRoute },
      { provide: Router,         useValue: routerSpy},
    ]
  })

  // Override component's own provider
  .overrideComponent(HeroDetailComponent, {
    set: {
      providers: [
        { provide: HeroDetailService, useClass: HeroDetailServiceSpy }
      ]
    }
  })

  .compileComponents(
})

content_copy.overrideComponent(HeroDetailComponent, {
  set: {
    providers: [
      { provide: HeroDetailService, useClass: HeroDetailServiceSpy }
    ]
  }
})

content_copytype MetadataOverride = {
    add?: Partial;
    remove?: Partial;
    set?: Partial;
  };

content_copyselector?: string;
template?: string;
templateUrl?: string;
providers?: any[];
...

content_copyclass HeroDetailServiceSpy {
  testHero: Hero = {id: 42, name: 'Test Hero' };

  /* emit cloned test hero */
  getHero = jasmine.createSpy('getHero').and.callFake(
    () => asyncData(Object.assign{}, this.testHero))
  

  /* emit clone of test hero, with changes merged in */
  saveHero = jasmine.createSpy('saveHero').and.callFake(
    (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
  
}

content_copylet hdsSpy: HeroDetailServiceSpy;

beforeEach(async(() => {
  createComponent(
  // get the component's injected HeroDetailServiceSpy
  hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
})

it('should have called `getHero`', () => {
  expect(hdsSpy.getHero.calls.count()).toBe(1, 'getHero called once'
}

it('should display stub hero\'s name', () => {
  expect(page.nameDisplay.textContent).toBe(hdsSpy.testHero.name
}

it('should save stub hero change', fakeAsync(() => {
  const origName = hdsSpy.testHero.name;
  const newName = 'New Name';

  page.nameInput.value = newName;
  page.nameInput.dispatchEvent(newEvent('input') // tell Angular

  expect(component.hero.name).toBe(newName, 'component hero has new name'
  expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save'

  click(page.saveBtn
  expect(hdsSpy.saveHero.calls.count()).toBe(1, 'saveHero called once'

  tick( // wait for async save to complete
  expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save'
  expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called'
})

content_copyimport { Directive, ElementRef, Input, OnChanges } from '@angular/core';

@Directive{ selector: '[highlight]' })
/** Set backgroundColor for the attached element to highlight color
 *  and set the element's customProperty to true */
export class HighlightDirective implements OnChanges {

  defaultColor =  'rgb(211, 211, 211)'; // lightgray

  @Input('highlight') bgColor: string;

  constructor(private el: ElementRef) {
    el.nativeElement.style.customProperty = true;
  }

  ngOnChanges() {
    this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
  }
}

content_copyimport { Component } from '@angular/core';
@Component{
  template: `
  <h2 highlight="skyblue">About</h2>
  <h3>Quote of the day:</h3>
  <twain-quote></twain-quote>
  `
})
export class AboutComponent { }

content_copybeforeEach(() => {
  fixture = TestBed.configureTestingModule{
    declarations: [ AboutComponent, HighlightDirective],
    schemas:      [ NO_ERRORS_SCHEMA ]
  })
  .createComponent(AboutComponent
  fixture.detectChanges( // initial binding
}

it('should have skyblue <h2>', () => {
  const h2: HTMLElement = fixture.nativeElement.querySelector('h2'
  const bgColor = h2.style.backgroundColor;
  expect(bgColor).toBe('skyblue'
}

content_copy@Component{
  template: `
  <h2 highlight="yellow">Something Yellow</h2>
  <h2 highlight>The Default (Gray)</h2>
  <h2>No Highlight</h2>
  <input #box [highlight]="box.value" value="cyan"/>`
})
class TestComponent { }

content_copybeforeEach(() => {  fixture = TestBed.configureTestingModule{    declarations: [ HighlightDirective, TestComponent ]  })  .createComponent(TestComponent   fixture.detectChanges( // initial binding   // all elements with an attached HighlightDirective  des = fixture.debugElement.queryAll(By.directive(HighlightDirective)   // the h2 without the HighlightDirective  bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])')} // color testsit('should have three highlighted elements', () => {  expect(des.length).toBe(3} it('should color 1st <h2> background "yellow"', () => {  const bgColor = des[0].nativeElement.style.backgroundColor;  expect(bgColor).toBe('yellow'} it('should color 2nd <h2> background w/ default color', () => {  const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;  const bgColor = des[1].nativeElement.style.backgroundColor;  expect(bgColor).toBe(dir.defaultColor} it('should bind <input> background to value color', () => {  // easier to work with nativeElement  const input = des[2].nativeElement as HTMLInputElement;  expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor'   // dispatch a DOM event so that Angular responds to the input value change.  input.value = 'green';  input.dispatchEvent(newEvent('input')  fixture.detectChanges(   expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor'}  it('bare <h2> should not have a customProperty', () => {  expect(bareH2.properties['customProperty']).toBeUndefined(}

content_copyimport { Pipe, PipeTransform } from '@angular/core';

@Pipe{name: 'titlecase', pure: true})
/** Transform to Title Case: uppercase the first letter of the words in a string.*/
export class TitleCasePipe implements PipeTransform {
  transform(input: string): string {
    return input.length === 0 ? '' :
      input.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase() )
  }
}

content_copydescribe('TitleCasePipe', () => {  // This pipe is a pure, stateless function so no need for BeforeEach  let pipe = new TitleCasePipe(   it('transforms "abc" to "Abc"', () => {    expect(pipe.transform('abc')).toBe('Abc'  }   it('transforms "abc def" to "Abc Def"', () => {    expect(pipe.transform('abc def')).toBe('Abc Def'  }   // ... more tests ...}

content_copyit('should convert hero name to Title Case', () => {  // get the name's input and display elements from the DOM  const hostElement = fixture.nativeElement;  const nameInput: HTMLInputElement = hostElement.querySelector('input'  const nameDisplay: HTMLElement = hostElement.querySelector('span'   // simulate user entering a new name into the input box  nameInput.value = 'quick BROWN  fOx';   // dispatch a DOM event so that Angular learns of input value change.  nameInput.dispatchEvent(newEvent('input')   // Tell Angular to update the display binding through the title pipe  fixture.detectChanges(   expect(nameDisplay.textContent).toBe('Quick Brown  Fox'}

content_copytype TestModuleMetadata = {
  providers?: any[];
  declarations?: any[];
  imports?: any[];
  schemas?: Array<SchemaMetadata | any[]>;
};

content_copytype MetadataOverride = {
    add?: Partial;
    remove?: Partial;
    set?: Partial;
  };

content_copy// Filter for DebugElements with a #content reference
const contentRefs = el.queryAll( de => de.references['content']

content_copy// Can find DebugElement either by css selector or by directive
const h2        = fixture.debugElement.query(By.css('h2')
const directive = fixture.debugElement.query(By.directive(HighlightDirective)