I have an Angular component which has an ion-searchbar. I'm using a template ref on the ngAfterViewInit hook to handle the searcbar native input through the Ionic's getInputElement() method:
// my-component.html
<ion-searchbar
...other inputs
#ionSearchbar
></ion-searchbar>
// my-component.ts
export class MyComponent implements AfterViewInit {
//...other inputs
@ViewChild("ionSearchbar") ionSearchBarRef: IonSearchbar
constructor() {}
async ngAfterViewInit() {
const ionSearchBarNativeInput = await this.ionSearchBarRef.getInputElement()
//... do something with the native input
}
}
The problem is when I run any test of that component I get the following error:
const ionSearchBarNativeInput = await this.ionSearchBarRef.getInputElement();
^
TypeError: Cannot read properties of undefined (reading 'getInputElement')
at MyComponent.ngAfterViewInit
The tests pass though, but I guess I have to mock somehow the ion-searchbar in order to allow the test run the logic inside ngAfterViewInit hook.
Any idea of how to do this with "@testing-library/angular?
Thanks in advance!