angular - 如何对以 TemplateRef 作为输入的 Angular 组件进行单元测试?
问题描述
我正在尝试为 Angular 组件编写单元测试,该组件可以隐藏/显示作为输入传递给组件本身的一些内容。预期的输入定义为 TemplateRef。
我的组件.component.ts
@Component({
selector: "my-component",
templateUrl: "./my-component.component.html",
styleUrls: ["./my-component.component.scss"],
exportAs: "mycomponent"
})
export class MyComponent {
private _expanded = false;
@Input()
set expanded(value: boolean) {
this._expanded = value;
}
@Input()
body: TemplateRef<any>;
@Input()
handler: TemplateRef<any>;
constructor() {}
toggleView() {
this.expanded = !this._expanded;
}
}
我的组件.component.html
<div class="wrap">
<!-- Header -->
<main #header>
<header (click)="toggleAccordion()">
<div class="handler">
<ng-container [ngTemplateOutlet]="handler">
</ng-container>
</div>
<i class="icon icon-expand" [ngClass]="{ 'icon-expand': _expanded, 'icon-collapse': !_expanded }"></i>
</header>
</main>
<!-- Body -->
<div class="body" *ngIf="_expanded">
<ng-container [ngTemplateOutlet]="body"></ng-container>
</div>
</div>
我想测试通过输入“body”传递的内容是否可见,但我无法弄清楚如何在 jasmine 中使用 TemplateRef 输入实例化“my-component”。
Angular 文档解释了如何在单元测试脚本上传递输入,但由于 TemplateRef 是一个抽象类,所以我无法实例化任何 TemplateRef 对象,我不知道如何管理它。
我的组件.component.spec.ts
...
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
component.body = /* What should I put here? */;
fixture.detectChanges();
});
....
解决方案
我会尝试给你一个演示代码,你可以进一步扩展
基本上,您需要以不同的方式对此进行测试。由于您无法在不使用TemplateRef
其他组件的情况下创建组件,因此您需要创建一个包装器组件并通过为 WrapperComponent 编写测试用例来测试您的组件
@Component({
template: `
<ng-template #div1>Something here</ng-template>
<ng-template #div2>Many things here</ng-template>
<my-component [expanded]="expandedVal" [body]="div1" [handler]="div2"> </my-component>
`,
})
class WrapperComponent {
@ViewChild(MyComponent, { static: true }) appComponentRef: MyComponent;
public expandedVal = true;
}
describe('MyComponent', () => {
let app: MyComponent;
let fixture: ComponentFixture<WrapperComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [WrapperComponent, MyComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WrapperComponent);
const wrapperComponent = fixture.debugElement.componentInstance;
app = wrapperComponent.appComponentRef; // this is where you get "MyComponent" component for testing
fixture.detectChanges();
});
it('should create the app', async(() => {
expect(app).toBeDefined();
}));
});
推荐阅读
- android - 在 kotlin android 中获取 sim 卡号的检查权限运行时?
- java - Java / 从 Observable 转换
- > 列出
- java - 通过maven构建cxf Web服务(java2wsdl)时出现空指针异常
- c - 将字符数组中的字符放入字符串中,直到找到特定字符
- powerbi - Power BI - 根据输入创建基于事务的表
- excel - 为什么触发组合框的 AfterUpdate() 事件时列表框选择不起作用?
- ios - iphone 6 swift 4.2中的视频冻结
- c# - ImageMagick Sharp 比较过于敏感
- php - 如何在锚标签的标题中放置 yii2 表单错误
- java - 我得到了`DSRA9122E:com.ibm.ws.rsadapter.jdbc.WSJdbcConnection@d3t7e556 不包装任何类型为 oracle.jdbc.OracleConnection 的对象