我正在尝试为 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 输入的“我的组件”。
The Angular documentation explains how to pass an input在单元测试脚本上,但由于我无法实例化任何 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();
}));
});
关于angular - 如何对以 TemplateRef 作为输入的 Angular 组件进行单元测试?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56992167/