Angular, Karma - Test Hover

Question

I have a component that displays some additional data in a tooltip. This tooltip is displayed on hover.

I want to test if the data in that tooltip is correct but I'm either not able to create a hover-event or the tooltip is gone before I'm able to inspect it.

it('has correct tooltip data', () => {
    const div = fixture.debugElement.nativeElement.querySelector('div');

    div.dispatchEvent(new MouseEvent('mouseover'), {
      view: window,
      bubbles: true,
      cancelable: true
    });

    fixture.detectChanges();
    const tooltip = fixture.debugElement.nativeElement.querySelector('ngb-tooltip-window');
});

What am I doing wrong? Is there a code-example I can draw some inspiration from?

If I run the test in a browser the hover-event works correctly. (Even with the isolated component)

Answer 1

Most of what you are doing seems correct. I have my tests run asynchronously using the fixture.whenStable to make sure that change detection is done. The code I am currently using to check if a tooltip is not empty:

it('should not have any empty tooltips', async () => {
  await fixture.whenStable();
  let elt: HTMLElement = fixture.nativeElement;
  let hoverDivs: NodeListOf<HTMLDivElement> = elt.querySelectorAll('div[ng-reflect-ngb-tooltip]');
  hoverDivs.forEach(helper => {
    helper.dispatchEvent(new MouseEvent('mouseenter'))
    let window = elt.querySelector('ngb-tooltip-window div.tooltip-inner')
    expect(window).toBeTruthy()
    if (window) {
      expect(window.textContent.length).toBeGreaterThan(0)
    }
    helper.dispatchEvent(new MouseEvent('mouseleave'))
  })
})

Note: this only tests elements where the link is properly defined, i.e. there must be a template present with the correct id.