тест angular2, как мне издеваться над подкомпонентом

Как мне макет подкомпонента в тестах жасмина?

я имеюMyComponent, который используетMyNavbarComponent а такжеMyToolbarComponent

import {Component} from 'angular2/core';
import {MyNavbarComponent} from './my-navbar.component';
import {MyToolbarComponent} from './my-toolbar.component';

@Component({
  selector: 'my-app',
  template: `
    <my-toolbar></my-toolbar>
    {{foo}}
    <my-navbar></my-navbar>
  `,
  directives: [MyNavbarComponent, MyToolbarComponent]
})
export class MyComponent {}

Когда я тестирую этот компонент, я не хочу загружать и тестировать эти два подкомпонента; MyNavbarComponent, MyToolbarComponent, поэтому я хочу издеваться над ним.

Я умею издеваться над сервисами используяprovide(MyService, useClass(...)), но я понятия не имею, как издеваться над директивами; компоненты;

  beforeEach(() => {
    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) => {
    return tcb.createAsync(MyComponent).then((fixture) => {
      let DOM = fixture.nativeElement;
      let myComponent = fixture.componentInstance;
      myComponent.foo = 'FOO';
      fixture.detectChanges();
      expect(DOM.innerHTML).toMatch('FOO');
    });
  });

Вот мой пример плунжера;

http://plnkr.co/edit/q1l1y8?p=preview