695df67929
Rob Wormald recognized that we had no plunker for a simple component test. Inspired improved learning path for testing including: * Add plunkers for both inline and external template versions of the simplest `BannerComponent` * Added the banner-specs for that purpose and also a quickstart-specs in the setup folder * Adjusted prose in testing and setup-systemjs-anatomy to call these out * Moved testing of external template spec earlier in the guide because it is likely to be needed right away. * Add comments on the optional "testing" folder and corrects var names to match * Leaves Jasmine Spec Runner output visible when tests finish
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
// #docplaster
|
|
// #docregion
|
|
// #docregion import-async
|
|
import { async } from '@angular/core/testing';
|
|
// #enddocregion import-async
|
|
// #docregion import-ComponentFixtureAutoDetect
|
|
import { ComponentFixtureAutoDetect } from '@angular/core/testing';
|
|
// #enddocregion import-ComponentFixtureAutoDetect
|
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
import { By } from '@angular/platform-browser';
|
|
import { DebugElement } from '@angular/core';
|
|
|
|
import { BannerComponent } from './banner.component';
|
|
|
|
describe('BannerComponent (AutoChangeDetect)', () => {
|
|
let comp: BannerComponent;
|
|
let fixture: ComponentFixture<BannerComponent>;
|
|
let de: DebugElement;
|
|
let el: HTMLElement;
|
|
|
|
beforeEach(async(() => {
|
|
// #docregion auto-detect
|
|
TestBed.configureTestingModule({
|
|
declarations: [ BannerComponent ],
|
|
providers: [
|
|
{ provide: ComponentFixtureAutoDetect, useValue: true }
|
|
]
|
|
})
|
|
// #enddocregion auto-detect
|
|
.compileComponents();
|
|
}));
|
|
|
|
beforeEach(() => {
|
|
fixture = TestBed.createComponent(BannerComponent);
|
|
comp = fixture.componentInstance;
|
|
de = fixture.debugElement.query(By.css('h1'));
|
|
el = de.nativeElement;
|
|
});
|
|
|
|
// #docregion auto-detect-tests
|
|
it('should display original title', () => {
|
|
// Hooray! No `fixture.detectChanges()` needed
|
|
expect(el.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(el.textContent).toContain(oldTitle);
|
|
});
|
|
|
|
it('should display updated title after detectChanges', () => {
|
|
comp.title = 'Test Title';
|
|
fixture.detectChanges(); // detect changes explicitly
|
|
expect(el.textContent).toContain(comp.title);
|
|
});
|
|
// #enddocregion auto-detect-tests
|
|
});
|