工具提示在角度组件测试中不起作用（来自 ngx-bootstrap）

Question

我使用 ng2-bootstrap 中的 TooltipModule，最近切换到 ngx-bootstrap。工具提示在我的应用程序中工作正常 - 没有问题。但是，在我的 Angular 组件测试中，当我导入以下内容时：

import { TooltipModule } from 'ngx-bootstrap';

然后在 TestBed 中导入以下内容：

TestBed.configureTestingModule({imports: [TooltipModule.forRoot(),

不呈现工具提示。我在浏览器的“元素”选项卡下的开发控制台中看不到工具提示。 当我使用 ng2-bootstrap 的导入时：

import { TooltipModule } from 'ng2-bootstrap';

一切正常。我看到呈现的工具提示。

这里有什么问题吗？工具提示在我的应用程序中运行良好。仅在 Angular 测试中，我遇到了问题。我是否需要在测试中做任何不同或额外的事情才能使工具提示在 ngx-bootstrap 中工作？

Answer 1

你必须导入导入

{ TooltipModule } from 'ngx-bootstrap';

在您的相关模块中，例如

app.module

不在您的组件中，然后在您的模块导入数组中添加

TooltipModule.forRoot()

。

就是这样，您现在可以在

app.modules

组件中使用工具提示。

如果您使用延迟加载，请在其他模块中添加

{ TooltipModule } from 'ngx-bootstrap';

。

Answer 2

这就是我们所做的（测试确实很旧，但仍然有效）

it('tooltip should be displayed by focus event after 0 ms by default',
fakeAsync(() => {
  const element: HTMLElement = fixture.debugElement.nativeElement;
  const tooltipElement: any = element.querySelector('#test-tooltip1');
  tooltipElement.focus();
  fixture.detectChanges();
  tick(0);
  fixture.detectChanges();
  expect(element.querySelector('.tooltip-inner')).not.toBeNull();
})
);

完整示例可以在这里找到：https://github.com/valor-software/ngx-bootstrap/blob/31c5f62a48560d4372f0043241829a27e5f3deb6/src/spec/tooltip.directive.spec.ts#L66-L77