Angular 带订阅的浅单元测试

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
          })
   }

 }

我们使用了 shallow 进行测试，myservice 的订阅的 next 事件被另一个组件调用。 我们如何测试上面的代码块，因为我们是 mocking 服务内部测试。

  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方法，将逻辑集中在服务中，您可以更轻松地模拟它。

希望能帮助到你！