小编LHB*_*LHB的帖子

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

我的任务是为使用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>

Run Code Online (Sandbox Code Playgroud)

实际上,如果组件布尔变量'titleInputEdit'为true,则显示save-title-button,否则显示设置按钮.以下是导致问题的测试用例:

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

Run Code Online (Sandbox Code Playgroud)

我只是"模拟"组件变量,调用.detectChanges(),然后测试是否存在按钮.但是,测试失败并显示"预期的空值不为空".

通过各种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);
});

Run Code Online (Sandbox Code Playgroud)