带有 HTTP 的 Angular.io 单元测试组件答案

【问题标题】：Angular.io unit test component with HTTP带有 HTTP 的 Angular.io 单元测试组件
【发布时间】：2017-08-10 14:23:49
【问题描述】：

背景

我有一个 angular4 组件（MemberListComponent），在 ngInit 期间将调用一个 http GET 请求以通过 MemberService 从后端获取列表成员。返回的成员将列在表中。 MemberService 被注入到 MemberListComponent 中并充当成员变量。

问题

现在，我想起草一个单元测试来验证显示返回成员的正确性。我应该创建一个 FakeBackend 来模拟 MemberService 和返回的成员来测试 MemberListComponent。

或者，我们是否有此用例的任何模式或示例。

控制单元测试的执行。

我们可以使用“BeforeEach”在每个测试用例之前执行一些逻辑。如果我想在特定测试用例之前执行一些逻辑，我们该如何实现呢？

非常感谢。

【问题讨论】：

标签： angular unit-testing karma-jasmine

【解决方案1】：

您可以为您的服务创建模拟或监视实际服务。参考testing a component with an async service的官方文档。

这就是您监视getQuote 的方法twainService 的方式（摘自官方文档，在您的测试的beforeEach 内）：

// get hold of your service instance
twainService = fixture.debugElement.injector.get(TwainService);

// on service call, return your test data
spy = spyOn(twainService, 'getQuote')
      .and.returnValue(Promise.resolve(testQuote));

如果您的服务返回的是 Observable，则需要将 Promise.resolve(...) 更改为 Observable.of(...)

【讨论】：

谢谢，金。您能否分享一些代码以供快速参考。
只需检查文档中的代码示例，例如"src/app/shared/twain.component.spec.ts (setup)" 用于监视您的服务
Kim，你的例子很有用，帮助我前进。我还有另一个问题——关于控制单元测试的执行。我们可以使用“BeforeEach”在每个测试用例之前执行一些逻辑。如果我想在特定测试用例之前执行一些逻辑，我们该如何实现？
如果它仅适用于一个测试用例，则在该测试用例中执行它。当然你可以把初始化放在它自己的方法中，然后调用那个方法。 before 和 beforeeach 仅用于共享初始化。