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

Question

我尝试使用 combineLatest 测试（Jasmine/Karma）一个带有 @Input 的组件，该组件订阅了服务 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 测试这个组件，但我总是有一个关于未定义（上面的错误）可观察到的错误。我想这是因为我为该服务创建了间谍。在这种情况下，应如何使用输入中的服务创建此测试？

Answer 1

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

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

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

Component unit testing with @Input with service observable subscription

angular

unit-testing

jasmine

karma-jasmine