javascript - route - Angular 2-componente de prueba con salida de enrutador

router events angular 6

Question

He creado el proyecto angular 2 con angular-cli. Creé un AppRoutingModule separado que exporta RouterModule y se agrega a la matriz de importaciones de AppModule.

También tengo appComponent creado por 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);
  });
});

Cuando intento ejecutar pruebas con ng test tengo un error:

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

¿Echo de menos algo para importar en la prueba?

Answer 1

Para su información, el TestBed se utiliza para crear un módulo desde cero para el entorno de prueba. Así que el AppModule no te da ninguna ayuda.

Sin embargo, en su caso, si no desea probar ningún enrutamiento, puede ignorar este error utilizando NO_ERRORS_SCHEMA lugar de CUSTOM_ELEMENTS_SCHEMA . El último evitará los errores relacionados con los elementos HTML, pero el primero ignorará todos los errores, incluidos los atributos de enlace desconocidos.

Si realmente desea hacer algunas pruebas en algunas cosas de enrutamiento, entonces necesita configurar algo de enrutamiento. Puede hacerlo con el RouterTestingModule , que es un reemplazo para el RouterModule . En lugar de publicar un ejemplo arbitrario, puede encontrar algunos buenos en los siguientes enlaces

• Componentes de prueba de unidad angular 2 con routerLink
• Prueba de unidad de enrutador de liberación final angular 2

Answer 2

<router-outlet> es un componente de Angular2 +, por lo que debe reconocerse.

Por lo tanto, necesita RouterTestingModule para probar la ruta; de lo contrario, obtendrá el error, impórtelo desde el router / testing como este en sus especificaciones:

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

y luego usarlo en la sección de import[] como esta:

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

    }).compileComponents();
  }));