Angular test dependency module

Question

I am successfully unit-testing a component-under-test. I had to add some more functionality to the component - tooltips and translations. The translation service is my code and I was able to both test component-under-test with the translation service and also with mocked translation service.

The issue I am having is the tooltips. Those come from ng-bootstrap and are usable via importing NgbModule.forRoot() in my app.module. I am not able to test the component-under-test without importing this module like so:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ComponentUnderTest, TestHostComponent],
      imports: [NgbModule.forRoot()],
      providers: [LocaleService],
    })
      .compileComponents();
  }));

This doesn't seem right, I do not want to test anything from the module.

How do I go around importing this module in all my tests?

Answer 1

I tried using the tooltip in a test project to replicate your error and I didn't hit a problem with the basic tooltip. However once I started using [ngbTooltip] it threw an error as it didn't recognise this binding. To get round that you will need to create a mock binding using a mock directive. The following seemed to do the trick for me:

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[ngbTooltip]'
})
export class MockTooltipDirective {

  @Input()
  ngbTooltip: string;

  constructor() { }

}