如何从父组件访问子组件的元素以测试 Angular 2？答案

【问题标题】：How do I access elements of child component from parent for testing Angular 2?如何从父组件访问子组件的元素以测试 Angular 2？
【发布时间】：2017-09-04 12:10:47
【问题描述】：

我正在尝试从父组件中获取子组件的元素，以便在 Karma-Jasmine 中进行测试。我有一个带有联系表单的组件（父级），它又具有一个用户名和密码组件（子级），用于验证表单和显示错误消息。现在我需要从父组件测试子组件的警报消息。我试过了

   let parent = fixture.debugElement.query(By.css('input-component'));
   let child = parent.query(By.css('alert'));

但我没有得到任何结果。它只是返回父 HTML。我找到了 E2E 测试解决方案here，但它不适用于单元测试。

我怎样才能完成任务。这是 Plunker 用于解释我的场景。

【问题讨论】：

“警报消息”是指alert() 函数调用吗？
@smnbbrv 无标签
你应该至少发布规范和组件文件的整个代码，最好是 plunkr
@smnbbrv 我已按照您的建议添加了 plunker。
您是否尝试将fixture.detectChanges(); 也放在component.parentForm.controls['childUser'].reset(); 之后？

标签： html angular unit-testing karma-jasmine

【解决方案1】：

我找到了解决问题的方法。似乎在测试时未启用属性“脏”和“触摸”。所以我在重置或修改表单值后通过添加以下代码手动启用它们...

component.parentForm.controls['childUser'].markAsDirty();
component.parentForm.controls['childUser'].markAsTouched();

我不知道这是否是让它发挥作用的正确方法。但我找不到任何其他解决方案。谢谢你。希望这对某人有所帮助。

【讨论】：