Search code examples
angulartypescriptjasmine

Jasmine how mock parentElement


Hello i have this error on the test and i really don't know how to fix it, i am using Jasmine with Angular.

Inside a directive i have to read the parentNode of the elment but the test is failing. any idea how to mock it?

enter image description here

this is the code

private getParentElement() {
    return this.element.nativeElement.closest('th');
  }

  private setActiveSortingCellOnLoad(): void {
    const selectors = "[name='arrows-sort-down'] , [name='arrows-sort-up']";
    const headerCells = this.getParentElement().parentElement.childNodes;
    headerCells.forEach(cell => {
      if (cell.childNodes.length > 0) {
        const el = cell.querySelectorAll(selectors);
        if (el.length === 1) {
          cell.classList.add(this.activeSortClass);
        }
      }
    });
  }

Solution

  • Since getParentElement is private, we will have to spy on it in a hacky way.

    Try the following:

    it('does abc', () => {
      spyOn((component as any), 'getParentElement').and.returnValue({ parentElement: { childNodes: [/* mock childNodes here */ ]}});
    });
    

    The hacky part being component as any because you can't spy on private methods. I am thinking the above should work.