使用 ng-mocks，如何渲染未由任何指令或组件包装的模板？

Question

我正在尝试测试一个简单的 Angular 组件场景。我有一个组件，其中有一个呈现一些内容的模板。这个模板以后可以用于任何事情。

我想编写一个测试来验证此模板的内容。我正在使用 ng-mocks。 ng-mocks 文档有很多关于如何处理由组件包装或由指令提供的模板的示例。但它不会告诉您如果模板是“无父级”的、单独位于组件视图中、没有任何指令或包装组件的情况下如何执行此操作。

这是我的组件模板的示例

<ng-template #tpl>{{ whatever }} </ng-template>

我想使用 ng-mocks 找到对此模板的引用，然后渲染它。我找不到方法来做到这一点，因为 ng-mocks 的

render

函数需要一个模拟的组件实例作为第一个参数。

我设置了这个 stackblitz 来演示我想要实现的目标。我错过了什么？

谢谢！

Answer 1

这是一个好问题，但是

ng-mocks

这样不行。

要渲染模板，

ng-mocks

需要访问其

ViewContainerRef

。通常，组件或指令具有对模板的引用。如果组件或指令已被模拟，则

ng-mocks

也有此引用，并且可以在构建过程中创建

ViewContainerRef

并渲染和隐藏模板。

您的示例中有两个问题：

• TargetComponent

  和

  tpl

之间没有参考
• ref 应该属于模拟组件/指令

但是，因为您的组件负责渲染并且它没有被模拟，所以渲染应该通过组件的接口完成。