I'm trying to learn how to write tests. I don't understand how to mock and test methods from services.
My current service file is the following:
import {Injectable} from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {Observable, throwError} from 'rxjs';
import {catchError, map, tap} from 'rxjs/operators';
import {APICONFIG} from 'src/app/config/api.config';
import {Certificate} from 'src/app/models';
const APIURL = `${APICONFIG.base}/education/certificate`;
@Injectable()
export class CertificateService {
constructor(private http: HttpClient) {
}
getAllUserCertificates(uuid: string): Observable<Certificate []> {
if (!uuid) {
return new Observable<Certificate []>();
}
return this.http.get<Certificate []>(`${APIURL}/${uuid}`).pipe(
tap(data => console.log("All user certificates: ", JSON.stringify(data))),
map(this.parseCertificateData),
catchError(this.handleError)
)
};
saveUserCertificates(certificates: Certificate[]): Observable<Certificate[]> {
return this.http.post<Certificate[]>(APIURL, certificates).pipe(
tap(data => console.log("All saved user certificates: ", JSON.stringify(data))),
map(this.parseCertificateData),
catchError(this.handleError)
)
};
parseCertificateData(rawCertificates: any): Certificate[] {
return Object.keys(rawCertificates).map(key => {
let certificate = new Certificate(
rawCertificates[key].model.institute,
rawCertificates[key].model.name,
rawCertificates[key].model.description,
rawCertificates[key].model.achievementDate,
rawCertificates[key].model.expirationDate,
rawCertificates[key].model.url,
rawCertificates[key].id
);
console.log(rawCertificates[key]);
return certificate;
});
};
private handleError(err: HttpErrorResponse) {
let errorMessage = "";
if (err.error instanceof ErrorEvent) {
errorMessage = `An error occurred: ${err.error.message}`;
} else {
errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`
}
console.error(errorMessage);
return throwError(errorMessage);
};
}
And the test that I have written are the following:
import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
import { Certificate } from "src/app/models";
import { APICONFIG } from "src/app/config/api.config";
import { TestBed } from "@angular/core/testing";
import { CertificateService } from "../certificate.service";
describe('CertificateService', ()=>{
let httpTestingController: HttpTestingController;
const APIURL = `${APICONFIG.base}/education/certificate`;
let certificatesJson =
[
{
"id": "1",
"model": {
"institute": "Institute",
"name": "Certificaat",
"description": "Description",
"achievementDate": "2021-12-14T16:27:02.000 00:00",
"expirationDate": "2021-12-14T16:27:08.000 00:00",
"url": "url"
}
},
{
"id": "2",
"model": {
"institute": "Institute2",
"name": "Certificaat2",
"description": "Description2",
"achievementDate": "2021-12-14T16:27:02.000 00:00",
"expirationDate": "2021-12-14T16:27:08.000 00:00",
"url": "url2"
}
}
]
let certificatesParsed: Certificate[] = [{id: "1", institute: "Institute", name: "Certificaat", description: "Description", achievementDate: "2021-12-14T15:59:01.000 00:00", expirationDate: "2021-12-14T15:59:11.000 00:00", url: "url"},
{id: "2", name: "Certificaat", institute: "Institute", description: "Description", achievementDate: "2021-12-14T15:59:01.000 00:00", expirationDate: "2021-12-14T15:59:11.000 00:00", url: "url"}];
beforeEach(()=>{
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [CertificateService]
});
httpTestingController = TestBed.inject(HttpTestingController);
});
describe('getAllUserCertificates', () =>{
it('should return all certificate objects from user', () => {
let id = "1";
const certificateService = TestBed.inject(CertificateService);
certificateService.getAllUserCertificates(id).subscribe(certificates => {
expect(certificates.length).toBe(2);
});
const req = httpTestingController.expectOne(`${APIURL}/${id}`);
expect(req.request.method).toBe('GET');
req.flush(certificatesJson);
httpTestingController.verify();
});
it('should create new observable if id is null', () => {
let id = "";
const certificateService = TestBed.inject(CertificateService);
const spy = spyOn(certificateService, 'getAllUserCertificates').and.callThrough();
certificateService.getAllUserCertificates(id).subscribe();
expect(spy.calls.count()).toEqual(1);
httpTestingController.verify();
});
})
describe('saveUserCertificates', () =>{
it('should post correct certificate objects', () => {
const certificateService = TestBed.inject(CertificateService);
certificateService.saveUserCertificates(certificatesParsed).subscribe(certificates => {
expect(certificates.length).toBe(2);
});
const req = httpTestingController.expectOne(APIURL);
expect(req.request.method).toBe('POST');
req.flush(certificatesJson);
httpTestingController.verify();
});
})
describe('parseCertificateData', ()=>{
it('should parse data into certificate objects', () => {
const certificateService = TestBed.inject(CertificateService);
let certificates: Certificate[] = certificateService.parseCertificateData(certificatesJson);
expect(certificates.length).toBe(2);
expect(certificates[0].institute).toBe("Institute");
expect(certificates[0].name).toBe("Certificaat");
expect(certificates[0].description).toBe("Description");
expect(certificates[0].url).toBe("url");
expect(certificates[1].institute).toBe("Institute2");
expect(certificates[1].name).toBe("Certificaat2");
expect(certificates[1].description).toBe("Description2");
expect(certificates[1].url).toBe("url2");
});
})
describe('handleError', ()=>{
it('should handle bad request', () => {
let id = "11";
let response: any;
let errResponse: any;
const mockErrorResponse = { status: 400, statusText: 'Bad Request' };
const data = `Server returned code: 400, error message is: Http failure response for ${APIURL}/11: 400 Bad Request`;
const certificateService = TestBed.inject(CertificateService);
certificateService.getAllUserCertificates('11').subscribe(res => response = res, err => errResponse = err);
httpTestingController.expectOne(`${APIURL}/${id}`).flush(data, mockErrorResponse);
expect(errResponse).toBe(data);
});
it('should handle event error', () => {
let id = "11";
let response: any;
let errResponse: any;
const errorInitEvent: ErrorEventInit = {
error : new Error('Error'),
message : 'Error'
};
const mockErrorResponse = { status: 400, statusText: 'Bad Request'};
const data = new ErrorEvent('MyErrEventType', errorInitEvent);
const certificateService = TestBed.inject(CertificateService);
certificateService.getAllUserCertificates('11').subscribe(res => response = res, err => errResponse = err);
httpTestingController.expectOne(`${APIURL}/${id}`).flush(data, mockErrorResponse);
expect(errResponse).toBe('An error occurred: Error');
});
})
})
My karma's console.log is currently filled with errors:
An error occurred: Error and Server retruned code: 400, error message is: Http failure response for URL 400 Bad Request. It feels like I am using the real service instead of a mocked one. Would it be possible to show me what the correct way of doing this would be?
Thanks for the help and have a lovely weekend.
CodePudding user response：
Not exactly sure what's causing tests to fail, but try the following:
Inside first beforeEach block after httpTestingController = TestBed.inject(HttpTestingController); put this line certificateService = TestBed.inject(CertificateService); .
Declare certificateService at the top ofc.
Now you don't need same starting code const certificateService = TestBed.inject(CertificateService); in every it block.
Also define "global" afterEach block after beforeEach where you do the folowing:
httpTestingController.verify(); (DRY principle again).
Please let me know if this helped.