angular - Angular 单元测试 - 在 ViewChild 中引用/模拟指令
问题描述
你如何存根/模拟被读取为的指令/组件ViewChild
?
例如,使用 angular.io 中的简单指令:
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor() { }
}
假设我正在测试AppComponent
并读取HighlightDirective
使用ViewChild
:
@ViewChild(HighlightDirective) theHighlightDirective: HighlightDirective
存根指令是:
@Directive({
selector: '[appHighlight]'
})
export class StubbedHighlightDirective {
constructor() { }
}
由于组件正在尝试读取HighlightDirective
,即使您StubbedHighlightDirective
在单元测试中声明,theHighlightDirective
也会undefined
.
例子:
it('HighlightDirective is defined', () => {
// This test fails
expect(component.theHighlightDirective).toBeDefined();
});
如果您忽略 tslint 中的某些内容或使用as
关键字,则可以解决此问题:
Version 1: Just ignore some things in tslint so compiler doesn't complain
it('HighlightDirective is defined', () => {
// Compiler will typically complain saying that
// StubbedHighlightDirective isn't assignable to type of HighlightDirective
component.theHighlightDirective = new StubbedHighlightDirective();
// this passes
expect(component.theHighlightDirective).toBeDefined();
});
Version 2: Use "as" keyword
it('HighlightDirective is defined', () => {
// Actually compiler will still complain with warnings
component.theHighlightDirective = new StubbedHighlightDirective() as HighlightDirective;
// this passes
expect(component.theHighlightDirective).toBeDefined();
});
有没有另一种方法可以干净地剔除这些类型的 ViewChild 引用?
解决方案
问题是您正在使用一个类来查找孩子,并且该类已被您的存根替换。exportAs
您可以在指令(文档、博客文章)中使用匹配的链接,以确保真实版本和存根具有相同的名称。
在原始指令装饰器中:
@Directive({
selector: '[appHighlight]',
exportAs: 'appHighlight'
})
export class HighlightDirective {
在存根指令中:
@Directive({
selector: '[appHighlight]',
exportAs: 'appHighlight'
})
export class StubbedHighlightDirective {
然后在使用指令的模板中:
<div appHighlight #appHighlight="appHighlight">
完成所有这些后,您需要更新@ViewChild
定义以使用字符串而不是类:
@ViewChild('appHighlight') theHighlightDirective: HighlightDirective
推荐阅读
- c# - dotnet publish 在临时目录而不是 exe 目录中设置程序集路径
- visual-studio-code - 如何在 VSC 上开始使用 OCaml?
- reactjs - 使用 id 在 reactjs 中显示求职者
- outlook - 如何通过 IMAP 或 POP3 连接到本地 Outlook
- javascript - 缺少图像取决于 html2canvas (html2pdf) 中的比例
- android - Autocompletetextview 进入弹出窗口使我的 APP 崩溃
- javascript - 节点服务器在 Windows 10 中启动服务器花费了太多时间
- r - R 闪亮的反应单选按钮
- powerapps - 缺少使用 Sql 的默认电源应用程序的添加、编辑和删除功能
- javascript - 如何从 JSON fromat 中提取特定字段和值