Question

我正在为包含名为<album-art>的子组件的父组件编写测试规范。如何测试config属性是否已分配myConfigX对象，如下所示：

<album-art [config]="myConfigX"></album-art>

如果出现以下情况，测试将失败：

<album-art [config]="myConfigY"></album-art>

我希望测试绑定的实际值，而不必实例化/模拟子组件来询问它收到了什么。更多的是直接询问父组件“你传递给这个元素的属性的是什么？”。

理想情况下，我正在寻找类似下面示例的内容，但不是返回[Object object]而是返回myConfigX对象实例：

expect(fixture.nativeElement.querySelector('album-art').getAttribute('ng-reflect-config'));

Answer 1

我能够获得的最接近的是创建子组件的超轻量级模拟，选择其DebugElement并对其componentInstance进行测试，如下所示：

模拟子组件（将其添加到测试模块的声明中）：

@Component({
    selector: 'album-art',
    template: '',
})
class MockAlbumArtComponent {
    @Input()
    config: AlbumArtConfig;
}

父组件模板：

...
<album-art [config]="myConfigX"></album-art>
...

断言：

expect(fixture.debugElement.query(By.css('album-art')).componentInstance.config).toBe(instance.myConfigX, 'correct config object passed');

这比在模拟模板as suggested here中测试插值更好，因为在这个例子中你可以检查实际对象引用的相等性。

遗憾的是，您无法访问类似fixture.debugElement.query(By.css('album-art')).inputs.config的内容，在这种情况下，您将不需要模拟组件！