typescript - ฉันทดสอบหน่วยของคอมโพเนนต์ที่ขึ้นอยู่กับ RC3 router อย่างไรได้บ้าง?

ฉันกำลังพยายามให้การทดสอบหน่วยที่เคยทำงานกับ RC1 ทำงานกับตัว router แบบ "ใหม่ใหม่" ฉันจะทำสิ่งนี้ได้อย่างไรบน 3.0.0-alpha.8?

ความขึ้นต่อของฉัน:

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

ส่วนประกอบ ที่ฉันต้องการทดสอบ ที่ใช้คำสั่ง 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>

ก่อนหน้านี้ กับ rc1 ผมใช้สิ่งแบบนี้ในการทดสอบหน่วยของคอมโพเนนต์ของผม:

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

เมื่อฉันพยายามเพียงแค่เปลี่ยนการนำเข้า routerLink จาก @angular/router-deprecated ไปเป็นการนำเข้า ROUTER_DIRECTIVES จาก @angular/router ฉันได้รับข้อผิดพลาด:

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

เอกสารทั้งหมดที่ฉันสามารถหาทางออนไลน์เกี่ยวกับการทดสอบเราเตอร์ "ใหม่ใหม่" และข้อความ createPlatform อ้างถึงการให้ ROUTER_FAKE_PROVIDERS ซึ่งดูเหมือนจะถูกรวมอยู่ใน rc2 แต่หายไปใน rc3:

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

การค้นหาผ่านไฟล์ .d.ts ที่คอมไพล์แล้วในโฟลเดอร์ node_modules/@angular/router ฉันก็ไม่พบการอ้างอิงใด ๆ เกี่ยวกับการทดสอบ/ม็อก/เทียมเช่นกัน

มีใครย้ายไป rc3 แล้วและทำให้มันใช้งานได้แล้วหรือยัง?

คำตอบ #1

ในการทดสอบเราเตอร์ RC3 (3.0.0-alpha.*) คุณจำเป็นต้องทำบางสิ่งแตกต่างไปจากการตั้งค่าเราเตอร์ในเวอร์ชันก่อนหน้า

คุณจำเป็นต้องกำหนด RouterConfig แบบนี้:

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

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

export const APP_ROUTE_PROVIDERS = [
    provideRouter(APP_ROUTES)  
];

จากนั้นในไฟล์ทดสอบของคุณ

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

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

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

describe(){
   // etc
}

เราเตอร์ของคุณสามารถทดสอบได้แล้ว

สำหรับ 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
}