Question

我对单元测试比较陌生。我想知道如何测试一个智能组件是否将@Input()传递给一个愚蠢的组件（使用Angular 4 +）。

首先，我考虑检查属性是否存在：

it('should have some data', async(() => {
  expect(component.data).toBeTruthy();
}));

然而，我遇到了两个问题：1）告诉我data是否属实，但并不一定意味着它被作为输入传递给我的哑组件; 2）如果data属性不存在，则测试套件不会被执行。

任何提示？有没有更好的方法来解决这个问题？感谢。

Answer 1

由于输入绑定作为更改检测的一部分进行处理，您基本上可以更改父组件上绑定中使用的属性，然后在父组件上运行detectChanges()并检查子组件中的输入属性是否已更改。这些方面的东西：

parentComponent = TestBed.createComponent(BannerComponent);
const childComponentEl = fixture.debugElement.query(By.directive(ChildComponent));
const childComponent = childComponentEl.injector.get(ChildComponent);

it('should have some data', async(() => {
  parentComponent.componentInstance.boundProperty = 3;
  parentComponent.detectChanges();
  expect(childComponent.inputProperty).toBe(3);
}));

您可以阅读更多有关输入绑定更新的原因：

测试组件是否正在将@Input传递给另一个

1 个答案: