title: angular2 test, how do I mock sub component
body: <p>How do I mock sub component in jasmine tests?</p>
  
  <p>I have <code>MyComponent</code>, which uses <code>MyNavbarComponent</code> and <code>MyToolbarComponent</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component} from 'angular2/core';
  import {MyNavbarComponent} from './my-navbar.component';
  import {MyToolbarComponent} from './my-toolbar.component';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;my-toolbar&gt;&lt;/my-toolbar&gt;
      {{foo}}
      &lt;my-navbar&gt;&lt;/my-navbar&gt;
    `,
    directives: [MyNavbarComponent, MyToolbarComponent]
  })
  export class MyComponent {}
  </code></pre>
  
  <p>When I test this component, I do not want to load and test those two sub components; MyNavbarComponent, MyToolbarComponent, so I want to mock it.</p>
  
  <p>I know how to mock with services using <code>provide(MyService, useClass(...))</code>, but I have no idea how to mock directives; components;</p>
  
  <pre class="lang-js prettyprint-override"><code>  beforeEach(() =&gt; {
      setBaseTestProviders(
        TEST_BROWSER_PLATFORM_PROVIDERS,
        TEST_BROWSER_APPLICATION_PROVIDERS
      );
  
      //TODO: want to mock unnecessary directives for this component test
      // which are MyNavbarComponent and MyToolbarComponent
    })
  
    it('should bind to {{foo}}', injectAsync([TestComponentBuilder], (tcb) =&gt; {
      return tcb.createAsync(MyComponent).then((fixture) =&gt; {
        let DOM = fixture.nativeElement;
        let myComponent = fixture.componentInstance;
        myComponent.foo = 'FOO';
        fixture.detectChanges();
        expect(DOM.innerHTML).toMatch('FOO');
      });
    });
  </code></pre>
  
  <p>Here is my plunker example;</p>
  
  <p><a href="http://plnkr.co/edit/q1l1y8?p=preview" rel="noreferrer">http://plnkr.co/edit/q1l1y8?p=preview</a></p>