unit-testing - 单元测试规范中的 *ngIf 异步管道无法正确渲染元素

Question

我想要做的是获取按钮的引用以模拟单击事件，我的主要问题是按钮未呈现导致组件未检测到那时应该填充的列表的更改.

这是我的单元测试代码：

it('should add more cases when load more cases button is clicked', () => {
    spyOn(component, 'loadMoreCases');
    
    component.cases$.subscribe((cases) => {
      fixture.detectChanges();
      let buttons = fixture.debugElement.nativeElement.querySelectorAll('[nz-button]') as HTMLButtonElement[];
      buttons[1].click();

      expect(component.loadMoreCases).toBeCalled;
    });
    
    component.ngAfterViewInit();
    fixture.detectChanges();
  
  });

这是 HTML 中的 *ngIf 部分：在 此处输入图像描述

这是在主组件中视图初始化之后调用的服务：

 ngAfterViewInit(): void {
    this.caseService
      .getPaginatedCases(1, 15)
      .pipe(take(1))
      .subscribe((cases) => {
        this.cases$.next(cases.list);
        this.amountOfCases = cases.total;
      });
  }

我只想知道如何告诉 Angular 案例已经有一些模拟数据并通知组件重新渲染，以便能够访问它在 *ngIf 中的按钮，我一直在尝试一切，fakeAsync() 使用滴答功能，异步使用完成功能，但没有任何效果。