Question

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

无论如何，我想模拟一个我在Angular组件的控制器中发出的实际HTTP请求的错误，这样做时，我可以检查是否出现Bootstrap错误警报。（让我们假设它位于id为“ updateErrorMessage”的div中）我想使用Jasmine and 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组件中的一个属性。

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

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错误的其他Stackoverflow问题，但我不确定，因为我仍然是新手。

Jasmine/Karma testing Angular 5 HTTP responses

mock http request in Angular 4

In Angular 5 testing, how to mock an http error?

我确实尝试了similar to the last test case in the initial code given in this StackOverflow question，但是我只收到“失败：期望标准有一个匹配请求...”，这意味着我的URL不匹配。

此测试用例是否可以将实际的HTTP请求发送到该服务器，但是此测试框架会创建模拟错误响应？还是我实际上是否需要创建一个MockBackend实例，并使其作为HTTP响应将错误发送回前端，以在errorOccurredUponUpdatingIndividualsDatabase上引发标志以显示Bootstrap警报？

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

Answer 1

在其他方法中，最简单的方法可能是创建自己的后端页面，这些页面为您返回错误代码（404等）。

Answer 2

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

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

Angular 5-茉莉花测试：模拟对实际HTTP请求的错误响应错误

2 个答案: