Tengo un componente A que usa 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 funcionaría 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 montar 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 componentes con componentes anidados que tienen sus propias dependencias?
Muchas gracias,
Stéphane.
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 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.
La configuración de providers en overrideComponent solo es necesaria 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 anulación comp-A , dado que comp-b es un elemento secundario de comp-A , se le proporcionará comp-AService .
Si está proporcionando estas dependencias en su app.module de aplicación o en algún lugar más alto que el componente en sí, no necesita anularlo. Por ejemplo, si comp-b necesita comp-AService y someOtherService , que se proporcionan en su app.module su configuración 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-components-scenarios#nested-component-tests
Siguiendo el consejo de @yurzui:
beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [comp-a], schemas: [NO_ERRORS_SCHEMA] }) .compileComponents(); }));Es una vieja pregunta, pero esto es lo que estoy haciendo actualmente en Angular 9.
Como desearía aislar su componente probado tanto como sea posible, puede crear una función que devuelva un componente falso para importar, en lugar del componente anidado real:
function mockComponent(selector: string) { @Component({ selector, template: '' }) class MockValueAccessorComponent { // [mock implementation here] } return MockValueAccessorComponent; }Y luego impórtelo en su TestBed de esta manera:
TestBed.configureTestingModule({ declarations: [ TestUtils.mockComponent('component-template-to-mock'), ] });