title: Angular - Writing Integration Tests for a component referencing child component via @ViewChild
body: <p>I have to write the test case where it is calling the function within the function.</p>
  
  <ol>
  <li>this is the main component of which I want to write test case. Want to write a unit test for <code>openModel</code> function.</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@ViewChild(SecondComponent) public secondComponent: SecondComponent;
  
  openModal() {
    this.secondComponent.showModal();
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>This is the second component which has <code>showModal</code> function.</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@ViewChild(ModalComponent) public modalComponent: ModalComponent;
  
  public showModal() {
    this.modalComponent.showModal();
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>This is my attempted test case so far.</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>it(
    'should open drop modal', () =&gt; {
      const showModalSpy = spyOn(SecondComponent, 'showModal').and.callThrough();
      component.openModal();
      expect(showModalSpy).toHaveBeenCalled();
    }
  );</code></pre>
  </div>
  </div>
  </p>