Jasmine pour TESTCASE angular2 router.navigate()

Question

J'ai un fichier app.component.html avec bouton pour accéder à un autre composant appelé HomeComponent

<button (click)="nav()" id="nav">Navigate</button> 
<router-outlet></router-outlet> 

Mon fichier app.component.ts

import { Component } from '@angular/core'; 
import { RouterModule,Router, Routes } from '@angular/router'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
    constructor(private router: Router){ 

    } 
    nav(){ 
    this.router.navigate(['/home']); 
    } 

} 

et mon app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { RouterModule, Routes,Router } from '@angular/router'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent 
    ], 
    imports: [ 
    BrowserModule, 
    RouterModule.forRoot([{ path: "", component: AppComponent}]), 
    RouterModule.forChild([{ path: "home", component: HomeComponent}]) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Voici ma spécification déposer app.component.spec.ts

import { TestBed, async, ComponentFixture, fakeAsync, tick,inject } from '@angular/core/testing'; 
import { By, BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { DebugElement } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { Router, RouterOutlet } from "@angular/router"; 
import { FormsModule } from "@angular/forms"; 
import { RouterTestingModule } from '@angular/router/testing'; 
import * as br from '@angular/platform-browser'; 


describe('Component:AppComponent',() => { 
    let location, router; 
    let mockRouter 

    beforeEach(() => { 
    mockRouter = { 
     navigate: jasmine.createSpy('navigate') 
    }; 
    TestBed.configureTestingModule({ 
     imports: [RouterTestingModule.withRoutes([ 
     { path: 'home', component: HomeComponent } 
     ])], 
     declarations: [AppComponent, HomeComponent] 
    }); 
    }); 




    it('should go home', async(() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    fixture.detectChanges(); 
    console.log(mockRouter.navigate); 
    let component = TestBed.createComponent(AppComponent).componentInstance; 
    component.nav(); 
    spyOn(component, 'nav'); 

    fixture.detectChanges(); 

    expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']); 

    })); 
}); 

Je reçois le résultat que

Answer 1

Vous avez espionné router mais vous avez pas fourni à l'environnement testBed. Essayez d'ajouter

providers: [ 
    { provide: Router, useValue: mockRouter}, 
], 

après les déclarations. Vous n'avez pas besoin d'inclure RouterTestingModule puisque vous ne cliquez pas sur un lien.

Références:

https://stackoverflow.com/a/46342813/8558515

Angular 2 Unit Testing - Cannot read property 'root' of undefined