We are implementing TestBed.overrideComponent() to substitute a component with custom behavior.
TestBed.overrideComponent(CoolComponent, {
set: {
template: '<div id="fake-component">i am the fake component</div>',
selector: 'our-cool-component',
inputs: [ 'model' ]
}
})
This manipulated component contains a ViewChild element that we configure in the ngOnInit lifecycle method:
@Component({
selector: 'our-cool-component',
templateUrl: 'cool.component.html'
})
export class CoolComponent implements OnInit, OnDestroy {
@Input() model: SomeModel
@ViewChild(CoolChildComponent) coolChildComponent;
ngOnInit() {
this.coolChildComponent.doStuff();
}
}
The CoolComponent is encapsulated within a larger Wrapper component.
During fixture.detectChanges() on the Wrapper fixture, an issue arises when accessing the CoolComponent, as calling doStuff() fails due to CoolChildComponent being undefined.
We are exploring options to mock or stub the CoolChildComponent of the CoolComponent. Unfortunately, directly referencing it from the Wrapper is proving challenging since it is only accessible through the template, not as a direct property of the component.