親コンポーネントのテストで属性バインディングの値を検査する

Question

<album-art>という名前の子コンポーネントを含む親コンポーネントのテスト仕様を作成しています。私はせずに結合の実際の値をテストするために望んでいる

<album-art [config]="myConfigY"></album-art> 

：場合、テストは失敗する

<album-art [config]="myConfigX"></album-art> 

：どのように私はconfig属性はそうのようなmyConfigXオブジェクトが割り当てられていることをテストすることができます子コンポーネントがインスタンス化されて何を受け取ったかを尋ねる必要があります。この要素の属性に何を渡しているのでしょうか？直接、親要素に問い合わせてください。

理想的には、私は以下の例のようなものを探していますが、[Object object]の代わりにmyConfigXオブジェクトを返します。インスタンス：

モック子コンポーネント（追加：

expect(fixture.nativeElement.querySelector('album-art').getAttribute('ng-reflect-config')); 

Answer 1

私が得ることができました最も近いが、子コンポーネントの超軽量のモックを作成するので、同じようにそのcomponentInstanceに対してそのDebugElementとテストを選択することですこれをテストモジュールの宣言に追加します）。

@Component({ 
    selector: 'album-art', 
    template: '', 
}) 
class MockAlbumArtComponent { 
    @Input() 
    config: AlbumArtConfig; 
} 

親コンポーネントテンプレート：

... 
<album-art [config]="myConfigX"></album-art> 
... 

アサーション：

expect(fixture.debugElement.query(By.css('album-art')).componentInstance.config).toBe(instance.myConfigX, 'correct config object passed'); 

あなたがの平等を確認することができ、この例のように、これはモックテンプレートas suggested hereで補間値をテストするよりも優れています実際のオブジェクト参照。

fixture.debugElement.query(By.css('album-art')).inputs.configのようなものにはアクセスできませんが、モックコンポーネントは必要ありません。