行为测试Angular Components时，是否可以查找另一个Component的实例？

Question

我正在测试Angular工具栏组件，该组件通过@ngrx/store触发状态更改操作。

我有另一个订阅这些状态更改的组件，以便更新自己的内部状态。

因此，在karma/jasmine单元测试中，我触发了工具栏按钮的单击。我只是想在另一个组件上spy并断言它的变更函数被调用。

所以问题是，如果没有用ViewParent/ViewChild指令改变现有的组件只是为了测试哪个ofc会被认为是代码嗅觉，如何查找Angular Component的实例？

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，那么在测试其他组件时，只需创建您的商店，发送您的事件并查看您的组件是否正在测试中回应那些商店活动＆＃39;正常。

当您正在测试发送活动的第一个组件时，请监视商店并确认它已从您的第一个组件接收正确的活动。

如果您的测试确认第一个组件正在正确发送事件，并且您可以确认第二个组件正确响应事件，那么您已通过商店对组件交互的两侧进行了正确的单元测试。