angular - Angular - 如何测试子组件是否收到了正确的属性？

Question

使用这个 html：

<app-parent>
    <app-child name="john" age="12"></app-child> 
</app-parent>

我想创建一个测试来验证app-parent是否已将 name 和 age 正确告知app-child。app-child 将是一个模拟组件。

正确的做法是什么？

例如，我知道我可以使用：

const parent = fixture.debugElement.query(By.css('app-parent'));
parent.componentInstance // { name, age }

但它看起来并不是最好的方法。

Answer 1

假设它是这样的：

<app-parent>
  <app-child [name]="name" [age]="age"></app-child>
</app-parent>

我只是确保component.name并component.age拥有准确的值，而不是测试子组件是否接收到正确的值，因为 Angular 已经测试了父子组件的绑定。我们应该只测试我们的代码，而不是 Angular 的实现/代码。