web-dev-qa-db-ja.com

Angular2テスト：ComponentFixtureのDebugElementとNativeElementオブジェクトの違いは何ですか？

現在、コンポーネントレベルでAngular 2個のアプリをテストするためのベストプラクティスをまとめています。

セレクターなどのためにフィクスチャのNativeElementオブジェクトを照会するチュートリアルをいくつか見てきました。

it('should render "Hello World!" after click', async(() => {
    builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
        fixture.detectChanges();
        let el = fixture.nativeElement;
        el.querySelector('h1').click();
        fixture.detectChanges();
            
        expect(el.querySelector('h1')).toHaveText('Hello World!');
    });
}));

ただし、 juliemrのAngular 2テストシード では、親DebugElementオブジェクトを介してNativeElementにアクセスします。

it('should render "Hello World!" after click', async(() => {
    builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
      fixture.detectChanges();
      let compiled = fixture.debugElement.nativeElement;
      compiled.querySelector('h1').click();
      fixture.detectChanges();
            
      expect(compiled.querySelector('h1')).toHaveText('Hello World!');
    });
}));

NativeElementでフィクスチャのdebugElement.nativeElementを使用する特定のケースはありますか？

javascriptunit-testingdomangularjasmine
55
dgkane
  • nativeElementは、DOM要素への参照を返します
  • DebugElementは、要素またはコンポーネントの調査に関連するすべての種類の参照とメソッドを含むAngular2クラスです（ DebugNodeおよびDebugElementのソース
44
Günter Zöchbauer

既に言及されているものに追加するには：

  abstract class ComponentFixture {
  debugElement;       // test helper 
  componentInstance;  // access properties and methods
  nativeElement;      // access DOM
  detectChanges();    // trigger component change detection
}

ソース： https://github.com/angular/angular/blob/a7e9bc97f6a19a2b47b962bd021cb91346a44baa/modules/angular2/src/testing/test_component_builder.ts#L31

22
candidJ

このトピックに関する角度付きの議論 および関連する PR をご覧ください。

主に：

fixture.componentInstance == fixture.debugElement.componentInstance;
fixture.nativeElement == fixture.debugElement.nativeElement;
9
Wojciech Kwiatek

.nativeElement()はDOMツリーを返し、debugElementはJSオブジェクト（debugElementツリー）を返します。 debugElementは、Angularのメソッドです。

.nativeElement()は、DOMツリーを返す、またはDOMツリーへのアクセスを許可するブラウザー固有のAPIです。しかし、アプリケーションがブラウザ以外のプラットフォーム（サーバーやWebワーカーなど）で実行されている場合、その場合.nativeElement()はエラーをスローする可能性があります。

アプリケーションがブラウザのみで実行されることが確実な場合は、let el = fixture.nativeElementを使用できます。しかし、プラットフォームがわからない場合は、安全な側にするためにlet le = fixture.debugElementを使用します。これはプレーンなJSオブジェクトを返すためです。

3
Abhishek