带有 ChangeDetectionStrategy.OnPush 的 Angular 单元测试不起作用

Question

我有这个简单的组件。

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-spinner',
  template: `
    <ng-container *ngIf="loading; else valueTpl">
      <strong>loading....</strong>
    </ng-container>
    <ng-template #valueTpl>
      <span>{{ value }}</span>
    </ng-template>
  `
})
export class SpinnerComponent {
  @Input() loading = false;
  @Input() value!: string;
}

在运行中它很好用，但是当
我去测试测试失败

it('should show spinner when loading true', () => {
    component.loading = true;
    fixture.detectChanges();
    const strong = debugElement.query(By.css('strong'));
    const el: HTMLElement = strong.nativeElement;
    expect(el).not.toBeNull();
  });

什么是测试组件的正确方法
使用 ChangeDetectionStrategy.OnPush？

更新

等待更好的解决方案我解决了
和:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [SpinnerComponent]
    })
      .overrideComponent(SpinnerComponent, {
        set: { changeDetection: ChangeDetectionStrategy.Default }
      })
      .compileComponents();
  }));

Answer 1

有效的是覆盖组件的 将检测更改为默认值 并提供 ComponentFixtureAutoDetect 为真 .

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [SpinnerComponent],
    providers: [
      {provide: ComponentFixtureAutoDetect, useValue: true}
    ]
  })
  .overrideComponent(SpinnerComponent, {
    set: { changeDetection: ChangeDetectionStrategy.Default }
  })
  .compileComponents();

  fixture = TestBed.createComponent(SpinnerComponent);
  component = fixture.componentInstance;
}));

现在 fixture.detectChanges() 应该在测试中工作。