I have a service with a method that performs a http delete. If the delete has been succesfull, then I redirect to other page. When I test this method, if the parameter id I pass to it is correct, I expect router.navigate to have been called. But for some reason this does not happen, so I get this report from Jasmine:
Jasmine spec failure test:
Service: MemberDelete > Testing deleteMember() succesfully
Expected spy navigate to have been called with:
[ [ '/members' ] ]
but it was never called.
This is my testing file member-delete.service.spec.ts:
import { HttpClient, HttpResponse} from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { TestBed, async, inject } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { memberMockObject } from 'src/app/components/member/member.mocks';
import {createSpyFromClass, Spy} from 'jasmine-auto-spies';
import { MemberDeleteService } from './member-delete.service';
import { environment } from '../../../environments/environment';
describe('Service: MemberDelete', () => {
let service: MemberDeleteService;
let mockHttp: HttpClientTestingModule;
let mockHttpTestingController: HttpTestingController;
let router: Router;
beforeEach(() => {
TestBed.configureTestingModule({
imports:[
HttpClientTestingModule,
RouterTestingModule
],
providers:[
{ provider: MemberDeleteService, useValue: service },
{ provider: HttpClient, useValue: createSpyFromClass(HttpClient) }
]
});
mockHttp = TestBed.inject(HttpClient);
mockHttpTestingController = TestBed.inject(HttpTestingController);
service = TestBed.inject(MemberDeleteService);
router = TestBed.inject(Router);
});
afterEach(() => {
mockHttpTestingController.verify(); //Verifies that no requests are outstanding.
});
it('should ...', () => {
expect(service).toBeTruthy();
});
it('Testing deleteMember() succesfully', () => {
spyOn(router, 'navigate');
service.deleteMember(memberMockObject.fakeMember.id);
expect(router.navigate).toHaveBeenCalledWith(['/members']);
});
});
This is my service method from member-delete.service.ts:
public deleteMember(memberId: number): void {
this._http.delete(`${this._membersUrl}/${memberId}`).subscribe({
complete: () => {
this.router.navigate(
[`/members`]
);
},
error: (error) => {this.handleError(error);}
});
}
Thank you in advance, I really appreciate your help
The issue is you're not passing a response for the delete and it is never going inside of the subscribe block.
Follow the lines with !!:
import { HttpClient, HttpResponse} from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { TestBed, async, inject } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { memberMockObject } from 'src/app/components/member/member.mocks';
import {createSpyFromClass, Spy} from 'jasmine-auto-spies';
import { MemberDeleteService } from './member-delete.service';
import { environment } from '../../../environments/environment';
describe('Service: MemberDelete', () => {
let service: MemberDeleteService;
let mockHttp: HttpClientTestingModule;
let mockHttpTestingController: HttpTestingController;
let router: Router;
beforeEach(() => {
TestBed.configureTestingModule({
imports:[
HttpClientTestingModule,
RouterTestingModule
],
providers:[
// !! remove below line and provide actual service for testing
// { provider: MemberDeleteService, useValue: service },
MemberDeleteService,
// !! remove below line - HttpClientTestingModule mocks the HttpClient for you
// { provider: HttpClient, useValue: createSpyFromClass(HttpClient) }
]
});
mockHttp = TestBed.inject(HttpClient);
mockHttpTestingController = TestBed.inject(HttpTestingController);
service = TestBed.inject(MemberDeleteService);
router = TestBed.inject(Router);
});
afterEach(() => {
mockHttpTestingController.verify(); //Verifies that no requests are outstanding.
});
it('should ...', () => {
expect(service).toBeTruthy();
});
// !! fakeAsync so we have better control of the subscribe
it('Testing deleteMember() succesfully', fakeAsync(() => {
spyOn(router, 'navigate');
service.deleteMember(memberMockObject.fakeMember.id);
// !! expect a http request (find the pending request)
const req = mockhttpTestingController.expectOne(request => request.url.includes(memberMockObject.fakeMember.id));
// !! expect a delete method
expect(req.request.method).toBe('Delete)';
// !! flush below response for the pending http call
req.flush({});
// !! wait for the subscribe to complete before assertion (tick does this)
tick();
expect(router.navigate).toHaveBeenCalledWith(['/members']);
}));
});