Question

我有一个使用ngx-bootstrap的应用程序在鼠标悬停时显示工具提示。我想测试动态添加的内容是否正确显示。为了做到这一点，我有一个看起来像这样的测试：

it(shows the right tooltip', fakeAsync(() => { 
  fixture.debugElement.query(By.directive(TooltipDirective))
         .triggerEventHandler('mouseover', null);
  tick();
  fixture.detectChanges();

  expect(fixture.debugElement.query(By.css('.tooltip-inner')).nativeElement)
        .toBe('the tooltip text');
}

这会导致错误，表明fixture.debugElement.query(By.css('.tooltip-inner'))：“无法读取null的属性'nativeElement'”

如果我打印出fixture.debugElement.nativeElement的内容，我会得到这个：

<div id="root1" ng-version="5.2.9">
  <my-component>
    <div ng-reflect-tooltip="the tooltip text">
      <img src="images/test.png">
    </div>
    <bs-tooltip-container role="tooltip" class="tooltip in tooltip-right">
      <div class="tooltip-arrow arrow"></div>
      <div class="tooltip-inner">the tooltip text</div>
    </bs-tooltip-container>
  <my-component>
</div>

重要的一点就是html存在 - DebugElement.query无法访问它。

我目前获得规范传递的解决方案是将期望值更改为：

expect(fixture.debugElement.nativeElement.textContent.trim())
      .toBe('the tooltip text');

这样可行，但如果我遇到多个工具提示的类似情况（例如），它就会崩溃。有没有人能够以更好的方式处理这个问题？我没有正确设置此规格吗？

DebugElement.query不适用于在规范

0 个答案: