How do you access an attribute directive within an Angular component for specs?

Question

I am writing a spec for a component that uses the ngx-bootstrap's tooltip attribute directive (TooltipDirective). I would like to call the open method of the tooltip to view the content. But when I try to access that directive, I get my component instead.

const tooltip = fixture.debugElement.query(By.directive(TooltipDirective))
                       .componentInstance;

When I console.log(tooltip) I get a reference to the component under test, not the expected tooltip directive. Is there any way to access the attribute directive?

Answer 1

In order to get an Attribute Directive on a component for tests, you have to use the injector on the DebugElement where it is built. Here is how to do it:

const tooltip = debugElement.query(By.directive(TooltipDirective))
                            .injector.get(TooltipDirective);

You can not access this directive with TestBed.get because it is only available on the child injector.