How to test routing navigation with RouterTestingModule

Question

I want to test the methode that sends me to an specific page. I have check several examples and all are done in the same way I did, but I receive an error:

Expected spy navigate to have been called with: [ '/themen' ] but it was never called. Error: Expected spy navigate to have been called with: [ '/themen' ] but it was never called.

My html code is:

<button class="arrow-back-icon kf-tooltip-btn align-middle" id="backButton"
         tabindex="0" name="ic_arrow-back_24" (click)="goBack()">
</button>

The methode in my component is:

import {AfterViewChecked, ChangeDetectorRef, Component, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {SharingDataService} from '../services/sharing-data.service';
import {ActivatedRoute, Router} from '@angular/router';
import {BreakpointObserver} from '@angular/cdk/layout';
@Component({
  selector: 'app-meeting',
  templateUrl: './meeting.component.html',
  styleUrls: ['./meeting.component.scss']
})
export class MeetingComponent implements OnInit, AfterViewChecked {
  constructor(private readonly translate: TranslateService,
              private readonly sharingDataService: SharingDataService,
              private readonly router: Router,
              private readonly activatedRoute: ActivatedRoute,
              private readonly breakpointObserver: BreakpointObserver,
              private readonly cd: ChangeDetectorRef) {
  }

goBack(): void {
  this.router.navigate(['/themen']).then();
}
}

The test is:

import {ComponentFixture, fakeAsync, inject, TestBed, waitForAsync} from '@angular/core/testing';
import {MeetingComponent} from './meeting.component';
import {Router, Routes} from '@angular/router';
import {CommonModule} from '@angular/common';
import {RouterTestingModule} from '@angular/router/testing';
import {TranslateLocalModule} from '../../../projects/shared/src/lib/translate';

describe('MeetingComponent', () => {
  let sut: meetingComponent;
  let fixture: ComponentFixture<MeetingComponent>;
  const routes: Routes = [
    {path: '', redirectTo: 'themen', pathMatch: 'full'},
    {path: 'meeting', component: meetingComponent},
    {path: '**', redirectTo: 'themen', pathMatch: 'full'}
  ];
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MeetingComponent ],
      imports: [
        CommonModule,
        RouterTestingModule.withRoutes(routes),
        TranslateLocalModule,
      providers: [
      ]
    }).compileComponents();
  });
  beforeEach(() => {fixture = TestBed.createComponent(MeetingComponent);
    sut = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(sut).toBeTruthy();
  });
  it('should go on previous step', waitForAsync(() => {
    const routerSpy = {
      navigate: jasmine.createSpy('navigate')
    };
    sut.onPrevStep();
    fixture.detectChanges();
    expect (routerSpy.navigate).toHaveBeenCalledWith('/themen');
  }));
});

Can someone tells me what am I doing wrong?

I also tried this:

it('should navigates to previous step', fakeAsync(async () => {
  spyOn(sut, 'onPrevStep').and.returnValue(await Promise.resolve());
  const navigateSpy = spyOn(router, 'navigate');
  sut.onPrevStep();
  tick();
  expect(sut.onPrevStep).toHaveBeenCalled();
  expect(navigateSpy).toHaveBeenCalledWith(['/themen']);
}));

But the error is the same.

Thanks!

Answer 1

In my methode I had this.router.navigate(['/themen']).then(); that is why when I applied @AliF50 solution, it did not work. If I remove .then() the test solution works correctly. In this case I can do it, because I do not need to execute any other code when I call the navigate.

But if you do then you must provide a promise value. For example:

import {ComponentFixture, fakeAsync, inject, TestBed, waitForAsync} from '@angular/core/testing';
import {MeetingComponent} from './meeting.component';
import {Router, Routes} from '@angular/router';
import {CommonModule} from '@angular/common';
import {RouterTestingModule} from '@angular/router/testing';
import {TranslateLocalModule} from '../../../projects/shared/src/lib/translate';

describe('MeetingComponent', () => {
  let sut: meetingComponent;
  let fixture: ComponentFixture<MeetingComponent>;
  let router: Router;  

  const routes: Routes = [
    {path: '', redirectTo: 'themen', pathMatch: 'full'},
    {path: 'meeting', component: meetingComponent},
    {path: '**', redirectTo: 'themen', pathMatch: 'full'}
  ];
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MeetingComponent ],
      imports: [
        CommonModule,
        RouterTestingModule.withRoutes(routes),
        TranslateLocalModule,
      providers: [
      ]
    }).compileComponents();
    !!The router spy must be declared here for me it did not work in the before each
    // !! get a handle on the router !!
    router = TestBed.inject(Router);
    // !! spy on the router and return a Promise Value!!
    spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));     
  });
  beforeEach(() => {
    fixture = TestBed.createComponent(MeetingComponent);
    sut = fixture.componentInstance;
    fixture.detectChanges();
    router.initialNavigation();
  });
  it('should create', () => {
    expect(sut).toBeTruthy();
  });
  it('should go on previous step', waitForAsync(() => {
    sut.onPrevStep();
    expect(router.navigate).toHaveBeenCalledWith(['/themen']);
  }));
});