// #docplaster import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; // #docregion setup-schemas import { NO_ERRORS_SCHEMA } from '@angular/core'; // #enddocregion setup-schemas // #docregion setup-stubs-w-imports import { Component } from '@angular/core'; // #docregion setup-schemas import { AppComponent } from './app.component'; // #enddocregion setup-schemas import { BannerComponent } from './banner.component'; import { RouterLinkStubDirective } from '../testing'; // #docregion setup-schemas import { RouterOutletStubComponent } from '../testing'; // #enddocregion setup-schemas @Component({selector: 'app-welcome', template: ''}) class WelcomeStubComponent {} // #enddocregion setup-stubs-w-imports let comp: AppComponent; let fixture: ComponentFixture; describe('AppComponent & TestModule', () => { // #docregion setup-stubs, setup-stubs-w-imports beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent, BannerComponent, WelcomeStubComponent, RouterLinkStubDirective, RouterOutletStubComponent ] }) .compileComponents() .then(() => { fixture = TestBed.createComponent(AppComponent); comp = fixture.componentInstance; }); })); // #enddocregion setup-stubs, setup-stubs-w-imports tests(); }); //////// Testing w/ NO_ERRORS_SCHEMA ////// describe('AppComponent & NO_ERRORS_SCHEMA', () => { // #docregion setup-schemas beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent, RouterLinkStubDirective ], schemas: [ NO_ERRORS_SCHEMA ] }) .compileComponents() .then(() => { fixture = TestBed.createComponent(AppComponent); comp = fixture.componentInstance; }); })); // #enddocregion setup-schemas tests(); }); //////// Testing w/ real root module ////// // Tricky because we are disabling the router and its configuration // Better to use RouterTestingModule import { AppModule } from './app.module'; import { AppRoutingModule } from './app-routing.module'; describe('AppComponent & AppModule', () => { beforeEach( async(() => { TestBed.configureTestingModule({ imports: [ AppModule ] }) // Get rid of app's Router configuration otherwise many failures. // Doing so removes Router declarations; add the Router stubs .overrideModule(AppModule, { remove: { imports: [ AppRoutingModule ] }, add: { declarations: [ RouterLinkStubDirective, RouterOutletStubComponent ] } }) .compileComponents() .then(() => { fixture = TestBed.createComponent(AppComponent); comp = fixture.componentInstance; }); })); tests(); }); function tests() { let links: RouterLinkStubDirective[]; let linkDes: DebugElement[]; // #docregion test-setup beforeEach(() => { // trigger initial data binding fixture.detectChanges(); // find DebugElements with an attached RouterLinkStubDirective linkDes = fixture.debugElement .queryAll(By.directive(RouterLinkStubDirective)); // get the attached link directive instances using the DebugElement injectors links = linkDes .map(de => de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective); }); // #enddocregion test-setup it('can instantiate it', () => { expect(comp).not.toBeNull(); }); // #docregion tests it('can get RouterLinks from template', () => { expect(links.length).toBe(3, 'should have 3 links'); expect(links[0].linkParams).toBe('/dashboard', '1st link should go to Dashboard'); expect(links[1].linkParams).toBe('/heroes', '1st link should go to Heroes'); }); it('can click Heroes link in template', () => { const heroesLinkDe = linkDes[1]; const heroesLink = links[1]; expect(heroesLink.navigatedTo).toBeNull('link should not have navigated yet'); heroesLinkDe.triggerEventHandler('click', null); fixture.detectChanges(); expect(heroesLink.navigatedTo).toBe('/heroes'); }); // #docregion tests }