2017-10-01 5 views
0

ng2-bootstrapからTooltipModuleを使用していて、最近ngx-bootstrapに切り替えました。ツールチップは私のアプリケーションで問題なく動作します。しかし、私のAngularコンポーネントテストでは、次のものをインポートします:角度コンポーネントテストでツールチップが動作しない(ngx-bootstrapから)

import {TooltipModule} from 'ngx-bootstrap';

、次いでテストベッドでは、インポートは、以下:

TestBed.configureTestingModuleを({ 輸入:[TooltipModule.forRoot()、

ツールヒントがレンダリングされていない私は、デベロッパーコンソールでツールチップが表示さいけません。 。 私のブラウザで要素]タブの下で、私のようにNG2-ブートストラップからのインポートを使用する場合:「NG2-ブートストラップ」から

インポート{TooltipModule};

すべてがフィン作品e。私は、ツールチップがレンダリングされているのを見ます。

ここで問題は何ですか?ツールチップは私のアプリでうまく動作します。 Angularテストでのみ問題が発生しています。 ngx-bootstrapからツールチップを動かすために、私のテストで何か別のやり方をする必要がありますか?

答えて

0

これは我々が(テストは本当に古いですが、まだ動作)

it('tooltip should be displayed by focus event after 0 ms by default', 
fakeAsync(() => { 
    const element: HTMLElement = fixture.debugElement.nativeElement; 
    const tooltipElement: any = element.querySelector('#test-tooltip1'); 
    tooltipElement.focus(); 
    fixture.detectChanges(); 
    tick(0); 
    fixture.detectChanges(); 
    expect(element.querySelector('.tooltip-inner')).not.toBeNull(); 
}) 
); 

完全なサンプルがここで見つけることができないものです:https://github.com/valor-software/ngx-bootstrap/blob/31c5f62a48560d4372f0043241829a27e5f3deb6/src/spec/tooltip.directive.spec.ts#L66-L77

0

あなたが輸入 { TooltipModule } from 'ngx-bootstrap';

をインポートする必要がありますあなたの相対的なモジュールはapp.moduleのようなものではなく、モジュールのインポート配列にはTooltipModule.forRoot()が追加されます。

これで、あなたのapp.modulesコンポーネントにツールチップを使用できるようになりました。

遅延ロードを使用している場合は、他のモジュールに{ TooltipModule } from 'ngx-bootstrap';を追加します。

関連する問題