Using NgbModule.forRoot() in component causing tests to fail

Question

I'm using Tooltips and Modals in a nested component, and in my spec file, I'm importing NgbModule.forRoot() in the testing module.

This seems to work everywhere except in this one component, and if I add this import, many of my unit tests suddenly start failing with this error:

TypeError: this._unregisterListenersFn is not a function
        at NgbTooltip.ngOnDestroy

I'm using Angular CLI for bundling/testing.

This is the only component failing my tests.

I've also tried importing the Tooltip/Modal modules separately and their relevant providers separately and it's I keep getting the error above. If I try it without forRoot(), I get DI errors.

I have no clue what the issue is.

Here's the spec file:

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { RouterTestingModule } from '@angular/router/testing';
import { NgbModule, NgbTooltipModule, NgbTooltipConfig, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbModalStack } from '@ng-bootstrap/ng-bootstrap/modal/modal-stack';

import { ListItemComponent } from './list-item.component';
import { VideoPlayerService } from '../../../video-player';
import { CalendarRoutingService } from '../../calendar-routing.service';

describe('ListItemComponent', () => {
  let component: ListItemComponent;
  let fixture: ComponentFixture<ListItemComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ListItemComponent
      ],
      imports: [RouterTestingModule, NgbModule.forRoot()],
      providers: [
        VideoPlayerService,
        CalendarRoutingService,
        // NgbModalStack,
        // NgbTooltipConfig
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ListItemComponent);
    component = fixture.componentInstance;
    component.item = { records: [] };
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 1

I have a workaround but I think this is an issue with NgbTooltip when running within a test fixture. Add the following globally to redefine NgbTooltip's ngOnDestroy method:

NgbTooltip.prototype.ngOnDestroy = function () {
    this.close();
    //this._unregisterListenersFn();
    this._zoneSubscription.unsubscribe();
};

The third line commented out stops the error appearing in my unit tests. Bit of a hack but should be ok in unit tests. I think that this function is not initialized in ngOnInit() correctly when running in a test fixture.

I did try overriding the NgbTooltip directive with overrideDirective() but the original seemed to always be called regardless.

To find the actual error I added the following to my unit test spec:

afterEach(() => {
  fixture.destroy();
});

This then displayed the actual exception that seemed to be occurring:

TypeError: this._unregisterListenersFn is not a function
at NgbTooltip.webpackJsonp.../../../../@ng-bootstrap/ng-bootstrap/tooltip/tooltip.js.NgbTooltip.ngOnDestroy (http://localhost:9876/_karma_webpack_/vendor.bundle.js:4522:14)
at callProviderLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:103669:18)
at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:103638:13)
at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/vendor.bundle.js:103622:17)
at destroyView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:104948:5)
at callViewAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:105094:13)
at execComponentViewsAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:105006:13)
at destroyView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:104947:5)
at callViewAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:105094:13)
at execComponentViewsAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:105006:13)

Answer 2

I would suggest just to stub it in beforeEach:

// fix 'Error during cleanup of component'
NgbTooltip.prototype.ngOnDestroy = jasmine.createSpy('ngOnDestroy');
(NgbTooltip.prototype.ngOnDestroy as jasmine.Spy).and.stub();