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”.
- Oggetti TypeScript come tipi di dizionario come in C #
- Ricevo "Http failure response for (unknown url): 0 Unknown Error" invece del messaggio di errore effettivo in Angular
- Ionic - scheda scroll orizzontale per categorie
- In Typescript, qual è il! (punto esclamativo / botto) operatore durante la dereferenziazione di un membro?
- Nuova syntax es6 per l'importazione di moduli commonjs / amd, ad esempio `import foo = require ('foo')`
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'); }); }))); });
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.
Importa RouterTestingModule
e RouterLinkWithHref
.
import { RouterTestingModule } from '@angular/router/testing'; import { RouterLinkWithHref } from '@angular/router';
Importa RouterTestingModule
nel tuo modulo
TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([])], declarations: [ TestingComponent ] })
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); });