OnPushに設定したComponentのテストを実装する

Angular の高パフォーマンスな Component を実装する上で重要なのは ChangeDetection: ChangeDetectionStrategy.OnPush に設定して不要な変更チェックを走らせないようにすることが上げられます。しかしこれを設定すると Component のテストを書く時に変更されたプロパティが DOM に反映されず辛い思いをします。

そこで便利なのがこの関数。元は Github の Issue にあったものですが、これによって OnPush Component の変更反映を待つことができ、期待したテスト結果を得られます。

github.com

async function runOnPushChangeDetection<T>(cf: ComponentFixture<T>): Promise<any> {
  const cd = cf.debugElement.injector.get(ChangeDetectorRef);
  cd.detectChanges();
  return await cf.whenStable();
}