2016-07-01 18 views
9

Sto cercando di ottenere i test unitari che hanno funzionato con RC1 lavorando con il "nuovo nuovo" router. Come posso ottenere questo su 3.0.0-alpha.8?Come posso unità componenti di test che dipendono dal router RC3?

mie dipendenze:

"@angular/common": "2.0.0-rc.3", 
"@angular/compiler": "2.0.0-rc.3", 
"@angular/core": "2.0.0-rc.3", 
"@angular/forms": "0.2.0", 
"@angular/platform-browser": "2.0.0-rc.3", 
"@angular/platform-browser-dynamic": "2.0.0-rc.3", 
"@angular/router": "3.0.0-beta.2", 

La componente che vorrei provare che utilizza la direttiva routerLink:

import {ROUTER_DIRECTIVES} from '@angular/router'; 
@Component({ 
    selector: 'app-topmenu', 
    template: require('./app-topmenu.tpl.html'), 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class TopMenu { 
<nav class="app-top-menu"> 
    <a *ngFor="let link of links" [routerLink]="link.route">{{link.text}}</a> 
</nav> 

.210

In precedenza, con rc1, stavo usando qualcosa di simile per unità di testare la mia componente:

import {Location} from '@angular/common'; 
import {SpyLocation} from '@angular/common/testing'; 
import {Router, RouteRegistry, ROUTER_DIRECTIVES, ROUTER_PRIMARY_COMPONENT} from '@angular/router-deprecated'; 
import {RootRouter} from '@angular/router-deprecated/src/router'; 

describe('Router link capabilities',() => { 
    beforeEachProviders(() => [ 
     RouteRegistry, 
     { provide: Location, useClass: SpyLocation }, 
     { provide: ROUTER_PRIMARY_COMPONENT, useValue: TestComponent }, 
     { provide: Router, useClass: RootRouter } 
    ]); 

    it('creates routerLinks with the expected URLs', fakeAsync(
     inject([TestComponentBuilder, Location], (tcb: TestComponentBuilder, spyLocation: SpyLocation) => { 
      tcb.overrideTemplate(TestComponent, ` 
       <app-top-menu [links]='[ 
        { text: "A", route: ["/TestA/TestB/TestC"] }, 
        { text: "B", route: ["/TestA", "TestB", "TestC"] } 
       ]'></app-top-menu> 
       <router-outlet></router-outlet> 
      `).createAsync(TestComponent) 
      .then((fixture: ComponentFixture<TestComponent>) => { 
       fixture.detectChanges(); 
       spyLocation.simulateUrlPop('url-a/url-b/url-c'); 
       tick(); 
       fixture.detectChanges(); 
       let nativeLinks: HTMLAnchorElement[] = fixture.nativeElement.querySelectorAll('a'); 

       expect(nativeLinks.length).toBe(2); 
       expect(nativeLinks[0].textContent).toBe('A'); 
       expect(nativeLinks[1].textContent).toBe('B'); 
      }); 
     }) 
    )); 
}); 

Quando provo a passare solo i routerLink importazioni da @angular/router-deprecated a importare ROUTER_DIRECTIVES da @angular/router, ricevo un errore:

ORIGINAL EXCEPTION: Platforms have to be created via `createPlatform`! 

Tutta la documentazione è possibile trovare on-line sul test della "nuova nuova" router e il createPlatform messaggio si riferisce a fornire ROUTER_FAKE_PROVIDERS che appaiono s da inserire nel RC2, ma andato con RC3:

import {ROUTER_FAKE_PROVIDERS} from '@angular/router/testing'; 
//^[ts] Cannot find module '@angular/router/testing'. 

La ricerca attraverso i .d.ts file compilati nella cartella node_modules/@angular/router, ho anche non trovo alcun riferimento a test/prende in giro/falsi.

Qualcuno ha effettuato la migrazione a rc3 e ha funzionato?

+1

dare uno sguardo su questi test https://github.com/angular/angular/blob/master/modules/%40angular/router/test/router.spec.ts – AngJobs

risposta

3

Per testare il router RC3 (3.0.0-alpha. *), È necessario fare un paio di cose in modo diverso da come il router è stato impostato nelle versioni precedenti.

è necessario definire un RouterConfig come questo:

import {provideRouter, RouterConfig} from '@angular/router'; 

export const APP_ROUTES : RouterConfig = [ 
    {path: '', component: AppComponent}, 
    // more paths 
]; 

export const APP_ROUTE_PROVIDERS = [ 
    provideRouter(APP_ROUTES) 
]; 

poi nel file di test

import {ActivatedRoute, RouterConfig, Router} from '@angular/router'; 

class MockRouter { createUrlTree() {} } 
class MockActivatedRoute { } 

beforeEachProviders(() => [ 
    provide(Router, { useClass: MockRouter }), 
    provide(ActivatedRoute, { useClass: MockActivatedRoute }), 
]); 

describe(){ 
    // etc 
} 

Il router è ora testabile.

per RC4:

import {ActivatedRoute, RouterConfig, Router} from '@angular/router'; 

class MockRouter { createUrlTree() {} } 
class MockActivatedRoute { } 



describe(){ 
    beforeEach(() => [ 
     addProviders([ 
      provide(Router, { useClass: MockRouter }), 
      provide(ActivatedRoute, { useClass: MockActivatedRoute }), 
     ]); 
    ]); 
    //etc 
} 
+0

Ma questo non mi permette di testare un componente che dipende dalla reale funzionalità 'routerLink', vero? Non voglio testare il router, voglio testare un componente che utilizza il router. Si prega di consultare il secondo paragrafo (ora in grassetto). Questo era possibile con 'SpyLocation' e' MockLocationStrategy' prima, ma 'MockLocationStrategy' non è stato esportato in rc4. –

+0

Quindi vuoi testare che quando si fa clic su un link, si passa alla pagina corretta? In tal caso, è possibile utilizzare il metodo 'isCurrentPathEqualTo (path: string, query: string = ''): boolean' di SpyLocation. Simula un link click con JS e poi usa l'aspettativa con questo metodo. Credo che tu abbia ragione nel ritenere che questo non funzionerà.Nel lavoro, abbiamo un wrapper attorno al router che memorizza i percorsi a cui abbiamo navigato, quindi testiamo quel registro di rotta. – Colum

+1

Come si deriderebbe i parametri del percorso con 'ActivatedRoute'? – Aarmora

Problemi correlati