I am setting styles to some divs from my component. My declaration is
@ViewChild('listDiv', { static: false }) listDiv: ElementRef;
// listDiv is an html div element
I am setting the style as follows
if ( this.listDiv!== null && this.listDiv!== undefined ) {
this.utility.setDisplay(this.listDiv, 'block');
}
setDisplay method is defined in utility service, with renderer2 as follows
setDisplay(element: ElementRef, display) {
this.renderer.setStyle(element.nativeElement, 'display', display);
}
So if I want to test that listDiv
has style display: block
how should I go about it?
I tried the following but it fails
it('showListDiv', () => {
const HTMLElements = {};
document.getElementById = jasmine
.createSpy('HTML Element')
.and.callFake(ID => {
if (!HTMLElements[ID]) {
const newElement = document.createElement('div');
HTMLElements[ID] = newElement;
}
return HTMLElements[ID];
});
component.showListDiv();
expect(component.listDiv.nativeElement.getAttribute('style')).toBe('display: block;');
});
I am not sure how and what to mock if that is needed. Can anyone suggest a way to test elementref?