Angular2-Tests: Was ist der Unterschied zwischen einem DebugElement und ein NativeElement Objekt in einem ComponentFixture?

Ich bin derzeit die Zusammenstellung von best practices für das testen Eckig 2 apps auf Komponenten-Ebene.

Ich habe gesehen, ein paar tutorials Abfrage einer Halterung der NativeElement Objekt für Selektoren und dergleichen, z.B.

HTML:

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!');
    });
}));

Jedoch in juliemr ist Eckig 2-test Saatgut Sie greift auf die NativeElement durch ein Elternteil DebugElement Objekt.

HTML:

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!');
    });
}));

Gibt es bestimmte Fälle, die Sie verwenden würden, eine Vorrichtung, die debugElement.nativeElement über seine nativeElement?

InformationsquelleAutor dgkane | 2016-06-08
  1. 43
    • nativeElement liefert eine Referenz auf das DOM-element
    • DebugElement ist ein Angular2-Klasse, die enthält alle Arten von hinweisen und relevanten Methoden zu untersuchen, ein element oder Komponente (Siehe Quelle DebugNode und DebugElement
    • Cheers - also ich denke, wenn ich nicht mit jedem von DebugElement Mitglieder außer nativeElement es wahrscheinlich mehr lesbar, nur mit componentFixture.nativeElement dann.
    • nativeElement nur hilft Ihnen, wenn Sie wollen, zu untersuchen, DOM (Attribute, Klassen, ... gesetzt oder gelöscht, oder vielleicht wird der Versand von DOM-Ereignissen). Wenn Sie möchten, um zu untersuchen, die den Zustand von teilen der Angular2 Anwendung (Komponenten, Richtlinien, ...), dann benötigen Sie DebugElement
    InformationsquelleAutor Günter Zöchbauer
  2. 22

    hinzufügen, was bereits erwähnt :

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

    Quelle: https://github.com/angular/angular/blob/a7e9bc97f6a19a2b47b962bd021cb91346a44baa/modules/angular2/src/testing/test_component_builder.ts#L31

    InformationsquelleAutor candidJ
  3. 9

    Werfen Sie einen Blick auf Eckige Diskussion über dieses Thema und Verwandte PR.

    Hauptsächlich: 

    fixture.componentInstance == fixture.debugElement.componentInstance;
fixture.nativeElement == fixture.debugElement.nativeElement;
    • Cheers, sehr hilfreich.
    InformationsquelleAutor Wojciech Kwiatek
  4. 3

    .nativeElement() gibt DOM-Baum in der Erwägung, dass debugElement gibt ein JS-Objekt (debugElement Baum). debugElement ist ein Winkel-Methode.

    .nativeElement() ist Browser-spezifisches API, gibt oder geben Zugriff auf DOM-Baum. Aber was ist, wenn die Anwendung ausgeführt wird, auf nicht-browser-Plattform (wie z.B. server-oder web-Arbeiter), in diesem Fall .nativeElement() können Fehler schmeißen.

    Wenn wir sicher sind, dass unsere Anwendung läuft auf einem browser-nur, dann
    unhesitantly wir können let el = fixture.nativeElement. Aber wenn wir
    nicht sicher über die Plattform dann auf sicherer Seite verwenden let le =
    fixture.debugElement     denn es gibt eine nur JS-Objekt.

    InformationsquelleAutor Abhishek
Schreibe einen Kommentar