Wie spionOn Kind Komponenten in Angular?

Question

In den Angular Tutorials haben sie ein Beispiel für eine HeroesComponent mit einem Kind HeroesListComponent.

Die HeroesListComponent verwendet eine HeroesService zu getHeroes().

Um spyOngetHeroes() innen heroes-list.component.spec.ts können wir

tun

spyOn(fixture.debugElement.componentInstance.heroesService, 'getHeroes').and.returnValue(Promise.resolve([])) 

Meine Frage ist: Wenn ich innerhalb von HeroesComponent Spec-Datei war - heroes.component.spec.ts kann ich spyOn das Kind HeroesListComponentgetHeroes() durch so etwas wie dies zu tun:

spyOn(fixture.debugElement.componentInstance.heroesListComponent.heroesService, 'getHeroes').and.returnValue(Promise.resolve([])) 

Offensichtlich hat das nicht funktioniert, also frage ich, ob mir jemand mit einer Lösung helfen kann.

Ich möchte dies tun, weil ich testen möchte, ob meine <hero-list> richtig geladen, wenn ich HeroesComponent öffnen. Dies kann sich wiederholen, wie ich bereits einen Test habe, um sicherzustellen, HeroesListComponent funktioniert, aber ich denke, es ist immer noch ein wichtiger Test, weil ich wirklich sicherstellen möchte, dass meine HeroesComponent ordnungsgemäß geladen und alle Kind-Komponenten zu.

Ich habe auch versucht, die gesamte HeroesService innerhalb von HeroesComponent, anstelle von spyOn zu verspotten, aber ich kann nicht bekommen, dass diese Syntax auch nicht funktioniert. Ich kann nicht HeroesListComponent sagen, um das Scheinobjekt zu verwenden, wenn ich innen bin heroes.component.spec.ts

Danke!

Answer 1

In Unit Tests soll alles außer getestete Einheit verspottet oder stubbed sein.

@Component({ selector: 'hero-list' }) 
class MockedHeroesListComponent {} 

TestBed.configureTestingModule({ 
    declarations: [ 
    HeroesComponent, 
    MockedHeroesListComponent 
    ] 
}); 

HeroesComponent Tests Test sollte nicht heroesListComponent.heroesService: Original <hero-list> sollte mit einem Mock ersetzt werden. Alles was behauptet werden sollte ist, dass <hero-list> kompiliert wurde. heroesListComponent.heroesService sollte in HeroesListComponent Test mit echten HeroesListComponent getestet werden.