Looking to create unit tests for an Angular component that can toggle the visibility of contents passed as input. These inputs are expected to be defined as TemplateRef.
my-component.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;
}
}
my-component.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>
I'm trying to test whether the content passed through the "body" input is visible or not, but I'm struggling with how to instantiate a "my-component" with a TemplateRef input in Jasmine.
The Angular documentation provides information on passing an input in the unit test script, but because TemplateRef is an abstract class, I'm unsure how to proceed.
my-component.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();
});
....