Angular 5 - Jasmine 测试：模拟对实际 HTTP 请求的 Bad Response 错误

Question

首先，作为实习的一部分，我仍在学习 Angular 4 的基础知识；这对我来说还是新鲜事。

无论如何，我想模拟我在 Angular 组件的控制器中发出的实际 HTTP 请求的错误，这样做后，我可以检查 Bootstrap出现错误警报。（假设它在 div 中，id "updateErrorMessage"）我不想将后端编程为立即 return 错误响应，而是想使用 Jasmine 和 Karma 测试框架来模拟它。

我不能确切地说出组件是什么，但是更通用的组件是，例如，来自名为 "UpdateIndividualsPage."

的组件的 making a PUT request to update the individuals table on a Salesforce Industries database with JSON data

基于this Salesforce developer question here, and this documentation page，在组件函数中发出请求的样板代码类似于：

this.http.post("https://na7.salesforce.com/services/apexrest/clinic01/v1/individual/", this.myJSON, options).map(response => {

}).catch((error: any) => {

}).subscribe();

在响应出现错误时，我会设置

errorOccurredUponUpdatingIndividualsDatabase = true

假设 'errorOccurredUponUpdatingIndividualsDatabase' 是 UpdateIndividualsPage 组件中的属性。

在 updateindividualspage.component.spec.ts 文件中，嵌套在 describe 函数调用中，我希望测试用例的样板类似于：

it('should display update error message upon sending improper data to Salesforce database', () => {
});

基本上，我测试中的最后一个函数调用是，

expect(root_Element_Of_Component.querySelector('#updateErrorMessage').innerText).toBe('Error occurred upon updating the Salesforce Industries individuals database.');

我确实阅读了一些关于创建模拟 HTTP 错误的其他 Whosebug 问题，但我不完全确定，因为我还是对此不熟悉。

我确实尝试了一些，除了我只得到 "Failed: Expected one matching request for criteria ..."，这意味着我有一个 URL 不匹配。

有没有办法让这个测试用例向该服务器发送实际的 HTTP 请求，但这个测试框架创建了一个模拟错误响应？或者我真的需要创建一个 MockBackend 实例并让它将错误作为 HTTP 响应发送回前端，以在 errorOccurredUponUpdatingIndividualsDatabase 上举起标志以显示 Bootstrap 警报？

顺便说一下，后端已经实现了。

Answer 1

除其他方法外，最简单的方法可能是创建您自己的后端页面，return 为您提供错误代码（404 等）。

Answer 2

我更喜欢在单元测试中模拟 HTTP 调用。这样，我消除了其他变量。实际上你应该消除除你正在测试的组件之外的所有其他变量。

要模拟 HTTP 调用，您可以使用 nock。

Angular 5 - Jasmine 测试：模拟对实际 HTTP 请求的 Bad Response 错误

Angular 5 - Jasmine Testing: Simulating a Bad Response error to an actual HTTP request

unit-testing

httpresponse

http-error

jasmine

angular