web-dev-qa-db-fra.com

Angular 2 - composant de test avec routeur-prise

J'ai créé un projet angular 2 avec angular-cli. J'ai créé un AppRoutingModule distinct qui exporte RouterModule et est ajouté au tableau d'importation AppModule.

J'ai également appComponent créé par angular-cli.

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

Lorsque j'essaie d'exécuter des tests avec ng test, j'ai une erreur:

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

Est-ce que je manque quelque chose à importer dans le test?

javascriptangulartestingangular2-routingkarma-runner
19
Mossar

Pour info, le TestBed est utilisé pour créer un module à partir de zéro pour l'environnement de test. Le AppModule ne vous aide donc pas.

Dans votre cas, cependant, si vous ne voulez tester aucun routage, vous pouvez ignorer cette erreur en utilisant le NO_ERRORS_SCHEMA à la place du CUSTOM_ELEMENTS_SCHEMA. Ce dernier évitera les erreurs liées aux éléments HTML, mais le premier ignorera toutes les erreurs, y compris les attributs de liaison inconnus.

Si vous voulez réellement faire des tests sur des trucs de routage, vous devez configurer un routage. Vous pouvez le faire avec le RouterTestingModule, qui remplace le RouterModule. Plutôt que de publier des exemples arbitraires, vous pouvez en trouver de bons dans les liens suivants

21
Paul Samsotha

<router-outlet> est un composant d'Angular2 +, il doit donc être reconnu.

Vous avez donc besoin de RouterTestingModule pour tester la route, sinon, vous obtenez l'erreur, importez-la depuis le routeur/testing comme ceci dans vos spécifications:

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


puis utilisez-le dans import[] section comme celle-ci:

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

    }).compileComponents();
  }));
30
Alireza