javascript - thrown - unit test angular 6

El componente de accesorio angular 4 persiste en DOM durante las pruebas de Jasmine

Question

Al ejecutar Jasmine en un navegador real, me di cuenta de que el componente de accesorio TestBed no se destruye en DOM y persiste después de que las pruebas hayan finalizado:

Aquí hay un componente probado:

@Component({
  selector: ''test-app'',
  template: `<div>Test</div>`,
})
class Test {}

Y una prueba ( plunk ).

  let component;
  let fixture;
  let element;

  beforeAll(() => {
    TestBed.resetTestEnvironment();

    TestBed.initTestEnvironment(
      BrowserDynamicTestingModule,
      platformBrowserDynamicTesting()
    );
  });

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [Test],
    })
    .compileComponents();

    fixture = TestBed.createComponent(Test);
    component = fixture.componentInstance;
    element = fixture.debugElement.query(By.css(''div'')).nativeElement;

    fixture.detectChanges();
  });

  afterEach(() => {
    fixture.destroy();
  });

  it(''should compile Test'', () => {
    expect(element).toBeTruthy();
  });

¿Por qué la instancia del componente de Test no se elimina de DOM y cómo se debe solucionar?

¿Por qué los componentes de los aparatos se agregan a DOM? ¿Se pueden separar de DOM como $rootElement en AngularJS?

Answer 1

Creo que Angular no lo elimina automáticamente para ayudarlo a obtener más detalles sobre la ejecución de su prueba. Para eliminarlo, simplemente use afterEach:

beforeEach(() => {
  fixture = TestBed.createComponent(MyComponent);
  comp = fixture.componentInstance;
  debugElement = fixture.debugElement;
  element = debugElement.nativeElement;
});

 afterEach(() => {
  document.body.removeChild(element);
});

Answer 2

Por favor, eche un vistazo a los siguientes problemas:

1) en primer lugar estás llamando

fixture.destroy();

en afterEach , por lo que se llama después de la sección. Es decir, en el accesorio de la sección todavía no se destruye

2) ¿Por qué código detectas que el elemento todavía está presente en DOM? Desde otro punto de vista: ¿por qué ese elemento debe ser eliminado por jasmine / browser (por qué razón debe hacer jasmine / browser)? Podría sugerir los siguientes casos de uso:

2.1) un componente se usa en otro y debe ser creado / destruido por algún cambio. Es decir, ngIf o ngSwitchCase :

<parent-component>
    <child-component *ngIf="someChangeInComponent1"></child-component>
</parent-component>

o

<parent-component [ngSwitch]="type">
    <child-component *ngSwitchCase="''something''"></child-component>
</parent-component>

2.2) el enrutamiento se cambia (pero no es un tema para las pruebas unitarias AFAIK)

3) el código actual recibe la referencia al elemento DOM solo una vez. Debería ser algo como:

beforeEach(() => {
    ...
    element = ...
});

it(''...'', () => {
    ...
    fixture.detectChanges();
    element = ... // try to get element again <--------------------- here
})

4) Si está intentando encontrar errores, como ngOnDestroy () está definido pero implementa, OnDestroy no se usa, entonces es más un tema para nint run lint que para pruebas unitarias (por favor, eche un vistazo a la interfaz de uso del ciclo de vida en tslint. json ). Después de ejecutar npm run lint verás:

Implement lifecycle hook interface OnDestroy for method ngOnDestroy in class ...

Es una buena práctica no tener errores, no solo para la prueba de unidad sino también para tslint.

Answer 3

Una solución más concisa:

afterEach(() => {
  element.remove()
});

Donde element es fixture.debugElement.nativeElement