在组件中使用 NgbModule.forRoot() 导致测试失败答案

【问题标题】：Using NgbModule.forRoot() in component causing tests to fail在组件中使用 NgbModule.forRoot() 导致测试失败
【发布时间】：2017-07-04 18:56:35
【问题描述】：

我在嵌套组件中使用工具提示和模态框，并且在我的规范文件中，我在测试模块中导入NgbModule.forRoot()。

这似乎在除了这个组件之外的任何地方都有效，如果我添加这个导入，我的许多单元测试突然开始失败并出现这个错误：

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

我正在使用 Angular CLI 进行捆绑/测试。

这是唯一未通过我的测试的组件。

我还尝试分别导入工具提示/模态模块及其相关提供程序，但我不断收到上述错误。如果我在没有forRoot() 的情况下尝试它，我会收到 DI 错误。

我不知道问题是什么。

这是规范文件：

/* 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();
  });
});

【问题讨论】：

标签： angular typescript jasmine angular-cli ng-bootstrap

【解决方案1】：

我有一个解决方法，但我认为这是 NgbTooltip 在测试夹具中运行时的问题。全局添加以下内容，重新定义 NgbTooltip 的 ngOnDestroy 方法：

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

注释掉的第三行停止了单元测试中出现的错误。有点hack，但在单元测试中应该没问题。我认为在测试夹具中运行时，此函数未在 ngOnInit() 中正确初始化。

我确实尝试使用 overrideDirective() 覆盖 NgbTooltip 指令，但无论如何似乎总是调用原始指令。

为了找到实际错误，我在单元测试规范中添加了以下内容：

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

然后显示似乎正在发生的实际异常：

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)

【讨论】：

【解决方案2】：

我建议只在 beforeEach 中存根：

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

【讨论】：