angular - .detectChanges() 在 Angular 测试中不起作用

Question

我的任务是为使用 Angular 开发的聊天应用程序编写测试。下面是我目前正在为其编写测试的 Angular 模板代码片段:

<div class="title-menu-container" fxLayoutAlign="center center">
  <button id="save-title-button" mat-icon-button *ngIf="titleInputEdit; else settings">
    <mat-icon class="secondary-text" (click)="saveTitle(titleInput.value)">check</mat-icon>
  </button>
  <ng-template #settings>
    <button mat-icon-button [matMenuTriggerFor]="menu" [disabled]="!(isGroupConversation$ | async)">
      <mat-icon class="secondary-text">settings</mat-icon>
    </button>
  </ng-template>
</div>

本质上，如果组件 bool 变量“titleInputEdit”为真，则显示保存标题按钮，否则显示设置按钮。这是导致问题的测试用例:

it('save title button should be present', () => {
  component.titleInputEdit = true;
  fixture.detectChanges();
  expect(fixture.nativeElement.querySelector('#save-title-button')).not.toBe(null);
}); 

我只是“模拟”组件变量，调用 .detectChanges()，然后测试按钮是否存在。但是，测试失败并显示“Expected null not to be null.”。

通过各种 console.log 调用，我已确认 component.titleInputEdit 已正确设置为 true，但 fixture.nativeElement 不包含正确的按钮。

我注意到的一些事情:

• 如果我将“component.titleInputEdit = true”行移到我的 beforeEach 中并将其删除，并且从我的测试中调用 detectChanges()，则测试通过。

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    component.titleInputEdit = true
    fixture.detectChanges();
    debugElement = fixture.debugElement;
  });     
  
  it('save title button should be present', () => {
      expect(fixture.nativeElement.querySelector('#save-title-button')).not.toBe(null);
  });
  

• 如果我从 beforeEach() 中删除 .detectChanges() 调用，并将其保留在测试用例中，则测试通过。

我是 Angular 的新手，但我发现有人遇到过类似的问题。在尝试了这些帖子中推荐的一些内容后，我仍然摸不着头脑。更奇怪的是，我已经为其他 Angular 组件编写了测试，这些组件可以毫无问题地做几乎完全相同的事情。

Angular 文档中提供的示例也显示了非常相似的内容:

it('should display a different test title', () => {
  component.title = 'Test Title';
  fixture.detectChanges();
  expect(h1.textContent).toContain('Test Title');
});    

Answer 1

原来这是由于在组件中使用了ChangeDetectionStrategy.OnPush。使用 OnPush 只允许您调用 .detectChanges() 一次，因此后续调用将无法执行任何操作。我对 Angular 不够熟悉，无法完全理解原因。

我能够通过覆盖我的 TestBed 配置中的 ChangeDetectionStrategy 来产生所需的行为。

TestBed.configureTestingModule({
    imports: [],
    declarations: [TestComponent],
    providers: []
  })
    .overrideComponent(TestComponent, {
      set: { changeDetection: ChangeDetectionStrategy.Default }
    })
    .compileComponents();