使用 @Input 和服务可观察订阅进行组件单元测试答案

【问题标题】：Component unit testing with @Input with service observable subscription使用 @Input 和服务可观察订阅进行组件单元测试
【发布时间】：2021-09-01 17:45:08
【问题描述】：

我尝试使用 @Input 测试（Jasmine/Karma）一个组件，该组件订阅了服务 Observable 并且它是使用 combineLatest 的自己的属性，并且出现此错误：

*TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.*

我的代码如下所示：

服务

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class Service {

  private _servicePropertySub = new BehaviorSubject<[]>([]);
  public get servicePropertyObs (): Observable<[]> {
    return this._servicePropertySub .asObservable();
  }
}

组件

//...
@Component({
  //...
})
export class MyComponent implements OnDestroy {
private _componentProp = BehaviorSubject<[]>([]);
public get componentPropObs (): Observable<[]> {
        return this._componentProp.asObservable();
      }

public sum = 0;

@Input()
  public set myInput(value: V) {
    if (v) {
       combineLatest([
            this.service.servicePropertyObs,
            this.componentPropObs 
          ]).subscribe(([one, two]) => {
            this.sum = one + two;
        });
    }
  }

 constructor(private service: Service) {}


//...

Observables 中的数字仅用于此示例。

我想用 @Input 测试这个组件，但我总是有一个关于 undefined (error above) observable 的错误。我想这是因为我为该服务创建了间谍。在这种情况下应该如何使用 Input 中的服务来创建这个测试？

【问题讨论】：

标签： angular unit-testing jasmine karma-jasmine

【解决方案1】：

好吧.. 我会尽量忽略您在输入设置器中订阅的事实.. 并且此订阅甚至没有完成，从而造成严重的内存泄漏。您收到该错误的原因是您的间谍没有 servicePropertyObs 属性。最好只使用模拟提供者并将间谍附加到那里的任何东西上。所以在你的测试代码中，你需要添加以下提供者：

{ provide: Service, useValue: { servicePropertyObs: of(1) } }

【讨论】：

感谢您的回复以及对我的代码的附加 cmets！