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
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
// #docplaster
|
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
import { By } from '@angular/platform-browser';
|
|
import { DebugElement } from '@angular/core';
|
|
|
|
import { BannerComponent } from './banner.component';
|
|
|
|
describe('BannerComponent (templateUrl)', () => {
|
|
|
|
let comp: BannerComponent;
|
|
let fixture: ComponentFixture<BannerComponent>;
|
|
let de: DebugElement;
|
|
let el: HTMLElement;
|
|
|
|
// #docregion async-before-each
|
|
// async beforeEach
|
|
beforeEach(async(() => {
|
|
TestBed.configureTestingModule({
|
|
declarations: [ BannerComponent ], // declare the test component
|
|
})
|
|
.compileComponents(); // compile template and css
|
|
}));
|
|
// #enddocregion async-before-each
|
|
|
|
// #docregion sync-before-each
|
|
// synchronous beforeEach
|
|
beforeEach(() => {
|
|
fixture = TestBed.createComponent(BannerComponent);
|
|
|
|
comp = fixture.componentInstance; // BannerComponent test instance
|
|
|
|
// query for the title <h1> by CSS element selector
|
|
de = fixture.debugElement.query(By.css('h1'));
|
|
el = de.nativeElement;
|
|
});
|
|
// #enddocregion sync-before-each
|
|
|
|
it('no title in the DOM until manually call `detectChanges`', () => {
|
|
expect(el.textContent).toEqual('');
|
|
});
|
|
|
|
it('should display original title', () => {
|
|
fixture.detectChanges();
|
|
expect(el.textContent).toContain(comp.title);
|
|
});
|
|
|
|
it('should display a different test title', () => {
|
|
comp.title = 'Test Title';
|
|
fixture.detectChanges();
|
|
expect(el.textContent).toContain('Test Title');
|
|
});
|
|
|
|
});
|