测试带有订阅的打字稿函数答案

【问题标题】：Testing a typescript function with a subscribe in it测试带有订阅的打字稿函数
【发布时间】：2019-01-30 00:52:27
【问题描述】：

所以我正在使用 Jasmine/Karma 进行测试，并且正在使用 Angular 4。我正在尝试测试如下所示的函数：

如您所见，this.name 分配没有被触及。我尝试过测试：

it('should make sure name is set', () => {
  component.retrievePageInfo();
  expect(component.name).toBeDefined();
});

但目前尚未定义。我不确定如何等待它完成。我也试过：

it('should make sure name is set', () => {
  component.retrievePageInfo().subscribe(art => {
    expect(component.name).toBe(art["name"]);
  });
});

但我收到错误消息“'void' 类型上不存在属性 'subscribe'。”但是，如果我将功能更改为：

retrievePageInfo() {
  return this.httpClient.get("/api/art/" + this.art_id)
  .subscribe(art => {
    this.name = art['name'];
  });
}

我收到错误消息“‘订阅’类型上不存在属性‘订阅’。”但我需要在这里订阅。

请帮忙！

编辑：一个粗略的例子会很好，因为我似乎无法做到这一点。我目前正在尝试将其拆分为一个返回可观察对象的函数和另一个使用它的函数，但我的测试仍然没有捕捉到它

编辑：这是我的最新尝试：我已经导入 fakeAsync 并打勾

it('should set name value', fakeAsync(() => {
    expect(component.name).toBeUndefined();
    spyOn(component, "retrievePageInfo");
    component.retrievePageInfo();
    tick();
    fixture.detectChanges();
    expect(component.name).toBeDefined();
}));

但我仍然遇到“预期未定义要定义”的错误。

【问题讨论】：

通常，对HttpClient 的调用将在单独的服务中进行。然后，您可以返回 Observable（而不是 Subscription），并在您的组件中订阅。就目前而言，您可以在 retrievePageInfo 上调用 subscribe，因为它不会返回 Observable
我明白了。我没有用在这里创建服务，但我想无论如何我都可以将其分解为两个功能，我认为那将解决我的问题。是吗？

标签： angular typescript testing jasmine karma-jasmine

【解决方案1】：

你需要看看异步单元测试：

 it('#getObservableValue should return value from observable',
    (done: DoneFn) => {
    service.getObservableValue().subscribe(value => {
      expect(value).toBe('observable value');
      done();
    });
  });

以上代码来自文档：https://angular.io/guide/testing#service-tests

【讨论】：

当我不返回可观察对象时，您是否有示例说明如何执行此操作？当我已经在函数中进行订阅时，.subscribe 将不起作用@danday74