当行为测试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，那么在测试其他组件时，只需创建您的商店，发送您的事件并查看您的组件是否正在测试正确回应那些“商店事件”。

当您测试发送事件的第一个组件时，请窥视商店并确认它正在接收来自第一个组件的正确事件。

如果你的测试确认了第一部件正常发送的事件，你可以确认的是，第二部分正确地响应事件，那么你有正确的单元通过商店测试你的组件交互的两侧。