angularkarma-jasminekarma-coverage

How to create simple navigate test cases - Karma Testing Angular


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


Solution

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