Angular，Karma - 测试悬停答案

【问题标题】：Angular, Karma - Test HoverAngular，Karma - 测试悬停
【发布时间】：2019-03-05 10:23:32
【问题描述】：

我有一个在工具提示中显示一些附加数据的组件。此工具提示在悬停时显示。

我想测试该工具提示中的数据是否正确，但我要么无法创建悬停事件，要么工具提示在我能够检查之前就消失了。

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');
});

我做错了什么？有没有我可以从中汲取灵感的代码示例？

如果我在浏览器中运行测试，悬停事件可以正常工作。（即使是孤立的组件）

【问题讨论】：

This 可能会有所帮助。在接近尾声时，它建议使用inputEl.triggerEventHandler('mouseover', null); 来模拟悬停在输入事件上。应该使用 div。

标签： angular hover karma-jasmine angular7

【解决方案1】：

您所做的大部分事情似乎都是正确的。我让我的测试使用 fixture.whenStable 异步运行，以确保完成更改检测。我目前用于检查工具提示是否为空的代码：

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'))
  })
})

注意：这仅测试正确定义链接的元素，即必须存在具有正确 id 的模板。

【讨论】：