Yocker
  1. Yocker
  3. Componenti di prova angolari a 2 unità con routerLink
Intereting Posts
Qual è la differenza tra il passaggio per riferimento e il passaggio per valore? Come ottenere il codice di stato della risposta da jQuery.ajax? Come posso montare un Windows Drive in Java? Come conoscere la dimensione della stringa in byte? Come hide tutti gli elementi tranne uno con jquery? Come cambiare layout in Angular2 Importanza di ios_base :: sync_with_stdio (false); cin.tie (NULL); Qual è la differenza tra Int e Integer? Il modo migliore per randomizzare un array con .NET Come rilevare la versione del browser e il sistema operativo utilizzando JavaScript? Transazione di rollback dopo @Test comportamento strano `string.replace` quando si usa il simbolo del dollaro ($) come sostituto Errore Eclipse: “Imansible connettersi alla VM remota” Qual è il primo numero intero che un object IEEE 754 non è in grado di rappresentare esattamente? Come ottenere un elenco di variabili correnti dal modello Jinja 2?

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