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