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