RouterLINK-Direktive in Angular testen 2

Question

Ich versuche, die Arbeit des Routing zu testen. Ich habe die Navigationsleiste in eine separate Komponente verschoben - MdNavbar. Grundsätzlich nur html und css drin, die RouteConfig ist in anderer Komponente und dort wird MdNavbar eingespielt. Ich möchte testen, ob sich die Route ändert, wenn Sie auf den Link klicken. Im Test suche ich nach dem Profillink und klicke darauf. Ich erwarte, dass sich die Route ändert. Hier ist der Code aus meinen Tests -

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

Testläufe mit folgendem Ergebnis -

Expected '' to be '/profile'. 

und die zweite -

Könnte jemand bitte geben Sie mir einen Hinweis, was genau ich m falsch machen?

Hier ist die navbar Komponente Schablonenteil -

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

ZUSÄTZLICH: Dank Günter Zöchbauer Antwort, die ich für mich eine funktionierende Lösung finden verwaltet.

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

Das Klickereignis wird async verarbeitet. Sie müssten die Überprüfung auf den geänderten Pfad verschieben.

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

oder

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

Ich bin mit mir selbst nicht Typoskript, deshalb könnte Syntax ausgeschaltet sein.