Angular 2 - Testkomponente mit Router-Ausgang

Question

Ich habe eckig 2 Projekt mit eckigen-Cli erstellt. Ich habe ein separates AppRoutingModule erstellt, das RouterModule exportiert und zum Import-Array von AppModule hinzugefügt wird.

Ich habe auch AppComponent von Angle-CLI erstellt.

app.component.html

<nav> 
    <a *ngFor="let view of views" routerLink="{{ view.address }}" routerLinkActive="active">{{ view.text }}</a> 
</nav> 
<router-outlet></router-outlet> 

app.component.spec.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { TestBed, async } from '@angular/core/testing'; 
import { AppComponent } from './app.component'; 


describe('App: AquaparkFrontend',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     AppComponent 
     ], 
     schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
    }); 
    }); 

    it('should create the app', async(() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    let app = fixture.debugElement.componentInstance; 
    expect(app).toBeTruthy(); 
    })); 

    it(`should have 3 views`,() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    let app = fixture.debugElement.componentInstance; 
    expect(app.views.length).toEqual(3); 
    }); 
}); 

Wenn ich versuche, Tests mit ng Test auszuführen Ich habe Fehler:

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<nav> 
     <a *ngFor="let view of views" [ERROR ->]routerLink="{{ view.address }}" routerLinkActive="active">{{ view.text }}</a> 
    </nav> 
    <router-outlet><" 

Vermisse ich etwas im Test zu importieren?

Answer 1

FYI, Die TestBed wird verwendet, um ein Modul von Grund auf für die Testumgebung zu erstellen. Also die AppModule gibt Ihnen keine Hilfe.

In Ihrem Fall, wenn Sie überhaupt kein Routing testen möchten, können Sie diesen Fehler ignorieren, indem Sie NO_ERRORS_SCHEMA anstelle von CUSTOM_ELEMENTS_SCHEMA verwenden. Letzteres wird Fehler im Zusammenhang mit HTML-Elementen vermeiden, aber erstere ignoriert alle Fehler, einschließlich unbekannter Bindungsattribute.

Wenn Sie tatsächlich einige Tests auf einigen Routing-Aufgaben durchführen möchten, dann müssen Sie einige Routing konfigurieren. Sie können das mit der RouterTestingModule tun, die ein Ersatz für die RouterModule ist. Anstatt etwas willkürliches Beispiel veröffentlichen, können Sie einige gute in den folgenden Links

• Angular 2 unit testing components with routerLink
• Angular 2 Final Release Router Unit Test

Answer 2

<router-outlet> ist eine Komponente in Angular2 + finden, so müssen erkannt werden.

So müssen Sie RouterTestingModule die Strecke zu testen, sonst, können Sie die Fehlermeldung erhalten, importieren Sie sie von Router/Prüfung wie dies in der Spec:

import { RouterTestingModule } from '@angular/router/testing'; 

und es dann so in import[] Abschnitt verwenden :

describe('AppComponent',() => { 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports:[ 
     RouterTestingModule //<<< import it here also 
     ], 
     declarations: [ 
     AppComponent 
     ], 
     providers: [{ provide: APP_BASE_HREF, useValue: '/' }] 

    }).compileComponents(); 
    }));