Угловой 2 - тестовый компонент с маршрутизатором-выходом

Question

Я создал угловой проект 2 с угловым кли. Я создал отдельный модуль AppRoutingModule, который экспортирует RouterModule и добавляется в массив импорта AppModule.

У меня также appComponent, созданный угловым кли.

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); 
    }); 
}); 

Когда я пытаюсь запустить тесты с тестовыми нг У меня есть ошибка:

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><" 

Я пропускаю что-то, чтобы импортировать в тест?

Answer 1

FYI, TestBed используется для создания модуля с нуля для тестовой среды. Так что AppModule не дает вам никакой помощи.

В вашем случае, если вы вообще не хотите тестировать какую-либо маршрутизацию, вы можете проигнорировать эту ошибку, используя NO_ERRORS_SCHEMA вместо CUSTOM_ELEMENTS_SCHEMA. Последний избежит ошибок, связанных с элементами HTML, но первый будет игнорировать все ошибки, включая неизвестные атрибуты привязки.

Если вы действительно хотите провести некоторое тестирование некоторых материалов маршрутизации, вам необходимо настроить некоторую маршрутизацию. Вы можете сделать это с помощью RouterTestingModule, который является заменой RouterModule. Вместо того, чтобы разместить некоторый произвольный пример, вы можете найти несколько хороших в следующих ссылок

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

Answer 2

<router-outlet> является компонентом Angular2 +, поэтому должны быть признаны.

Так что вам нужно RouterTestingModule протестировать маршрут, в противном случае, вы получите сообщение об ошибке, импортировать его от маршрутизатора/тестирования, как это в вашей спецификации:

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

, а затем использовать его в import[] разделе, как это :

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

    }).compileComponents(); 
    }));