title: Angular 2: How to unit test tabs component with tightly coupled parent and child components
body: <p>I followed along <a href="https://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html" rel="nofollow noreferrer">Thoughtram's article</a> to create a tab component.</p>
  
  <p>It basically creates two components: <code>Tab</code> and <code>Tabs</code>. Here <code>Tabs</code> component is the parent/host of <code>Tab</code> component to group all tabs together. I need to be able to unit test both the components.</p>
  
  <p>The test scenarios that comes to my mind are:</p>
  
  <ul>
  <li><code>Tab</code> must inject the parent component that it depends on: <code>Tabs</code></li>
  <li>The first tab must be selected by default.</li>
  <li>function <code>addTab</code> of <code>Tabs</code> must be called once from <code>Tab</code> component</li>
  <li>function <code>selectTab</code> must be called on click of corresponding tab and the function in turn should set the tab to be active and all other tabs to inactive state.</li>
  <li>and there can be a few more I suppose...</li>
  </ul>
  
  <p>Problem is that I don't know how to test these things and what should be a good approach to do it. I have been though the angular docs but I couldn't get my head around for this scenario. Can somebody please help?</p>