tutorial - ¿Cómo probar el componente angular 2 con componentes anidados dentro con sus propias dependencias?(TestBed.configureTestingModule)

unit test angular 6

Question

Tengo un componente A que utiliza un componente B, c, D en su plantilla:

###template-compA.html

    <comp-b></comp-b>
    <comp-c [myinput]="obj.myinput"></comp-c>
    <comp-d ></comp-d>

... etc

Para simplificar, digamos que solo hay una directiva en el componente A:

 ###template-compA.html

    <comp-b></comp-b>

Mi comp-b tiene sus propias dependencias (servicios u otros comp).

Si quiero probar comp-a de esta manera:

TestBed.configureTestingModule({
    declarations: [comp-A],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

no funcionaria correctamente Así que hago:

TestBed.configureTestingModule({
    declarations: [comp-A, comp-B],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

Tampoco funciona porque comp-b no tiene sus propias dependencias. Y aquí estoy confundido, ¿cómo puedo hacer una prueba unitaria si tengo que importar y volver a llenar todos los demás componentes cada vez? Parece una gran cantidad de trabajo. ¿Hay otra manera? ¿Cuál sería la mejor práctica para probar los componentes con componentes anidados que tienen sus propias dependencias?

Muchas gracias,

Stéphane.

Answer 1

Si no necesita hacer referencia a comp-b de ninguna manera en sus pruebas, puede agregar schemas: [NO_ERRORS_SCHEMA] or [CUSTOM_ELEMENTS_SCHEMA] a su configuración de TestBed o anular la plantilla de comp-A y eliminar la etiqueta para comp-b

Si necesita hacer referencia a comp-b es posible que no necesite proporcionar sus dependencias específicamente en una anulación.

Establecer providers en overrideComponent solo es necesario si la dependencia se proporciona en el propio componente. (Si tiene una lista de proveedores en comp-A.ts )

digamos que comp-b necesita un comp-AService y comp-AService se proporciona en su reemplazo de comp-A , ya que comp-b es un hijo de comp-A tendrá un comp-AService proporcionado para ello.

Si está proporcionando estas dependencias en su app.module o en un lugar más alto que el componente en sí mismo, no necesita anularlo. Por ejemplo, si comp-b necesita comp-AService y someOtherService , ambos se proporcionan en su app.module su configuración de TestBed podría verse así:

TestBed.configureTestingModule({
  declarations: [comp-A, comp-B],
  imports: [ReactiveFormsModule],
  providers: [
    { provide: comp-AService, useValue: comp-AListSVC },
    { provide: someOtherService, useValue: someOtherServiceSVC }
  ]
})

Editar:

Puede leer más sobre las pruebas de componentes anidados aquí:

https://angular.io/guide/testing#nested-component-tests

Answer 2

Siguiendo el consejo de un @yurzui:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [comp-a],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));