In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet:
Here is the HTML:
<ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch>
And here is the Typescript .spec file code:
it('clicking slider changes page state', async () => {
fixture.detectChanges();
spyOn(component, 'togglePageState');
let slider = fixture.debugElement.query(By.css('#EditSwitch')).nativeElement;
slider.change();
fixture.whenStable().then(() => {
expect(component.togglePageState).toHaveBeenCalled();
});
});
However, when I run the unit test, I encounter an error:
HeadlessChrome 0.0.0 (Windows 10 0.0.0) Test Configuration Component clicking slider changes page state FAILED
Failed: Cannot read property 'nativeElement' of null
TypeError: Cannot read property 'nativeElement' of null
...
It seems that this error occurs due to the use of a custom HTML tag 'ui-switch'.
How can I access nativeElement on this custom 'ui-switch' HTML tag? Are there any alternative methods I should consider instead of using nativeElement?
Thank you!