Angular 测试 - 如何在 angular 测试中模拟 document.getElementbyId？

Question

I have below two lines in one of the functions in angular component. My angular tests are failing throwing the error TypeError: Cannot set properties of null (setting 'value').

test.ts

function reset(){
 (<HTMLInputElement>document.getElementById('test1')).value = '';
 this.nameCtrl.setValue(null);
}

test.spec

fixture.debugElement.componentInstance.test1.value='';
fixture.debugElement.componentInstance.nameCtrl.setValue(null);

I tried to mock the lines in rest using the above by it still fails. Please help

Answer 1

Consider using the Angular ViewChild decorator instead of document.getElementById for accessing the test1 DOM element.

See an example here: https://www.digitalocean.com/community/tutorials/angular-viewchild-access-component