檢查父組件的測試中綁定的屬性的值

我正在爲包含名爲<album-art>的子組件的父組件編寫測試規範。如何測試該config屬性已經被分配了類似這樣myConfigX對象：檢查父組件的測試中綁定的屬性的值

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

我希望測試結合的實際值，而不：

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

如果測試失敗了必須實例化/模擬子組件以詢問它接收到的內容。更直接問：「你有什麼傳遞給該元素的屬性？」父組件的情況下的。

理想情況下，我正在尋找的東西像下面的例子，但不是返回[Object object]它會返回myConfigX對象例如：

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

最近我已經能夠得到的是創建子組件的超輕質模擬，選擇針對其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之類的東西，但這種情況你不需要模擬組件！

2016-09-27 12:06:39

回答