Komponententest in angular2, Abhängigkeitsinjektion

Question

Beginnend mit angular 2 nach dem Zeitaufwand mit eckigen 1. Nicht Einheit getestet, wie es ist eher eine Seite Projekt Sache, ich versuche zumindest starten OK ... I Begann mit dem Beispiel von AngularClass, wenn das einen Unterschied macht.

Kämpfen in app.component.ts bereits, die meine Navigationsbits enthält. Relevante Bits der Vorlage hier:

<nav class="navbar navbar-light bg-faded"> 
    <div class="container"> 
    <div class="nav navbar-nav"> 
     <a class="navbar-brand" [routerLink]=" ['./'] ">Navbar</a> 
     <loading class="nav-item nav-link pull-xs-right" [visible]="user === null"></loading> 
    </div> 
</div> 
</nav> 

<div class="container"> 
    <main> 
    <router-outlet></router-outlet> 
</main> 
</div> 

<footer> 
    <hr> 
    <div class="container"> 

</div> 
</footer> 

Komponente selbst enthält nicht viel:

import { Component, ViewEncapsulation } from '@angular/core'; 
import { AuthService } from './_services'; 
import { User } from './_models'; 
import { Loading } from './_components'; 

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    template: require('./app.component.html'), 
    styles: [ 
     require('./app.style.css') 
    ] 
}) 
export class App { 
    user: User; 

    constructor(private auth: AuthService) { 

    } 

    ngOnInit() { 
     this.auth.getUser().subscribe(user => this.user = user); 
    } 
} 

Alle Module, Komponenten und Routen sind Bootstrap über den App-Modul. Kann bei Bedarf posten.

Der Test, den ich dafür schreiben muss, hat mich im Grunde genommen alles vom Router (so scheint es). Erstens, [routerLink] is not a native attribute of 'a'. Ok, ich repariere es. Dann:

Error in ./App class App - inline template:3:6 caused by: No provider for Router! 

Also, ich up-Router anschließen, nur zu finden:

Error in ./App class App - inline template:3:6 caused by: No provider for ActivatedRoute! 

Was ich hinzugefügt, um herauszufinden, dass:

Error in ./App class App - inline template:3:6 caused by: No provider for LocationStrategy! 

Inzwischen der Test aussieht :

import { inject, TestBed, async } from '@angular/core/testing'; 
import { AuthService } from './_services'; 
import { Router, RouterModule, ActivatedRoute } from '@angular/router'; 
import { AppModule } from './app.module'; 

// Load the implementations that should be tested 
import { App } from './app.component'; 
import { Loading } from './_components'; 

describe('App',() => { 
    // provide our implementations or mocks to the dependency injector 
    beforeEach(() => TestBed.configureTestingModule({ 
     declarations: [App, Loading], 
     imports: [RouterModule], 
     providers: [ 
      { 
       provide: Router, 
       useClass: class { 
        navigate = jasmine.createSpy("navigate"); 
       } 
      }, { 
       provide: AuthService, 
       useClass: class { 
        getAccount = jasmine.createSpy("getAccount"); 
        isLoggedIn = jasmine.createSpy("isLoggedIn"); 
       } 
      }, { 
       provide: ActivatedRoute, 
       useClass: class { } 
      } 
     ] 
    })); 

    it('should exist', async(() => { 

     TestBed.compileComponents().then(() => { 
      const fixture = TestBed.createComponent(App); 

      // Access the dependency injected component instance 
      const controller = fixture.componentInstance; 

      expect(!!controller).toBe(true); 
     }); 
    })); 
}); 

Ich verspotte schon die Eingaben, thi Das scheint mir falsch zu sein. Fehle ich etwas? Gibt es eine klügere Möglichkeit, die gesamte App auf einen Test zu laden, anstatt die ganze Zeit in jeder einzelnen Abhängigkeit zu verschachteln?

Answer 1

Zum Testen sollten Sie die RouterTestingModule anstelle der RouterModule verwenden. Wenn Sie Routen hinzufügen möchten, können Sie verwenden withRoutes

imports: [ 
    RouterTestingModule.withRoutes(Routes) // same any normal route config 
] 

Siehe auch

• Angular 2 unit testing components with routerLink
• Second half of this post für eine Idee von Mock der ActivatedRoute. Manchmal möchten Sie nicht die gesamte Routing-Funktion beim Komponententest. Sie können nur die Route verspotten.