2017-08-09 3 views
0

最新のangular_components-0.6.0-alpha+2パッケージでいくつかのテストをしています。私の<material-dropdown-select>コンポーネントを角型アプリケーションでユニットテストしたいからです。私は基本的にpageloaderパッケージを使用して、テスト中にドロップダウンをクリックして開き、オプションをクリックしたいとします。 <div id="default-acx-overlay-container">は、そうでない場合は、デフォルトでは、私はないだろう(<body>の直接の子になりますので、コンポーネントテストで `angular_components`の` material-dropdown-select`を使用しようとしています

今私は<div id="my-container">

<my-app>Loading...</my-app> 
    <div id="my-container"></div> 
    </body> 
</html> 

私のカスタム内(angular_componentsによって生成されます)<div id="default-acx-overlay-container">をマウントしようとしていますpageloader@ByCSSセレクタでアクセスできます)。従って私は(providers:部分を注意してください)これを変更するためにoverlayContainerParent角度プロバイダを上書き:

HtmlElement getOverlayContainerParent(Document doc) => 
    doc.querySelector('#my-container'); 

@Component(
    selector: 'material-select-demo', 
    styleUrls: const ['material_select_demo.css'], 
    templateUrl: 'material_select_demo.html', 
    directives: const [ 
    CORE_DIRECTIVES, 
    DisplayNameRendererDirective, 
    ExampleRendererComponent, 
    MaterialCheckboxComponent, 
    MaterialDropdownSelectComponent, 
    MaterialSelectComponent, 
    MaterialSelectItemComponent, 
    ], 
    providers: const [ 
    const Provider(overlayContainerParent, 
     useFactory: getOverlayContainerParent, deps: const [Document]), 
    ], 
) 
class MaterialSelectDemoComponent { 

私の問題は、しかし、いくつかの理由でプロバイダが上書きされないということです。

私の問題を示すために、angular_components_exampleアプリの簡易版であるサンプルアプリケーションを作成しました。アプリを実行する場合、ドロップダウン選択を開き、DOMを調べると、の<div id="default-acx-overlay-container">は私の意図通りに<div id="my-container">の下にマウントされません。ここに私のアプリ例があります:​​

+0

これで解決しましたので、渡したテスト[here](https://github.com/ben4ever/angular_components_example/commits/add_dropdown_select_test)で実際のサンプルを見つけることができます。 – ben4ever

答えて

1

あなたは非常に近いです。私たちは何かを指定することと非常に似通っていますoverlayContainerParent問題はトップレベルの注入可能ではないoverlayContainerParentです。それが結合することを発見するまで、それが注入ツリーを歩いていくためにOverlayServiceのインスタンスが要求されたときに、角度注入が動作する方法がある>overlayContainerParent

- >OverlayDomRenderService - - >overlayContainerToken OverlayService:依存関係ツリーは、次のようになります。ツリーのそのレベルでは、同じレベル以上の依存関係が得られます。したがって、この場合、注入ツリー内の異なるoverlayContainerParent実装を指定しているため、そのトークンが直接注入されることを要求しない限り使用されません。我々のテストで

は、私たちのプロバイダは、このような何かを見て:これは、オーバーレイ・バインディングは、ツリー内の同じレベルで指定されていると、あなたの価値がpopupBindingsに1を上書きすることが保証されます

const [popupBindings, const Provider(overlayContainerParent, useFactory: getOverlayContainerParent, deps: const [Document])

注これをコンポーネントに直接配置すると、ネストされたオーバーレイバインディングに関するロギングエラーが発生します。これは、エンジニアがコンポーネントのポップアップバインディングを直接指定していて、テストの値をオーバーライドできなかったため、別のコンテナでテストできないためです(非テストバインディングは、

より良い解決策はNgTestBedからangular_testまでを使用し、これらのプロバイダをトップレベルでaddProvidersを使用して指定することです。

関連する問題