ルータリンク命令を角2でテストする

Question

ルーティングの作業をテストしようとしています。私はnavbarを別のコンポーネントに移動しました - MdNavbar。基本的にそこにはhtmlとcssだけがあり、RouteConfigは他のコンポーネントにあり、MdNavbarはそこに注入されます。私はそのリンクをクリックするとそのルートの変化をテストしたい。テストでは、プロファイルリンクを探してクリックしています。私はそのルートが変わることを期待している。ここに私のテストからのコードがある -

import {it, inject,async, describe, beforeEachProviders, tick, fakeAsync} from '@angular/core/testing'; 

import {TestComponentBuilder} from '@angular/compiler/testing'; 
import {Component, provide} from '@angular/core'; 

import {RouteRegistry, Router, ROUTER_PRIMARY_COMPONENT, ROUTER_DIRECTIVES,RouteConfig} from '@angular/router-deprecated';  
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; 

import {RootRouter} from '@angular/router-deprecated/src/router'; 
import {SpyLocation} from '@angular/common/testing'; 

import {IndexComponent} from '../../home/dashboard/index/index.component'; 
import {ProfileComponent} from '../../home/dashboard/profile/profile.component'; 

// Load the implementations that should be tested 
import {MdNavbar} from './md-navbar.component';  

describe('md-navbar component',() => { 
    // provide our implementations or mocks to the dependency injector 
    beforeEachProviders(() => [ 
    RouteRegistry, 
    provide(Location, { useClass: SpyLocation }), 
    { provide: LocationStrategy, useClass: PathLocationStrategy }, 
    provide(Router, { useClass: RootRouter }), 
    provide(ROUTER_PRIMARY_COMPONENT, { useValue: TestComponent }), 
    ]); 

    // Create a test component to test directives 
    @Component({ 
    template: '', 
    directives: [ MdNavbar, ROUTER_DIRECTIVES ] 
    }) 
    @RouteConfig([ 
    { path: '/', name: 'Index', component: IndexComponent, useAsDefault: true }, 
    { path: '/profile', name: 'Profile', component: ProfileComponent }, 
    ]) 
    class TestComponent {} 

    it('should be able navigate to profile', 
     async(inject([TestComponentBuilder, Router, Location], 
     (tcb: TestComponentBuilder, router: Router, location: Location) => { 
     return tcb.overrideTemplate(TestComponent, '<md-navbar></md-navbar>') 
     .createAsync(TestComponent).then((fixture: any) => { 
      fixture.detectChanges(); 

      let links = fixture.nativeElement.querySelectorAll('a'); 
      links[8].click() 
      expect(location.path()).toBe('/profile'); 


     // router.navigateByUrl('/profile').then(() => { 
     //  expect(location.path()).toBe('/profile'); 
     // }) 
     }) 
    }))); 

テストは、次のような結果で実行されます -

Expected '' to be '/profile'. 

2つ目 -

誰かが私は「まさに、私にヒントを与えてくださいでした間違ってる？私は私のために働いて解決策を見つけることができたギュンターZöchbauerの答えに ありがとう：

<nav class="navigation mdl-navigation mdl-color--grey-830"> 
<a [routerLink]="['./Index']" class="mdl-navigation__link" href=""><i class="material-icons" role="presentation">home</i>Home</a> 
<a [routerLink]="['./Profile']" class="mdl-navigation__link" href=""><i class="material-icons" role="presentation">settings</i>My Profile</a> 
</nav> 

追加 - ここで

一部のナビゲーションバーコンポーネントテンプレートがあります。

it('should be able navigate to profile', 
     async(inject([TestComponentBuilder, Router, Location], 
     (tcb: TestComponentBuilder, router: Router, location: Location) => { 
     return tcb.overrideTemplate(TestComponent, '<md-navbar></md-navbar>') 
     .createAsync(TestComponent).then((fixture: any) => { 
      fixture.detectChanges(); 

      let links = fixture.nativeElement.querySelectorAll('a'); 
      links[8].click(); 
      fixture.detectChanges(); 

      setTimeout(() { 
      expect(location.path()).toBe('/profile'); 
      }); 
     }) 
    }))); 

Answer 1

クリックイベントは非同期に処理されます。変更されたパスのチェックを遅らせる必要があります。

it('should be able navigate to profile', 
     inject([TestComponentBuilder, AsyncTestCompleter, Router, Location], 
     (tcb: TestComponentBuilder, async:AsyncTestCompleter, router: Router, location: Location) => { 
     return tcb.overrideTemplate(TestComponent, '<md-navbar></md-navbar>') 
     .createAsync(TestComponent).then((fixture: any) => { 
      fixture.detectChanges(); 

      let links = fixture.nativeElement.querySelectorAll('a'); 
      links[8].click() 
      setTimeout(() { 
      expect(location.path()).toBe('/profile'); 
      async.done(); 
      }); 


     // router.navigateByUrl('/profile').then(() => { 
     //  expect(location.path()).toBe('/profile'); 
     // }) 
     }) 
    }))); 

または

it('should be able navigate to profile', 
     async(inject([TestComponentBuilder, Router, Location], 
     (tcb: TestComponentBuilder, router: Router, location: Location) => { 
     return tcb.overrideTemplate(TestComponent, '<md-navbar></md-navbar>') 
     .createAsync(TestComponent).then((fixture: any) => { 
      fixture.detectChanges(); 

      let links = fixture.nativeElement.querySelectorAll('a'); 
      links[8].click() 
      return new Promise((resolve, reject) => { 
      expect(location.path()).toBe('/profile'); 
      resolve(); 
      }); 


     // router.navigateByUrl('/profile').then(() => { 
     //  expect(location.path()).toBe('/profile'); 
     // }) 
     }) 
    }))); 

従って私は構文がオフになる場合もあり、自分自身を活字体使用していませんよ。