angular - ngbootstrap - Usar NgbModule.forRoot() en el componente que causa fallas en las pruebas

ngbootstrap angular 6

Question

Estoy usando Tooltips y Modals en un componente anidado, y en mi archivo de especificaciones, estoy importando NgbModule.forRoot() en el módulo de prueba.

Esto parece funcionar en todas partes excepto en este componente, y si agrego esta importación, muchas de las pruebas de mi unidad comienzan a fallar repentinamente con este error:

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

Estoy usando Angular CLI para agrupar / probar.

Este es el único componente que falla mis pruebas.

También intenté importar los módulos Tooltip / Modal por separado y sus proveedores relevantes por separado y sigo recibiendo el error anterior. Si lo intento sin forRoot() , obtengo errores DI.

No tengo idea de cuál es el problema.

Aquí está el archivo de especificaciones:

/* 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

Tengo una solución, pero creo que este es un problema con NgbTooltip cuando se ejecuta dentro de un dispositivo de prueba. Agregue lo siguiente a nivel mundial para redefinir el método ngOnDestroy de NgbTooltip:

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

La tercera línea comentada detiene el error que aparece en mis pruebas unitarias. Algo así como un truco, pero debería estar bien en pruebas unitarias. Creo que esta función no se inicializa correctamente en ngOnInit () cuando se ejecuta en un dispositivo de prueba.

Intenté anular la directiva NgbTooltip con overrideDirective () pero parecía que el original siempre se llamaba independientemente.

Para encontrar el error real, agregué lo siguiente a mi especificación de prueba de unidad:

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

Esto mostró la excepción real que parecía estar ocurriendo:

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

Yo sugeriría solo poner algo antes. Cada uno:

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