title: How to spyOn child components in Angular?
body: <p>In the Angular tutorials they have an example of a <code>HeroesComponent</code> with a child <code>HeroesListComponent</code>.</p>
  
  <p>The <code>HeroesListComponent</code> uses a <code>HeroesService</code> to <code>getHeroes()</code>.</p>
  
  <p>To <code>spyOn</code> <code>getHeroes()</code> inside <code>heroes-list.component.spec.ts</code>, we can do</p>
  
  <pre><code>spyOn(fixture.debugElement.componentInstance.heroesService, 'getHeroes').and.returnValue(Promise.resolve([]))
  </code></pre>
  
  <p>My question is: If I was inside of <code>HeroesComponent</code> spec file - <code>heroes.component.spec.ts</code> can I <code>spyOn</code> the child <code>HeroesListComponent</code> <code>getHeroes()</code> by doing something like this:</p>
  
  <pre><code>spyOn(fixture.debugElement.componentInstance.heroesListComponent.heroesService, 'getHeroes').and.returnValue(Promise.resolve([]))
  </code></pre>
  
  <p>Obviously this did not work, so I am asking if anyone can help me with a solution. </p>
  
  <p>I want to do this, because I want to test if my <code>&lt;hero-list&gt;</code> loaded properly when I open <code>HeroesComponent</code>. This may seem repetitive as I already have a test to make sure <code>HeroesListComponent</code> works, but I think it's still an important test because I really want to make sure my <code>HeroesComponent</code> loaded properly and all of the child components too.</p>
  
  <p>I also tried mocking the entire <code>HeroesService</code> inside of <code>HeroesComponent</code>, instead of using <code>spyOn</code>, but I can't get that syntax to work either. I don't know how to tell <code>HeroesListComponent</code> to use the mock object when i'm inside <code>heroes.component.spec.ts</code></p>
  
  <p>Thanks!</p>