角度2のOnPushコンポーネントのテスト

Question

OnPush変更検出ストラテジでコンポーネントをテストする際に問題があります。

テストは、私はそれが期待どおりに動作Default戦略を使用している場合、この

it('should show edit button for featured only for owners',() => { 
    let selector = '.edit-button'; 

    component.isOwner = false; 
    fixture.detectChanges(); 

    expect(fixture.debugElement.query(By.css(selector))).toBeFalsy(); 

    component.isOwner = true; 
    fixture.detectChanges(); 

    expect(fixture.debugElement.query(By.css(selector))).toBeTruthy(); 
}); 

のようになりますが、OnPushでisOwnerへの変更はdetectChangesへの呼び出しによって再レンダリングされていません。何か不足していますか？

Answer 1

あなたはギュンターの答えangular 2 change detection and ChangeDetectionStrategy.OnPush @この素晴らしいをチェックアウトするなら、あなたは以下のようにイベントハンドラを使用して、それを回避することができます。

const fixture = TestBed.overrideComponent(TestComponent, {set: {host: { "(click)": "dummy" }}}).createComponent(TestComponent); 
// write your test 
fixture.debugElement.triggerEventHandler('click', null); 
fixture.detectChanges(); 

は、ここであなたが入力を変更したこと、角伝える必要がありますPlunker Example

Answer 2

ですコンポーネントのプロパティ。理想的な世界で、あなたは角（https://github.com/angular/angular/issues/12313）にバグがあるため、動作しないこと、残念ながら

component.isOwner = false; 
fixture.changeDetectorRef.markForCheck(); 
fixture.detectChanges(); 

で

component.isOwner = false; 
fixture.detectChanges(); 

を置き換えます。ここに記載されている回避策の1つを使用できます。