Angular、Karma - 测试悬停

Question

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

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

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

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

如果我在浏览器中运行测试，悬停事件将正常工作。（即使使用隔离组件）

Answer 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 的模板。