javascript - 无法在 Angular 上获得涉及 Jasmine 间谍的有效断言
问题描述
我正在尝试为仅将 HttpResponse 作为输入并输出 console.error 的服务编写测试,以防 HttpResponse 涉及错误。
该服务运行良好,即使在 Karma 填充的浏览器实例中,我也可以看到 console.error,但我编写的断言相同的测试失败了。不知道为什么。
这是测试:-
import { TestBed } from "@angular/core/testing";
import { HttpErrorResponse } from "@angular/common/http";
import { GlobalErrorHandler } from "./global-error-handler.service";
describe("GlobalErrorHandler Service", () => {
let service: GlobalErrorHandler;
beforeEach(() => {
service = new GlobalErrorHandler();
});
afterEach(() => {
service = null;
});
it("should catch HttpErrors and output to console", () => {
let error = new HttpErrorResponse({
url: "Some url",
error: { message: "error message details" },
status: 404
});
let errorLog = {
status: error.status,
message: error.message,
details: error.error.message
};
service.handleError(error);
console.error = jasmine.createSpy("error");
expect(console.error).toHaveBeenCalled();
});
});
这是我正在测试的服务:-
import { Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
@Injectable({
providedIn: "root"
})
export class GlobalErrorHandler {
constructor() {}
handleError(error: any) {
if (error instanceof HttpErrorResponse) {
const errorToShow = {
status: error.status,
message: error.message,
details: error.error.message
};
console.error(`Backend returned this error => `, errorToShow);
} else {
console.error(`An error occurred => "${error.message}"`);
}
// Throwing error...
throw error;
// enable the following line to show notification...
// this.errorNotifier.handleError(error);
}
}
这是终端上的测试输出:-
ng test
10% building 7/8 modules 1 active ...tarter-app-seven/src sync /\.spec\.ts$/25 01 2019 17:24:12.806:WARN [karma]: No captured browser, open http://localhost:9876/
25 01 2019 17:24:12.817:INFO [karma-server]: Karma v3.1.4 server started at http://0.0.0.0:9876/
25 01 2019 17:24:12.818:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
25 01 2019 17:24:12.830:INFO [launcher]: Starting browser Chrome
25 01 2019 17:24:23.171:WARN [karma]: No captured browser, open http://localhost:9876/
25 01 2019 17:24:23.405:INFO [Chrome 71.0.3578 (Linux 0.0.0)]: Connected on socket FvdOGo3cHANej7U5AAAA with id 24264291
ERROR: 'Backend returned this error => ', Object{status: 404, message: 'Http failure response for Some url: 404 undefined', details: 'error message details'}
Chrome 71.0.3578 (Linux 0.0.0): Executed 3 of 4 SUCCESS (0 secs / 0.307 secs)
ERROR: 'Backend returned this error => ', Object{status: 404, message: 'Http failure response Chrome 71.0.3578 (Linux 0.0.0) GlobalErrorHandler Service should catch HttpErrors and output to console FAILED
HttpErrorResponse: Http failure response for Some url: 404 undefined
Chrome 71.0.3578 (Linux 0.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.311 secs)
Chrome 71.0.3578 (Linux 0.0.0) GlobalErrorHandler Service should catch HttpErrors and output to console FAILED
Chrome 71.0.3578 (Linux 0.0.0): Executed 4 of 4 (1 FAILED) (0.359 secs / 0.311 secs)
TOTAL: 1 FAILED, 3 SUCCESS
TOTAL: 1 FAILED, 3 SUCCESS
浏览器测试实例截图:-
我希望测试能够通过,尤其是当浏览器实际返回 console.error 时。我是测试和茉莉花的新手。所以这可能是愚蠢的,请帮助我。提前致谢 :)
更新:-
尝试重新排列行以在调用服务之前创建间谍(在 beforeEach 部分中)但得到相同的结果:-
import { TestBed } from "@angular/core/testing";
import { HttpErrorResponse } from "@angular/common/http";
import { GlobalErrorHandler } from "./global-error-handler.service";
describe("GlobalErrorHandler Service", () => {
let service: GlobalErrorHandler;
let errorSpy;
beforeEach(() => {
service = new GlobalErrorHandler();
errorSpy = jasmine.createSpy('error');
});
afterEach(() => {
service = null;
});
it("should catch HttpErrors and output to console", () => {
let error = new HttpErrorResponse({
url: "Some url",
error: { message: "error message details" },
status: 404
});
let errorLog = {
status: error.status,
message: error.message,
details: error.error.message
};
service.handleError(error);
expect(errorSpy).toHaveBeenCalled();
});
});
解决方案:-
让它工作,问题是我的方法中有一个 throw 语句,它在达到期望语句之前取消了测试。在这里,我使用 promise 来调用该函数,以便仅在方法返回错误时才调用 expect 语句。
import { Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
@Injectable({
providedIn: "root"
})
export class GlobalErrorHandler {
constructor() {}
/**
* If an error occurs, we display it in the console with pertinent details
* @param error the error object
*/
handleError(error: any) {
if (error instanceof HttpErrorResponse) {
const errorToShow = {
status: error.status,
message: error.message,
details: error.error.message
};
console.error(`Backend returned this error => `, errorToShow);
} else {
// If error is not an instance of HttpErrorResponse...
console.error(`An error occurred => "${error.message}"`);
}
throw new Error(error.message);
// enable the following line to show notification...
// this.errorNotifier.handleError(error);
}
}
测试:-
import { TestBed } from "@angular/core/testing";
import { HttpErrorResponse } from "@angular/common/http";
import { GlobalErrorHandler } from "./global-error-handler.service";
describe("GlobalErrorHandler Service", () => {
let service: GlobalErrorHandler;
let error;
beforeEach(() => {
service = new GlobalErrorHandler();
error = new HttpErrorResponse({
url: "Some url",
error: { message: "error message details" },
status: 404
});
});
afterEach(() => {
service = null;
error = null;
});
it("should show output error message to console", () => {
const errorSpy = spyOn(console, "error");
let promise = new Promise((resolve, reject) => {
resolve(()=>service.handleError(error));
})
promise.then(()=> {},()=>expect(errorSpy).toHaveBeenCalled());
});
it("should throw error when called", () => {
expect(() => {
service.handleError(error);
}).toThrow(new Error(error.message));
});
});
解决方案
您在处理错误后创建了间谍,这就是断言失败的原因。
尝试以下方法:
const errorSpy = spyOn(console,"error");
service.handleError(error);
expect(errorSpy).toHaveBeenCalled();
推荐阅读
- javascript - 我想交替、重复、单击或检查
- javascript - 悬停在边距
- reactjs - 我想将反应开发工具添加到 Safari 浏览器
- python - 在 Python 中将数组传递给 SQL 查询
- firebase - Crashlytics NDK 如何启用本地符号上传
- python - 比较 unicode 字符串和字节字符串
- database-design - 设计键值数据库
- python - 文本文件中的行不会遍历 for 循环 Python
- javascript - 如何从具有多个文档 html 的网页中获取元素的选择器?
- amazon-web-services - 如何从 Postman 访问 API 网关的阶段变量