Question

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

从'ngx-bootstrap'导入{TooltipModule};

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

TestBed.configureTestingModule（{ 导入：[TooltipModule.forRoot（），

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

从'ng2-bootstrap'导入{TooltipModule};

一切正常。我看到了工具提示。

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

Answer 1

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

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

Answer 2

你必须导入导入 { TooltipModule } from 'ngx-bootstrap';

在app.module之类的相关模块中，而不是在您的组件中，然后在您的模块中导入数组添加TooltipModule.forRoot()。

您可以在app.modules组件中使用工具提示。

如果您使用延迟加载，请在其他模块中添加{ TooltipModule } from 'ngx-bootstrap';。

工具提示不适用于角度组件测试（来自ngx-bootstrap）

2 个答案: