How to test ElementRef in Angular 8

2.4k views Asked by At

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?

0

There are 0 answers