[Angular 8 Unit Testing] Angular 8 Unit Testing - service

赵玉全 發表於 2020-2-12 16:50:00

[Angular 8 Unit Testing] Angular 8 Unit Testing -- service

<h2>How to test a service</h2>
The service we want to test against:
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;collapse:true;;gutter:true;">import {Injectable} from '@angular/core';
import {LoggerService} from './logger.service';

@Injectable({
providedIn: 'root'
})
export class CalculatorService {

constructor(private logger: LoggerService) {

}

add(n1: number, n2:number) {
this.logger.log("Addition operation called");
return n1 + n2;
}

subtract(n1: number, n2:number) {
this.logger.log("Subtraction operation called");
return n1 - n2;
}

}
</pre>
</div>
　For this service, we want to test two things:
1. add / subtract functions should return the correct values.
2. The logger service should be called only once for each method.
 
<h4>Using Spy to mock a service</h4>
For logger service, we don't want to call the real service, it might trigger side effects, for example, send analytics request. We want to mock a logger service:
<div class="cnblogs_code">
<pre> beforeEach(()=> {
 loggerSpy = jasmine.createSpyObj('LoggerService', ['log'])
 TestBed.configureTestingModule({
 providers: [
 CalculatorService,
 // If you want to use spy, you have to use provide + useValue syntax, otherwise, Angular will init an actual
 // implementation of LoggerService.
 {provide: LoggerService, useValue: loggerSpy}
 ]
 })
 calculator = TestBed.get(CalculatorService)
});</pre>
</div>
 
Full test code:
<div class="cnblogs_code">
<pre>import {CalculatorService} from './calculator.service';
import {LoggerService} from './logger.service';
import {TestBed} from '@angular/core/testing';

// fdescribe
describe('CalculatorService', () => {

let calculator: CalculatorService,
 loggerSpy: any;

beforeEach(()=> {
 loggerSpy = jasmine.createSpyObj('LoggerService', ['log'])
 TestBed.configureTestingModule({
 providers: [
 CalculatorService,
 // If you want to use spy, you have to use provide + useValue syntax, otherwise, Angular will init an actual
 // implementation of LoggerService.
 {provide: LoggerService, useValue: loggerSpy}
 ]
 })
 calculator = TestBed.get(CalculatorService)
});

// fit
it('should add two numbers', () => {
 const result = calculator.add(2, 2);
 expect(result).toBe(4);
 expect(loggerSpy.log).toHaveBeenCalledTimes(1);
});

it('should subtract two numbers', () => {

 const result = calculator.subtract(2, 2);
 expect(result).toBe(0, "unexpected subtraction result");
 expect(loggerSpy.log).toHaveBeenCalledTimes(1);
});
});</pre>
</div>
 
 
<h4>Testing a service with HTTP request</h4>
The service we want to test against:
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;collapse:true;;gutter:true;">import { Injectable } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { Lesson } from "../model/lesson";
import { Course } from "../model/course";

@Injectable()
export class CoursesService {
constructor(private http: HttpClient) {}

findCourseById(courseId: number): Observable<Course> {
return this.http.get<Course>(`/api/courses/${courseId}`);
}

findAllCourses(): Observable<Course[]> {
return this.http.get("/api/courses").pipe(map(res => res["payload"]));
}

saveCourse(courseId: number, changes: Partial<Course>): Observable<Course> {
return this.http.put<Course>(`/api/courses/${courseId}`, changes);
}

findLessons(
courseId: number,
filter = "",
sortOrder = "asc",
pageNumber = 0,
pageSize = 3
): Observable<Lesson[]> {
return this.http
 .get("/api/lessons", {
 params: new HttpParams()
 .set("courseId", courseId.toString())
 .set("filter", filter)
 .set("sortOrder", sortOrder)
 .set("pageNumber", pageNumber.toString())
 .set("pageSize", pageSize.toString())
 })
 .pipe(map(res => res["payload"]));
}
}
</pre>
</div>
　　
For this service, we also don't want to issue a real http request, therefore we also need to mock a HTTP service, Angular provides HttpClientTestingModule for us. We can use the HttpTestingController.
<div class="cnblogs_code">
<pre>let coursesService: CoursesService,
httpTestingController: HttpTestingController;

beforeEach(() => {
TestBed.configureTestingModule({
 imports: [HttpClientTestingModule],
 providers:
});

(coursesService = TestBed.get(CoursesService)),
 (httpTestingController = TestBed.get(HttpTestingController));
});</pre>
</div>
 
Example code:
<div class="cnblogs_code">
<pre>it("should retrieve all courses", () => {
coursesService.findAllCourses().subscribe(courses => {
 expect(courses).toBeTruthy("No courses returned");

 expect(courses.length).toBe(12, "incorrect number of courses");

 const course = courses.find(course => course.id == 12);

 expect(course.titles.description).toBe("Angular Testing Course");
});
// expect only one request
const req = httpTestingController.expectOne("/api/courses");
// check the request should be the GET request
expect(req.request.method).toEqual("GET");
// issue the mock http request and return the response
req.flush({ payload: Object.values(COURSES) });
});</pre>
</div>
 
<h4>Testing a error HTTP request</h4>
Calling 'fail' method from Jasmine in the success block, which means "This test should in Error block, but landed on Success block, so we consider the test is failed."
<div class="cnblogs_code">
<pre>it("should give an error if save course fails", () => {
const changes: Partial<Course> = {
 titles: { description: "Testing Course" }
};
coursesService.saveCourse(12, changes).subscribe(
 () => fail("save course operation should have failed"),
 (error: HttpErrorResponse) => {
 expect(error.status).toBe(500);
 }
);

const req = httpTestingController.expectOne("/api/courses/12");
expect(req.request.body.titles.description).toEqual("Testing Course");
expect(req.request.method).toBe("PUT");
req.flush("save course fail", {
 status: 500,
 statusText: "Internal server error"
});
});</pre>
</div>
 
<h4>Testing HTTP params</h4>
Example Code:
<div class="cnblogs_code">
<pre>it("should find a list of lessons", () => {
coursesService.findLessons(12).subscribe(lessons => {
 expect(lessons).toBeTruthy();
 expect(lessons.length).toBe(3);
});
// expectOne can also take function
const req = httpTestingController.expectOne(
 req => req.url == "/api/lessons"
);
expect(req.request.method).toEqual("GET");
expect(req.request.params.get("courseId")).toEqual("12");
expect(req.request.params.get("filter")).toEqual("");
expect(req.request.params.get("sortOrder")).toEqual("asc");
expect(req.request.params.get("pageNumber")).toEqual("0");
expect(req.request.params.get("pageSize")).toEqual("3");

req.flush({
 payload: findLessonsForCourse(12).slice(0, 3)
});
});</pre>
</div>
 
--
Full testing code:
<div class="cnblogs_code">
<pre>import { CoursesService } from "./courses.service";
import { TestBed } from "@angular/core/testing";
import {
HttpClientTestingModule,
HttpTestingController
} from "@angular/common/http/testing";
import { COURSES, findLessonsForCourse } from "../../../../server/db-data";
import { Course } from "../model/course";
import { HttpErrorResponse } from "@angular/common/http";

fdescribe("CoursesService", () => {
let coursesService: CoursesService,
httpTestingController: HttpTestingController;

beforeEach(() => {
TestBed.configureTestingModule({
 imports: ,
 providers:
});

(coursesService = TestBed.get(CoursesService)),
 (httpTestingController = TestBed.get(HttpTestingController));
});

it("should retrieve all courses", () => {
coursesService.findAllCourses().subscribe(courses => {
 expect(courses).toBeTruthy("No courses returned");

 expect(courses.length).toBe(12, "incorrect number of courses");

 const course = courses.find(course => course.id == 12);

 expect(course.titles.description).toBe("Angular Testing Course");
});

const req = httpTestingController.expectOne("/api/courses");

expect(req.request.method).toEqual("GET");

req.flush({ payload: Object.values(COURSES) });
});

it("should save the course data", () => {
const changes: Partial<Course> = {
 titles: { description: "Testing Course" }
};

coursesService.saveCourse(12, changes).subscribe(course => {
 expect(course.id).toEqual(12);
});

const req = httpTestingController.expectOne("/api/courses/12");
expect(req.request.body.titles.description).toEqual("Testing Course");
expect(req.request.method).toBe("PUT");
req.flush({
 ...COURSES[12],
 ...changes
});
});

it("should give an error if save course fails", () => {
const changes: Partial<Course> = {
 titles: { description: "Testing Course" }
};
coursesService.saveCourse(12, changes).subscribe(
 () => fail("save course operation should have failed"),
 (error: HttpErrorResponse) => {
 expect(error.status).toBe(500);
 }
);

const req = httpTestingController.expectOne("/api/courses/12");
expect(req.request.body.titles.description).toEqual("Testing Course");
expect(req.request.method).toBe("PUT");
req.flush("save course fail", {
 status: 500,
 statusText: "Internal server error"
});
});

it("should find a list of lessons", () => {
coursesService.findLessons(12).subscribe(lessons => {
 expect(lessons).toBeTruthy();
 expect(lessons.length).toBe(3);
});

const req = httpTestingController.expectOne(
 req => req.url == "/api/lessons"
);
expect(req.request.method).toEqual("GET");
expect(req.request.params.get("courseId")).toEqual("12");
expect(req.request.params.get("filter")).toEqual("");
expect(req.request.params.get("sortOrder")).toEqual("asc");
expect(req.request.params.get("pageNumber")).toEqual("0");
expect(req.request.params.get("pageSize")).toEqual("3");

req.flush({
 payload: findLessonsForCourse(12).slice(0, 3)
});
});

afterEach(() => {
// make sure the no extra http request are called
 httpTestingController.verify();
});
});</pre>
</div>
  
来源：https://www.cnblogs.com/Answer1215/p/12299646.html

頁: [1]

琼殿技术论坛's Archiver

[Angular 8 Unit Testing] Angular 8 Unit Testing -- service