Question

我通过与RxJS订户的服务进行了组件间通信。

预订此组件的组件配置如下：

export class MyComponent implements OnInit, OnDestroy {
  constructor(
    private myService: myService,
    private datePipe: DatePipe
  ) {}

  ngOnInit(): void {
    this.mySubscription = this.myservice
      .getSubject()
      .subscribe(() => {
          //DO..SOMEYHING
          })
   }

 }

我们正在使用浅层进行测试，而myservice的订阅的下一个事件由另一个组件调用。我们正在测试内部的服务时，如何测试以上代码块。

  beforeEach(async () => {
    shallow = new Shallow(MyComponent, MyModule)
      .mock(MyService, {

        getCount: () => of(25)
      })
  });

我们无法在测试中发送myservice.setSubject，而这会触发ngInit部分中的代码。

Answer 1

我想请您发布服务代码，但我将尝试猜测该主题的使用不是最推荐的（可能是您自己的原因）。

我将提供如下服务：

export class MyService {
    private subject = new Subject<number>();

    updateCount(n: number) {
        this.subject.next(n);
    }

    getCount(): Observable<number> {
        return this.subject.asObservable();
    }
}

在组件方面，在ngOnInit方法中，我不会检索到整个主题，但是可以观察到该主题，并且订阅将如下所示：

this.myservice
      .getCount()
      .subscribe(() => {
          //DO..SOMEYHING
          })

您提到下一个订阅是由另一个组件调用的。现在，您可以在服务上使用 updateCount 方法，将服务中的逻辑集中起来，并且可以对其进行简化。

希望有帮助！

带订阅的角度浅单元测试

1 个答案: