Jasmine testcase for angular2 router.navigate()

Question

I am having a app.component.html file with button to navigate to another component called HomeComponent

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

My app.component.ts file

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

}

and my 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 { }

Here is my spec file 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']);

  }));
});

I am getting the result as

score 3 · Answer 1 · answered Jun 21 '19 at 11:51

In order to create unit test case for router.navigate you can do something like this:

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', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent, HomeComponent]
    });
  });

  it('should go home', async(inject([Router], (router) => {
    spyOn(router, 'navigate'); //added a spy on router
    let fixture = TestBed.createComponent(AppComponent);
    let component = TestBed.createComponent(AppComponent).componentInstance;
    component.nav();
    expect(router.navigate).toHaveBeenCalled();
    expect(router.navigate).toHaveBeenCalledWith(['/home']);

  }));
});

This worked for me but `async` is deprecated for removal in v12. Docs say to use `waitForAsync` from '@angular/core/testing' instead which also works for me. — Chris R, Dec 07 '20 at 13:03

score 0 · Answer 2 · answered Sep 26 '17 at 10:41

0

You have spied on router but you haven't provided it to the testBed environment. Try adding

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

after declarations.

Also you need not include RouterTestingModule since you are not clicking any links.

References:

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

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

answered Sep 26 '17 at 10:41

Sanju

1,478
2
20
41

I have provided the providers but still getting the same error – akshaya rathinavel Sep 26 '17 at 12:45

Jasmine testcase for angular2 router.navigate()

2 Answers2

Linked