Tooltip not working in angular component test (from ngx-bootstrap)

Question

I was using TooltipModule from ng2-bootstrap and recently switched to ngx-bootstrap. Tooltips work fine in my application - no issues. However, in my Angular component test, when I import the following:

import { TooltipModule } from 'ngx-bootstrap';

and then in the TestBed, Import the following:

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

Tooltips are not rendered. I dont see the tooltip in dev console under Elements tab in my browser. When I use the import from ng2-bootstrap as:

import { TooltipModule } from 'ng2-bootstrap';

everything works fine. I see the tooltip rendered.

What is the issue here? Tooltip works fine in my app. Only in Angular test, I am having issues. Do I need to do anything differently or extra in my tests to make tooltips work from ngx-bootstrap?

Nikhil Radadiya · Accepted Answer · 2017-12-08 04:42:16Z

2

you have to import import { TooltipModule } from 'ngx-bootstrap';

in your relative module like app.module not in your component and then in your modules import array add TooltipModule.forRoot().

that's it you can use tooltip now in your app.modules components.

If you are using lazy-loading then add { TooltipModule } from 'ngx-bootstrap'; it in your other module.

answered Dec 8, 2017 at 4:42

Nikhil Radadiya

2,0653 gold badges25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hakan Fıstık Over a year ago

If you are using lazy-loading then add { TooltipModule } in your other lazy-loaded module This is very important

valorkin · Accepted Answer · 2017-10-03 14:04:12Z

1

this is what we do (tests are really old, but still working)

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

full sample can be found here: https://github.com/valor-software/ngx-bootstrap/blob/31c5f62a48560d4372f0043241829a27e5f3deb6/src/spec/tooltip.directive.spec.ts#L66-L77

answered Oct 3, 2017 at 14:04

valorkin

1,3399 silver badges20 bronze badges

Collectives™ on Stack Overflow

Tooltip not working in angular component test (from ngx-bootstrap)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related