How to create simple navigate test cases - Karma Testing Angular

Question

I'm new in karma testing....

How to create simple navigate test cases,

This is my component function,

continue() {
    this.spinner.show();
    this.router.navigate(['deliveryaddress']);
    this.spinner.hide();
  }

Here is my spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
import { FormBuilder } from '@angular/forms';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ],
      imports: [RouterTestingModule,HttpClientModule],
      providers: [HttpClient,FormBuilder,HttpHandler]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Thanks..................................................................................................................................

Answer 1

Assuming you have mocked spinner correctly, you can do something like this:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';
import { Router } from '@angular/router'; // import the router
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
import { FormBuilder } from '@angular/forms';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let router: Router; // assign router variable;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ],
      imports: [RouterTestingModule,HttpClientModule],
      providers: [HttpClient,FormBuilder,HttpHandler]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    router = TestBed.inject(Router); // If you're using Angular 9 and above, this is .inject
   // if you're using an older version, it should be TestBed.get
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should navigate to deliveryaddress on continue', () => { // add this test
    spyOn(router, 'navigate'); // create a spy on the navigate function
    component.continue();
    expect(router.navigate).toHaveBeenCalledWith(['deliveryaddress']);
  });
});