コンセントのない経路探索を角度で評価する

Question

別のページにナビゲートするボタンを表示するAngularコンポーネントの仕様を書いています。コンポーネントはRouter::navigate()を使用しますが、それ自体にはルータのアウトレットがありません。親コンポーネントにはコンセントがあります。私の仕様では、テストでは、ボタンをクリックすると正しいパスにルーティングされることを確認する必要があります。

私の現在の（壊れた）仕様はRouterTestingModuleを使用してDummyComponentへのルートを提供しようとします。ボタンをスペックでクリックされたとき、私は次のエラーを取得する：

明らか

'Unhandled Promise rejection:', 'Cannot find primary outlet to load 'DummyComponent'', '; Zone:', 'angular', '; Task:', 'Promise.then', '; Value:', Error{__zone_symbol__error: Error{originalStack: 'Error: Cannot find primary outlet to load 'DummyComponent'

私は間違った方法でこの問題に近づいています。コンポーネントにルータのアウトレットがない場合、ルータのナビゲーションをテストする正しい方法は何ですか？

成分（擬似コード）：

@Component({ 
    template: ` 
     Go to the <button (click)="nextPage">next page</button> 
    ` 
}) 
export class ExampleComponent { 
    public myId = 5; 

    constructor(private _router: Router); 

    public nextPage(): void { 
     this._router.navigate(['/example', this.myId]); 
    } 
} 

スペック。これは動作しません：

const FAKE_ID = 999; 

describe('ExampleComponent Test',() => { 
    let exampleComponent: ExampleComponent; 
    let fixture: ComponentFixture<ExampleComponent>; 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ DummyComponent ], 
      imports: [ 
       RouterTestingModule.withRoutes([ 
        { path: 'example/:id', component: DummyComponent } 
       ]); 
      ] 
     }); 

     fixture = TestBed.createComponent(exampleComponent); 
     exampleComponent = fixture.componentInstance; 
    }); 

    it('should route to example/:id', inject([Router, Location], (router: Router, location: Location) => { 
     fixture.detectChanges(); 
     exampleComponent.myId = FAKE_ID; 

     const LINK_BUTTON = fixture.debugElement.query(By.css('button')); 
     LINK_BUTTON.nativeElement.dispatchEvent(new Event('click')); 
     expect(location.path()).toEqual('/example/' + FAKE_ID); 
    }); 
}); 

Answer 1

DummyComponentのための出口（<router-outlet>）が必要です。 DummyComponentがからナビゲートされるルートである場合、にはアウトレットが必要です。あなたはまた、あなただけのRouterを模擬するために、より良いオプションがあるかもしれない、ちょうどにナビゲートされているルートをテストするには、このインフラストラクチャを設定することを避けるためにしたい場合はdeclarations`

@Component({ 
    tempalte: ` 
    <router-outlet></router-outlet> 
    <button (click)="nextPage">next page</button> 
    ` 
}) 
class ExampleComponent{} 

declarations: [ ExampleComponent, DummyComponent ] 

にを追加する必要がありますnavigateメソッドが正しいパスで呼び出されていることを確認してください。これにより

beforeEach(()=>{ 
    TestBed.configureTestingModule({ 
    providers: [ 
     { 
     provide: Router, 
     useValue: { navigate: jasmine.createSpy('navigate') } 
     } 
    ] 
    }) 
}) 

あなたが偽のRouterを使用しているとして、あなたは、まったくルーティングを設定する必要はありません。その後、あなたのテストで

it('should route to example/:id', inject([Router], (router: Router) => { 
    expect(router.navigate).toHaveBeenCalledWith(['/example', FAKE_ID]); 
});