While utilizing Tooltips and Modals within a nested component, I encountered an issue in one specific component during testing. In my spec file, I included the NgbModule.forRoot() import in the testing module which caused many unit tests to fail with the following error:
TypeError: this._unregisterListenersFn is not a function
at NgbTooltip.ngOnDestroy
The problem seems isolated to this particular component, even though the setup works fine elsewhere. Attempting to import the Tooltip/Modal modules separately along with their respective providers did not resolve the error, as DI errors persisted without calling forRoot().
I am using Angular CLI for bundling and testing purposes.
This faulty component is the only one causing issues for my tests, leaving me puzzled about the root of the problem.
Below is an excerpt from the spec file related to this component:
/* 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();
});
});