Componenti di prova angolari a 2 unità con routerLink

Sto provando a testare il mio componente con angular 2 final, ma ottengo un errore perché il componente usa la direttiva routerLink . Ottengo il seguente errore:

Imansible eseguire il binding a “routerLink” poiché non è una proprietà nota di “a”.

Questo è il codice rilevante del modello ListComponent

  

Ed ecco il mio test.

 import { TestBed } from '@angular/core/testing'; import { ListComponent } from './list.component'; import { defaultData, collectionName } from '../../config'; import { initialState } from '../../reducers/reducer'; const data = { sort: initialState.sort, list: [defaultData, defaultData], }; describe(`${collectionName} ListComponent`, () => { let fixture; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ ListComponent, ], }).compileComponents(); // compile template and css; fixture = TestBed.createComponent(ListComponent); fixture.componentInstance.data = data; fixture.detectChanges(); }); it('should render 2 items in list', () => { const el = fixture.debugElement.nativeElement; expect(el.querySelectorAll('.box').length).toBe(3); }); }); 

Ho esaminato diverse risposte a domande simili ma non ho trovato una soluzione che funzionasse per me.

È necessario configurare tutto il routing. Per il test, invece di utilizzare il RouterModule , è ansible utilizzare il RouterTestingModule da @angular/router/testing RouterTestingModule @angular/router/testing , in cui è ansible impostare alcuni percorsi fittizi. Dovrai anche importare CommonModule da @angular/common CommonModule @angular/common per *ngFor . Di seguito è riportato un test di passaggio completo

 import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { By } from '@angular/platform-browser'; import { Location, CommonModule } from '@angular/common'; import { RouterTestingModule } from '@angular/router/testing'; import { TestBed, inject, async } from '@angular/core/testing'; @Component({ template: ` link  ` }) class TestComponent { collName = 'testing'; item = { _id: 1 }; } @Component({ template: '' }) class DummyComponent { } describe('component: TestComponent', function () { beforeEach(() => { TestBed.configureTestingModule({ imports: [ CommonModule, RouterTestingModule.withRoutes([ { path: 'settings/:collection/edit/:item', component: DummyComponent } ]) ], declarations: [ TestComponent, DummyComponent ] }); }); it('should go to url', async(inject([Router, Location], (router: Router, location: Location) => { let fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); fixture.debugElement.query(By.css('a')).nativeElement.click(); fixture.whenStable().then(() => { expect(location.path()).toEqual('/settings/testing/edit/1'); console.log('after expect'); }); }))); }); 

AGGIORNARE

Un’altra opzione, se vuoi solo verificare che i percorsi siano resi correttamente, senza cercare di navigare …

È sufficiente importare il RouterTestingModule senza configurare alcun percorso

 imports: [ RouterTestingModule ] 

quindi basta controllare che il link sia reso con il percorso URL corretto, es

 let href = fixture.debugElement.query(By.css('a')).nativeElement .getAttribute('href'); expect(href).toEqual('/settings/testing/edit/1'); 

Se non stai testando roba relativa al router, puoi configurare il test per ignorare le direttive sconosciute con ‘NO_ERRORS_SCHEMA’

  import { NO_ERRORS_SCHEMA } from '@angular/core'; TestBed.configureTestingModule({ declarations: [ ListComponent, ], schemas: [ NO_ERRORS_SCHEMA ] }); 

Per scrivere un test case per routerLink . Puoi seguire i seguenti passaggi.

  1. Importa RouterTestingModule e RouterLinkWithHref .

     import { RouterTestingModule } from '@angular/router/testing'; import { RouterLinkWithHref } from '@angular/router'; 
  2. Importa RouterTestingModule nel tuo modulo

     TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([])], declarations: [ TestingComponent ] }) 
  3. Nel caso di test trovare la direttiva RouterLinkWithHref tot test per l’esistenza del collegamento.

     it('should have a link to /', () => { const debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref)); const index = debugElements.findIndex(de => { return de.properties['href'] === '/'; }); expect(index).toBeGreaterThan(-1); });