javascript - test - Prueba de Angular2: ¿Cuál es la diferencia entre un objeto DebugElement y NativeElement en un ComponentFixture?

unit test angular 5

Question

Actualmente estoy reuniendo algunas de las mejores prácticas para probar las aplicaciones de Angular 2 en un nivel de componente.

He visto algunos tutoriales que consultan el objeto NativeElement de un dispositivo para selectores y similares, por ejemplo

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

Sin embargo, en la semilla de prueba Angular 2 de juliemr, ella accede a NativeElement a través de un objeto primario DebugElement.

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

¿Hay casos específicos en los que usaría debugElement.nativeElement de un dispositivo sobre su elemento nativo?

Answer 1

Eche un vistazo a la discusión angular sobre este tema y las relaciones PR relacionadas.

Principalmente:

fixture.componentInstance == fixture.debugElement.componentInstance;
fixture.nativeElement == fixture.debugElement.nativeElement;

Answer 2

para agregar a lo que ya se ha mencionado:

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

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

Answer 3

.nativeElement() devuelve el árbol DOM mientras que debugElement devuelve un objeto JS (árbol debugElement). debugElement es un método de Angular.

.nativeElement() es una API específica del navegador que devuelve o da acceso al árbol DOM. Pero, ¿qué pasa si la aplicación se ejecuta en una plataforma que no es del navegador (como un servidor o un trabajador web), en ese caso .nativeElement() puede arrojar un error.

Si estamos seguros de que nuestra aplicación se ejecutará solo en el navegador, entonces podemos usar let el = fixture.nativeElement . Pero si no estamos seguros acerca de la plataforma, entonces, para estar en el lado más seguro, use let le = fixture.debugElement porque devuelve un objeto JS simple.

Answer 4

• nativeElement devuelve una referencia al elemento DOM
• DebugElement es una clase Angular2 que contiene todo tipo de referencias y métodos relevantes para investigar un elemento o componente (consulte la fuente de DebugNode y DebugElement