當行爲測試Angular Components可以查找另一個Component的實例嗎？

Question

我正在測試一個角度工具欄組件，它通過@ngrx/store觸發狀態改變操作。

我有另一個組件訂閱了這些狀態更改，以便更新其自身的內部狀態。

所以在karma/jasmine單元測試中，我觸發了一個工具欄按鈕的點擊。然後，我只想在另一個組件上spy並聲明它的變更函數被調用。

所以現在的問題是，不改變與ViewParent/ViewChild指令在現有的組件只是其中OFC將被視爲代碼氣味測試，我怎麼查找的角度成分的實例？

Answer 1

可以獲取子組件的正確實例，以便像這樣測試行爲。

您可以查詢父通過指令來發現孩子：

import { By } from '@angular/platform-browser'; 
... 
let childComponentInstance: ChildComponent; 

// After setting up your component in the TestBed... 
parentComponentFixture = TestBed.createComponent(ParentComponent); 
... 

// Reference the child component from your parent component fixture 
childComponentInstance = parentComponentFixture 
    .debugElement 
    .query(By.directive(ChildComponent)) 
    .componentInstance; 

然後，您可以使用您的測試方法childComponentInstance。

正如你所說，這不再是一個真正的單元測試和多行爲測試。

（可能需要調用detectChanges()在parentComponentFixture正確加載取決於什麼被綁定到它的孩子）

Answer 2

我認爲你可能會過度看待事物。

@ ngrx/store允許您訂閱存在於任何組件樹之外的此通用存儲。因此，如果您想將事件發送到@ ngrx/store並訂閱到其他組件中的@ ngrx/store，那麼在測試其他組件時，只需創建您的商店，發送您的事件並查看您的組件是否正在測試正確迴應那些「商店事件」。

當您測試發送事件的第一個組件時，請窺視商店並確認它正在接收來自第一個組件的正確事件。

如果你的測試確認了第一部件正常發送的事件，你可以確認的是，第二部分正確地響應事件，那麼你有正確的單元通過商店測試你的組件交互的兩側。