title: Using Angular 2's TestComponentBuilder confuses me
body: <p>I'm working on an Angular 2-rc3 application and I have some unittests set up and they're working, yay! I just don't understand why they have to be written the way they do. And even more amazing, <a href="http://chariotsolutions.com/blog/post/testing-angular-2-components-unit-tests-testcomponentbuilder/" rel="nofollow noreferrer">all</a> <a href="https://medium.com/google-developer-experts/angular-2-unit-testing-with-jasmine-defe20421584#.xwz347m87" rel="nofollow noreferrer">the</a> <a href="https://stackoverflow.com/questions/36046599/can-testcomponentbuilder-test-an-angular-component-within-a-component">examples</a> <a href="https://stackoverflow.com/questions/37863501/angular-2-testcomponentbuilder-error-typeerror-attempted-to-assign-to-readon">I</a> <a href="https://stackoverflow.com/questions/34486476/angular2-and-karma-issue">see</a> have the same approach. Specifically, these questions are on the top of my list:</p>
  
  <ol>
  <li><p>Why is the <code>TestComponentBuilder</code> configured in every unittest?</p>
  
  <pre><code>it('shows list of blog items by default', inject([TestComponentBuilder], (tcb: TestComponentBuilder) =&gt; {
      return tcb
      .overrideProviders(BlogRoll, [provide(BlogService, {
              useValue: mockBlogService
          })])
          .createAsync(BlogRoll)
          .then((fixture) =&gt; {
          // actual test code
      });
  });
  </code></pre>
  
  <p>That's already seven lines of code extra per unittest and the readability of my code suffers a lot from this. I've tried placing this in a <code>beforeEach()</code>:</p>
  
  <pre><code>beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) =&gt; {
      console.log('beforeEach');
      return tcb.overrideProviders(BlogRoll, [provide(BlogService, {
              useValue: mockBlogService
          })])
          .createAsync(BlogRoll)
          .then(fixture =&gt; {
              // this never gets printed
              console.log('in then:', fixture.componentInstance);
          });
  }));
  </code></pre>
  
  <p>but Karma doesn't seem to be able to handle the asyncness, everything in the <code>then</code> just doesn't get executed. Is this a bug or is this intended, are we not supposed to do it like this?</p></li>
  <li><p>Why does the creation of this component need to happen asynchronous? There's a <code>createSync()</code> on the <a href="https://angular.io/docs/ts/latest/api/compiler/testing/TestComponentBuilder-class.html" rel="nofollow noreferrer">TestComponentBuilder class</a>, can't we use that? Of course I tried it and found out that the function signatures differ: <code>createAsync(rootComponentType: Type) : Promise&lt;ComponentFixture&lt;any&gt;&gt;</code> and <code>createSync(componentFactory: ComponentFactory&lt;C&gt;) : ComponentFixture&lt;C&gt;</code>. Why do we need a component factory here, why don't we need it when creating the component async? <strong>// Update</strong>: RC4 is out and <code>createSync()</code> now accepts a Type. Great.</p></li>
  </ol>
  
  <p>My sanity thanks you already!</p>