W jaki sposób mogę testować komponenty, które zależą od routera RC3?

Question

Próbuję uzyskać testy jednostkowe, które działały z RC1 pracującym z "nowym nowym" routerem. Jak mogę to osiągnąć na 3.0.0-alpha.8?

Moi zależności:

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

---

Komponent że chciałbym przetestować że używa dyrektywę 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> 

---

Wcześniej z RC1, używałem coś takiego zespołu, przetestować komponent:

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

Kiedy staram się po prostu przełączyć routerLink importu z @angular/router-deprecated do importowania ROUTER_DIRECTIVES z @angular/router, otrzymuję błąd:

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

Wszystkie dokumenty można znaleźć w Internecie na temat testowania „nowy” nowy router i createPlatform wiadomość odnosi się do zapewnienia ROUTER_FAKE_PROVIDERS które pojawiają s, które należy uwzględnić w RC2, ale już z RC3:

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

przeszukując zestawionych .d.ts plików w node_modules/@angular/router folderu, ja również nie znaleźliśmy żadnych odniesień do testów/kpi/podróbki.

Czy ktoś przeprowadził migrację do programu rc3 i uzyskał już tę funkcję?

Answer 1

Aby przetestować router RC3 (3.0.0-alpha. *), Należy zrobić kilka rzeczy inaczej niż konfiguracja routera w poprzednich wersjach.

Trzeba zdefiniować RouterConfig takiego:

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

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

export const APP_ROUTE_PROVIDERS = [ 
    provideRouter(APP_ROUTES) 
]; 

Następnie w pliku testowego

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

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

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

describe(){ 
    // etc 
} 

Router jest sprawdzalne.

dla 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 
}