From 2c11205b96c7a8095a260268c32a4cad02c36073 Mon Sep 17 00:00:00 2001
From: Julie Ralph <ju.ralph@gmail.com>
Date: Tue, 23 Jun 2015 14:02:01 -0700
Subject: [PATCH] chore(testbed): migrate compiler integration spec to
 testcomponentbuilder

Part of #2354
---
 modules/angular2/src/debug/debug_element.ts   |    2 +
 .../test/core/compiler/integration_spec.ts    | 1335 +++++++++--------
 2 files changed, 687 insertions(+), 650 deletions(-)

diff --git a/modules/angular2/src/debug/debug_element.ts b/modules/angular2/src/debug/debug_element.ts
index 47dac8ae10..02fdde7fa4 100644
--- a/modules/angular2/src/debug/debug_element.ts
+++ b/modules/angular2/src/debug/debug_element.ts
@@ -87,6 +87,8 @@ export class DebugElement {
     return this._elementInjector.get(type);
   }
 
+  getLocal(name: string): any { return this._parentView.locals.get(name); }
+
   /**
    * Return the first descendant TestElememt matching the given predicate
    * and scope.
diff --git a/modules/angular2/test/core/compiler/integration_spec.ts b/modules/angular2/test/core/compiler/integration_spec.ts
index 0c3643a459..2adab993f1 100644
--- a/modules/angular2/test/core/compiler/integration_spec.ts
+++ b/modules/angular2/test/core/compiler/integration_spec.ts
@@ -14,12 +14,11 @@ import {
   it,
   xit,
   containsRegexp,
-  stringifyElement
+  stringifyElement,
+  TestComponentBuilder
 } from 'angular2/test_lib';
 
 
-import {TestBed} from 'angular2/src/test_lib/test_bed';
-
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {
   Type,
@@ -76,58 +75,55 @@ const ANCHOR_ELEMENT = CONST_EXPR(new OpaqueToken('AnchorElement'));
 
 export function main() {
   describe('integration tests', function() {
-    var ctx;
 
     beforeEachBindings(() => [bind(ANCHOR_ELEMENT).toValue(el('<div></div>'))]);
 
-    beforeEach(() => { ctx = new MyComp(); });
-
-
     describe('react to record changes', function() {
       it('should consume text node changes',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({template: '<div>{{ctxProp}}</div>'}));
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 ctx.ctxProp = 'Hello World!';
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({template: '<div>{{ctxProp}}</div>'}))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.componentInstance.ctxProp = 'Hello World!';
 
-                 view.detectChanges();
-                 expect(DOM.getInnerHTML(view.rootNodes[0])).toEqual('Hello World!');
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('Hello World!');
                  async.done();
                });
          }));
 
       it('should consume element binding changes',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({template: '<div [id]="ctxProp"></div>'}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({template: '<div [id]="ctxProp"></div>'}))
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+                 rootTC.componentInstance.ctxProp = 'Hello World!';
+                 rootTC.detectChanges();
 
-                 ctx.ctxProp = 'Hello World!';
-                 view.detectChanges();
-
-                 expect(view.rootNodes[0].id).toEqual('Hello World!');
+                 expect(rootTC.componentViewChildren[0].nativeElement.id).toEqual('Hello World!');
                  async.done();
                });
          }));
 
       it('should consume binding to aria-* attributes',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp,
-                           new viewAnn.View({template: '<div [attr.aria-label]="ctxProp"></div>'}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp,
+                            new viewAnn.View({template: '<div [attr.aria-label]="ctxProp"></div>'}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 ctx.ctxProp = 'Initial aria label';
-                 view.detectChanges();
-                 expect(DOM.getAttribute(view.rootNodes[0], 'aria-label'))
+                 rootTC.componentInstance.ctxProp = 'Initial aria label';
+                 rootTC.detectChanges();
+                 expect(
+                     DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, 'aria-label'))
                      .toEqual('Initial aria label');
 
-                 ctx.ctxProp = 'Changed aria label';
-                 view.detectChanges();
-                 expect(DOM.getAttribute(view.rootNodes[0], 'aria-label'))
+                 rootTC.componentInstance.ctxProp = 'Changed aria label';
+                 rootTC.detectChanges();
+                 expect(
+                     DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, 'aria-label'))
                      .toEqual('Changed aria label');
 
                  async.done();
@@ -135,84 +131,86 @@ export function main() {
          }));
 
       it('should consume binding to property names where attr name and property name do not match',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp,
-                           new viewAnn.View({template: '<div [tabindex]="ctxNumProp"></div>'}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp,
+                            new viewAnn.View({template: '<div [tabindex]="ctxNumProp"></div>'}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 view.detectChanges();
-                 expect(view.rootNodes[0].tabIndex).toEqual(0);
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.tabIndex).toEqual(0);
 
-                 ctx.ctxNumProp = 5;
-                 view.detectChanges();
-                 expect(view.rootNodes[0].tabIndex).toEqual(5);
+                 rootTC.componentInstance.ctxNumProp = 5;
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.tabIndex).toEqual(5);
 
                  async.done();
                });
          }));
 
       it('should consume binding to camel-cased properties using dash-cased syntax in templates',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp,
-                           new viewAnn.View({template: '<input [read-only]="ctxBoolProp">'}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp,
+                            new viewAnn.View({template: '<input [read-only]="ctxBoolProp">'}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 view.detectChanges();
-                 expect(view.rootNodes[0].readOnly).toBeFalsy();
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.readOnly).toBeFalsy();
 
-                 ctx.ctxBoolProp = true;
-                 view.detectChanges();
-                 expect(view.rootNodes[0].readOnly).toBeTruthy();
+                 rootTC.componentInstance.ctxBoolProp = true;
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.readOnly).toBeTruthy();
 
                  async.done();
                });
          }));
 
       it('should consume binding to inner-html',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp,
-                           new viewAnn.View({template: '<div inner-html="{{ctxProp}}"></div>'}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp,
+                            new viewAnn.View({template: '<div inner-html="{{ctxProp}}"></div>'}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 ctx.ctxProp = 'Some <span>HTML</span>';
-                 view.detectChanges();
-                 expect(DOM.getInnerHTML(view.rootNodes[0])).toEqual('Some <span>HTML</span>');
+                 rootTC.componentInstance.ctxProp = 'Some <span>HTML</span>';
+                 rootTC.detectChanges();
+                 expect(DOM.getInnerHTML(rootTC.componentViewChildren[0].nativeElement))
+                     .toEqual('Some <span>HTML</span>');
 
-                 ctx.ctxProp = 'Some other <div>HTML</div>';
-                 view.detectChanges();
-                 expect(DOM.getInnerHTML(view.rootNodes[0])).toEqual('Some other <div>HTML</div>');
+                 rootTC.componentInstance.ctxProp = 'Some other <div>HTML</div>';
+                 rootTC.detectChanges();
+                 expect(DOM.getInnerHTML(rootTC.componentViewChildren[0].nativeElement))
+                     .toEqual('Some other <div>HTML</div>');
 
                  async.done();
                });
          }));
 
       it('should consume directive watch expression change.',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var tpl = '<div>' +
                      '<div my-dir [elprop]="ctxProp"></div>' +
                      '<div my-dir elprop="Hi there!"></div>' +
                      '<div my-dir elprop="Hi {{\'there!\'}}"></div>' +
                      '<div my-dir elprop="One more {{ctxProp}}"></div>' +
                      '</div>';
-           tb.overrideView(MyComp, new viewAnn.View({template: tpl, directives: [MyDir]}));
+           tcb.overrideView(MyComp, new viewAnn.View({template: tpl, directives: [MyDir]}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 ctx.ctxProp = 'Hello World!';
-                 view.detectChanges();
+                 rootTC.componentInstance.ctxProp = 'Hello World!';
+                 rootTC.detectChanges();
 
-                 expect(view.rawView.elementInjectors[0].get(MyDir).dirProp)
+                 expect(rootTC.componentViewChildren[0].inject(MyDir).dirProp)
                      .toEqual('Hello World!');
-                 expect(view.rawView.elementInjectors[1].get(MyDir).dirProp).toEqual('Hi there!');
-                 expect(view.rawView.elementInjectors[2].get(MyDir).dirProp).toEqual('Hi there!');
-                 expect(view.rawView.elementInjectors[3].get(MyDir).dirProp)
+                 expect(rootTC.componentViewChildren[1].inject(MyDir).dirProp).toEqual('Hi there!');
+                 expect(rootTC.componentViewChildren[2].inject(MyDir).dirProp).toEqual('Hi there!');
+                 expect(rootTC.componentViewChildren[3].inject(MyDir).dirProp)
                      .toEqual('One more Hello World!');
                  async.done();
                });
@@ -229,88 +227,92 @@ export function main() {
         });
 
         it("should support pipes in bindings",
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>',
-               directives: [MyDir]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
+                    tcb.overrideView(MyComp, new viewAnn.View({
+                         template: '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>',
+                         directives: [MyDir]
+                       }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   ctx.ctxProp = 'a';
-                   view.detectChanges();
+                        .createAsync(MyComp)
+                        .then((rootTC) => {
+                          rootTC.componentInstance.ctxProp = 'a';
+                          rootTC.detectChanges();
 
-                   var dir = view.rawView.locals.get("dir");
-                   expect(dir.dirProp).toEqual('aa');
-                   async.done();
-                 });
-           }));
+                          var dir = rootTC.componentViewChildren[0].getLocal('dir');
+                          expect(dir.dirProp).toEqual('aa');
+                          async.done();
+                        });
+                  }));
       });
 
       it('should support nested components.',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(
-               MyComp,
-               new viewAnn.View({template: '<child-cmp></child-cmp>', directives: [ChildComp]}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(
+                  MyComp,
+                  new viewAnn.View({template: '<child-cmp></child-cmp>', directives: [ChildComp]}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 view.detectChanges();
+                 rootTC.detectChanges();
 
-                 expect(view.rootNodes).toHaveText('hello');
+                 expect(rootTC.nativeElement).toHaveText('hello');
                  async.done();
                });
          }));
 
       // GH issue 328 - https://github.com/angular/angular/issues/328
       it('should support different directive types on a single node',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>',
-             directives: [MyDir, ChildComp]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>',
+                directives: [MyDir, ChildComp]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 ctx.ctxProp = 'Hello World!';
-                 view.detectChanges();
+                 rootTC.componentInstance.ctxProp = 'Hello World!';
+                 rootTC.detectChanges();
 
-                 var elInj = view.rawView.elementInjectors[0];
-                 expect(elInj.get(MyDir).dirProp).toEqual('Hello World!');
-                 expect(elInj.get(ChildComp).dirProp).toEqual(null);
+                 var tc = rootTC.componentViewChildren[0];
+
+                 expect(tc.inject(MyDir).dirProp).toEqual('Hello World!');
+                 expect(tc.inject(ChildComp).dirProp).toEqual(null);
 
                  async.done();
                });
          }));
 
       it('should support directives where a binding attribute is not given',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             // No attribute "el-prop" specified.
-             template: '<p my-dir></p>',
-             directives: [MyDir]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                // No attribute "el-prop" specified.
+                template: '<p my-dir></p>',
+                directives: [MyDir]
+              }))
 
-           tb.createView(MyComp, {context: ctx}).then((view) => { async.done(); });
+               .createAsync(MyComp)
+               .then((rootTC) => { async.done(); });
          }));
 
       it('should support directives where a selector matches property binding',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(
-               MyComp, new viewAnn.View({template: '<p [id]="ctxProp"></p>', directives: [IdDir]}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View(
+                                        {template: '<p [id]="ctxProp"></p>', directives: [IdDir]}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 var idDir = view.rawView.elementInjectors[0].get(IdDir);
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var tc = rootTC.componentViewChildren[0];
+                 var idDir = tc.inject(IdDir);
 
-                 ctx.ctxProp = 'some_id';
-                 view.detectChanges();
+                 rootTC.componentInstance.ctxProp = 'some_id';
+                 rootTC.detectChanges();
                  expect(idDir.id).toEqual('some_id');
 
-                 ctx.ctxProp = 'other_id';
-                 view.detectChanges();
+                 rootTC.componentInstance.ctxProp = 'other_id';
+                 rootTC.detectChanges();
                  expect(idDir.id).toEqual('other_id');
 
                  async.done();
@@ -318,87 +320,88 @@ export function main() {
          }));
 
       it('should allow specifying directives as bindings',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: '<child-cmp></child-cmp>',
-             directives: [bind(ChildComp).toClass(ChildComp)]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<child-cmp></child-cmp>',
+                directives: [bind(ChildComp).toClass(ChildComp)]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 view.detectChanges();
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
 
-                 expect(view.rootNodes).toHaveText('hello');
+                 expect(rootTC.nativeElement).toHaveText('hello');
                  async.done();
                });
          }));
 
       it('should read directives metadata from their binding token',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: '<div public-api><div needs-public-api></div></div>',
-             directives: [bind(PublicApi).toClass(PrivateImpl), NeedsPublicApi]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<div public-api><div needs-public-api></div></div>',
+                directives: [bind(PublicApi).toClass(PrivateImpl), NeedsPublicApi]
+              }))
 
-           tb.createView(MyComp, {context: ctx}).then((view) => { async.done(); });
+               .createAsync(MyComp)
+               .then((rootTC) => { async.done(); });
          }));
 
       it('should support template directives via `<template>` elements.',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template:
-                 '<div><template some-viewport var-greeting="some-tmpl"><copy-me>{{greeting}}</copy-me></template></div>',
-             directives: [SomeViewport]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template:
+                    '<div><template some-viewport var-greeting="some-tmpl"><copy-me>{{greeting}}</copy-me></template></div>',
+                directives: [SomeViewport]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 view.detectChanges();
+                 rootTC.detectChanges();
 
-                 var childNodesOfWrapper = view.rootNodes[0].childNodes;
+                 var childNodesOfWrapper = rootTC.componentViewChildren;
                  // 1 template + 2 copies.
                  expect(childNodesOfWrapper.length).toBe(3);
-                 expect(childNodesOfWrapper[1].childNodes[0].nodeValue).toEqual('hello');
-                 expect(childNodesOfWrapper[2].childNodes[0].nodeValue).toEqual('again');
+                 expect(childNodesOfWrapper[1].nativeElement).toHaveText('hello');
+                 expect(childNodesOfWrapper[2].nativeElement).toHaveText('again');
                  async.done();
                });
          }));
 
       it('should support template directives via `template` attribute.',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template:
-                 '<div><copy-me template="some-viewport: var greeting=some-tmpl">{{greeting}}</copy-me></div>',
-             directives: [SomeViewport]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template:
+                    '<div><copy-me template="some-viewport: var greeting=some-tmpl">{{greeting}}</copy-me></div>',
+                directives: [SomeViewport]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 view.detectChanges();
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
 
-                 var childNodesOfWrapper = view.rootNodes[0].childNodes;
+                 var childNodesOfWrapper = rootTC.componentViewChildren;
                  // 1 template + 2 copies.
                  expect(childNodesOfWrapper.length).toBe(3);
-                 expect(childNodesOfWrapper[1].childNodes[0].nodeValue).toEqual('hello');
-                 expect(childNodesOfWrapper[2].childNodes[0].nodeValue).toEqual('again');
+                 expect(childNodesOfWrapper[1].nativeElement).toHaveText('hello');
+                 expect(childNodesOfWrapper[2].nativeElement).toHaveText('again');
                  async.done();
                });
          }));
 
       it('should allow to transplant embedded ProtoViews into other ViewContainers',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template:
-                 '<some-directive><toolbar><template toolbarpart var-toolbar-prop="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-parent></cmp-with-parent></template></toolbar></some-directive>',
-             directives: [SomeDirective, CompWithParent, ToolbarComponent, ToolbarPart]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template:
+                    '<some-directive><toolbar><template toolbarpart var-toolbar-prop="toolbarProp">{{ctxProp}},{{toolbarProp}},<cmp-with-parent></cmp-with-parent></template></toolbar></some-directive>',
+                directives: [SomeDirective, CompWithParent, ToolbarComponent, ToolbarPart]
+              }))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.componentInstance.ctxProp = 'From myComp';
+                 rootTC.detectChanges();
 
-           ctx.ctxProp = 'From myComp';
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes)
+                 expect(rootTC.nativeElement)
                      .toHaveText(
                          'TOOLBAR(From myComp,From toolbar,Component with an injected parent)');
 
@@ -408,138 +411,144 @@ export function main() {
 
       describe("variable bindings", () => {
         it('should assign a component to a var-',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<p><child-cmp var-alice></child-cmp></p>',
-               directives: [ChildComp]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder,
+                   async) => {tcb.overrideView(MyComp, new viewAnn.View({
+                                   template: '<p><child-cmp var-alice></child-cmp></p>',
+                                   directives: [ChildComp]
+                                 }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   expect(view.rawView.locals).not.toBe(null);
-                   expect(view.rawView.locals.get('alice')).toBeAnInstanceOf(ChildComp);
+                                  .createAsync(MyComp)
+                                  .then((rootTC) => {
+                                    expect(rootTC.componentViewChildren[0].getLocal('alice'))
+                                        .toBeAnInstanceOf(ChildComp);
 
-                   async.done();
-                 })
-           }));
+                                    async.done();
+                                  })}));
 
         it('should assign a directive to a var-',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<p><div export-dir #localdir="dir"></div></p>',
-               directives: [ExportDir]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
+                    tcb.overrideView(MyComp, new viewAnn.View({
+                         template: '<p><div export-dir #localdir="dir"></div></p>',
+                         directives: [ExportDir]
+                       }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   expect(view.rawView.locals).not.toBe(null);
-                   expect(view.rawView.locals.get('localdir')).toBeAnInstanceOf(ExportDir);
+                        .createAsync(MyComp)
+                        .then((rootTC) => {
+                          expect(rootTC.componentViewChildren[0].getLocal('localdir'))
+                              .toBeAnInstanceOf(ExportDir);
 
-                   async.done();
-                 });
-           }));
+                          async.done();
+                        });
+                  }));
 
         it('should make the assigned component accessible in property bindings',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<p><child-cmp var-alice></child-cmp>{{alice.ctxProp}}</p>',
-               directives: [ChildComp]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
+                      tcb.overrideView(MyComp, new viewAnn.View({
+                           template: '<p><child-cmp var-alice></child-cmp>{{alice.ctxProp}}</p>',
+                           directives: [ChildComp]
+                         }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   view.detectChanges();
+                          .createAsync(MyComp)
+                          .then((rootTC) => {
+                            rootTC.detectChanges();
 
-                   expect(view.rootNodes).toHaveText('hellohello');  // this first one is the
-                                                                     // component, the second one is
-                                                                     // the text binding
-                   async.done();
-                 })
-           }));
+                            expect(rootTC.nativeElement)
+                                .toHaveText('hellohello');  // this first one is the
+                                                            // component, the second one is
+                                                            // the text binding
+                            async.done();
+                          })}));
 
         it('should assign two component instances each with a var-',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<p><child-cmp var-alice></child-cmp><child-cmp var-bob></p>',
-               directives: [ChildComp]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
+                      tcb.overrideView(MyComp, new viewAnn.View({
+                           template: '<p><child-cmp var-alice></child-cmp><child-cmp var-bob></p>',
+                           directives: [ChildComp]
+                         }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
+                          .createAsync(MyComp)
+                          .then((rootTC) => {
 
-                   expect(view.rawView.locals).not.toBe(null);
-                   expect(view.rawView.locals.get('alice')).toBeAnInstanceOf(ChildComp);
-                   expect(view.rawView.locals.get('bob')).toBeAnInstanceOf(ChildComp);
-                   expect(view.rawView.locals.get('alice'))
-                       .not.toBe(view.rawView.locals.get('bob'));
+                            expect(rootTC.componentViewChildren[0].getLocal('alice'))
+                                .toBeAnInstanceOf(ChildComp);
+                            expect(rootTC.componentViewChildren[0].getLocal('bob'))
+                                .toBeAnInstanceOf(ChildComp);
+                            expect(rootTC.componentViewChildren[0].getLocal('alice'))
+                                .not.toBe(rootTC.componentViewChildren[0].getLocal('bob'));
 
-                   async.done();
-                 })
-           }));
+                            async.done();
+                          })}));
 
         it('should assign the component instance to a var- with shorthand syntax',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(
-                 MyComp,
-                 new viewAnn.View(
-                     {template: '<child-cmp #alice></child-cmp>', directives: [ChildComp]}));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder,
+                   async) => {tcb.overrideView(MyComp, new viewAnn.View({
+                                   template: '<child-cmp #alice></child-cmp>',
+                                   directives: [ChildComp]
+                                 }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
+                                  .createAsync(MyComp)
+                                  .then((rootTC) => {
 
-                   expect(view.rawView.locals).not.toBe(null);
-                   expect(view.rawView.locals.get('alice')).toBeAnInstanceOf(ChildComp);
+                                    expect(rootTC.componentViewChildren[0].getLocal('alice'))
+                                        .toBeAnInstanceOf(ChildComp);
 
-                   async.done();
-                 })
-           }));
+                                    async.done();
+                                  })}));
 
         it('should assign the element instance to a user-defined variable',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(
-                 MyComp, new viewAnn.View({template: '<p><div var-alice><i>Hello</i></div></p>'}));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
+                      tcb.overrideView(MyComp,
+                                       new viewAnn.View(
+                                           {template: '<p><div var-alice><i>Hello</i></div></p>'}))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   expect(view.rawView.locals).not.toBe(null);
+                          .createAsync(MyComp)
+                          .then((rootTC) => {
 
-                   var value = view.rawView.locals.get('alice');
-                   expect(value).not.toBe(null);
-                   expect(value.tagName.toLowerCase()).toEqual('div');
+                            var value = rootTC.componentViewChildren[0].getLocal('alice');
+                            expect(value).not.toBe(null);
+                            expect(value.tagName.toLowerCase()).toEqual('div');
 
-                   async.done();
-                 })
-           }));
+                            async.done();
+                          })}));
 
         it('should change dash-case to camel-case',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<p><child-cmp var-super-alice></child-cmp></p>',
-               directives: [ChildComp]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
+                    tcb.overrideView(MyComp, new viewAnn.View({
+                         template: '<p><child-cmp var-super-alice></child-cmp></p>',
+                         directives: [ChildComp]
+                       }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   expect(view.rawView.locals).not.toBe(null);
-                   expect(view.rawView.locals.get('superAlice')).toBeAnInstanceOf(ChildComp);
+                        .createAsync(MyComp)
+                        .then((rootTC) => {
+                          expect(rootTC.componentViewChildren[0].getLocal('superAlice'))
+                              .toBeAnInstanceOf(ChildComp);
 
-                   async.done();
-                 });
-           }));
+                          async.done();
+                        });
+                  }));
 
         it('should allow to use variables in a for loop',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template:
-                   '<div><div *ng-for="var i of [1]"><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</div></div>',
-               directives: [ChildCompNoTemplate, NgFor]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
+                                                               async) => {
+             tcb.overrideView(MyComp, new viewAnn.View({
+                  template:
+                      '<div><div *ng-for="var i of [1]"><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</div></div>',
+                  directives: [ChildCompNoTemplate, NgFor]
+                }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   view.detectChanges();
+                 .createAsync(MyComp)
+                 .then((rootTC) => {
+                   rootTC.detectChanges();
 
-                   expect(view.rootNodes).toHaveText("1-hello");
+                   // Get the element at index 1, since index 0 is the <template>.
+                   expect(rootTC.componentViewChildren[1].nativeElement).toHaveText("1-hello");
 
                    async.done();
                  });
@@ -548,139 +557,142 @@ export function main() {
 
       describe("ON_PUSH components", () => {
         it("should use ChangeDetectorRef to manually request a check",
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
 
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<push-cmp-with-ref #cmp></push-cmp-with-ref>',
-               directives: [[[PushCmpWithRef]]]
-             }));
+                      tcb.overrideView(MyComp, new viewAnn.View({
+                           template: '<push-cmp-with-ref #cmp></push-cmp-with-ref>',
+                           directives: [[[PushCmpWithRef]]]
+                         }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
+                          .createAsync(MyComp)
+                          .then((rootTC) => {
 
-                   var cmp = view.rawView.locals.get('cmp');
+                            var cmp = rootTC.componentViewChildren[0].getLocal('cmp');
 
-                   view.detectChanges();
-                   expect(cmp.numberOfChecks).toEqual(1);
+                            rootTC.detectChanges();
+                            expect(cmp.numberOfChecks).toEqual(1);
 
-                   view.detectChanges();
-                   expect(cmp.numberOfChecks).toEqual(1);
+                            rootTC.detectChanges();
+                            expect(cmp.numberOfChecks).toEqual(1);
 
-                   cmp.propagate();
+                            cmp.propagate();
 
-                   view.detectChanges();
-                   expect(cmp.numberOfChecks).toEqual(2);
-                   async.done();
-                 })
-           }));
+                            rootTC.detectChanges();
+                            expect(cmp.numberOfChecks).toEqual(2);
+                            async.done();
+                          })}));
 
         it("should be checked when its bindings got updated",
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
 
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<push-cmp [prop]="ctxProp" #cmp></push-cmp>',
-               directives: [[[PushCmp]]]
-             }));
+                      tcb.overrideView(MyComp, new viewAnn.View({
+                           template: '<push-cmp [prop]="ctxProp" #cmp></push-cmp>',
+                           directives: [[[PushCmp]]]
+                         }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   var cmp = view.rawView.locals.get('cmp');
+                          .createAsync(MyComp)
+                          .then((rootTC) => {
+                            var cmp = rootTC.componentViewChildren[0].getLocal('cmp');
 
-                   ctx.ctxProp = "one";
-                   view.detectChanges();
-                   expect(cmp.numberOfChecks).toEqual(1);
+                            rootTC.componentInstance.ctxProp = "one";
+                            rootTC.detectChanges();
+                            expect(cmp.numberOfChecks).toEqual(1);
 
-                   ctx.ctxProp = "two";
-                   view.detectChanges();
-                   expect(cmp.numberOfChecks).toEqual(2);
+                            rootTC.componentInstance.ctxProp = "two";
+                            rootTC.detectChanges();
+                            expect(cmp.numberOfChecks).toEqual(2);
 
-                   async.done();
-                 })
-           }));
+                            async.done();
+                          })}));
 
         it('should not affect updating properties on the component',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<push-cmp-with-ref [prop]="ctxProp" #cmp></push-cmp-with-ref>',
-               directives: [[[PushCmpWithRef]]]
-             }));
+           inject(
+               [TestComponentBuilder, AsyncTestCompleter],
+               (tcb: TestComponentBuilder, async) => {
+                   tcb.overrideView(MyComp, new viewAnn.View({
+                        template: '<push-cmp-with-ref [prop]="ctxProp" #cmp></push-cmp-with-ref>',
+                        directives: [[[PushCmpWithRef]]]
+                      }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
+                       .createAsync(MyComp)
+                       .then((rootTC) => {
 
-                   var cmp = view.rawView.locals.get('cmp');
+                         var cmp = rootTC.componentViewChildren[0].getLocal('cmp');
 
-                   ctx.ctxProp = "one";
-                   view.detectChanges();
-                   expect(cmp.prop).toEqual("one");
+                         rootTC.componentInstance.ctxProp = "one";
+                         rootTC.detectChanges();
+                         expect(cmp.prop).toEqual("one");
 
-                   ctx.ctxProp = "two";
-                   view.detectChanges();
-                   expect(cmp.prop).toEqual("two");
+                         rootTC.componentInstance.ctxProp = "two";
+                         rootTC.detectChanges();
+                         expect(cmp.prop).toEqual("two");
 
-                   async.done();
-                 })
-           }));
+                         async.done();
+                       })}));
       });
 
       it('should create a component that injects a @Parent',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template:
-                 '<some-directive><cmp-with-parent #child></cmp-with-parent></some-directive>',
-             directives: [SomeDirective, CompWithParent]
-           }));
+         inject(
+             [TestComponentBuilder, AsyncTestCompleter],
+             (tcb: TestComponentBuilder, async) => {
+                 tcb.overrideView(MyComp, new viewAnn.View({
+                      template:
+                          '<some-directive><cmp-with-parent #child></cmp-with-parent></some-directive>',
+                      directives: [SomeDirective, CompWithParent]
+                    }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+                     .createAsync(MyComp)
+                     .then((rootTC) => {
 
-                 var childComponent = view.rawView.locals.get('child');
-                 expect(childComponent.myParent).toBeAnInstanceOf(SomeDirective);
+                       var childComponent = rootTC.componentViewChildren[0].getLocal('child');
+                       expect(childComponent.myParent).toBeAnInstanceOf(SomeDirective);
 
-                 async.done();
-               })
-         }));
+                       async.done();
+                     })}));
 
       it('should create a component that injects an @Ancestor',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: `
+         inject([TestComponentBuilder, AsyncTestCompleter],
+                (tcb: TestComponentBuilder, async) => {
+                    tcb.overrideView(MyComp, new viewAnn.View({
+                         template: `
             <some-directive>
               <p>
                 <cmp-with-ancestor #child></cmp-with-ancestor>
               </p>
             </some-directive>`,
-             directives: [SomeDirective, CompWithAncestor]
-           }));
+                         directives: [SomeDirective, CompWithAncestor]
+                       }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+                        .createAsync(MyComp)
+                        .then((rootTC) => {
 
-                 var childComponent = view.rawView.locals.get('child');
-                 expect(childComponent.myAncestor).toBeAnInstanceOf(SomeDirective);
+                          var childComponent = rootTC.componentViewChildren[0].getLocal('child');
+                          expect(childComponent.myAncestor).toBeAnInstanceOf(SomeDirective);
 
-                 async.done();
-               })
-         }));
+                          async.done();
+                        })}));
 
       it('should create a component that injects an @Ancestor through viewcontainer directive',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: `
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: `
             <some-directive>
               <p *ng-if="true">
                 <cmp-with-ancestor #child></cmp-with-ancestor>
               </p>
             </some-directive>`,
-             directives: [SomeDirective, CompWithAncestor, NgIf]
-           }));
+                directives: [SomeDirective, CompWithAncestor, NgIf]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 view.detectChanges();
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
 
-                 var subview = view.rawView.viewContainers[1].views[0];
-                 var childComponent = subview.locals.get('child');
+                 var tc = rootTC.componentViewChildren[0].children[1];
+
+                 var childComponent = tc.getLocal('child');
                  expect(childComponent.myAncestor).toBeAnInstanceOf(SomeDirective);
 
                  async.done();
@@ -688,19 +700,18 @@ export function main() {
          }));
 
       it('should support events via EventEmitter',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: '<div emitter listener></div>',
-             directives: [DirectiveEmitingEvent, DirectiveListeningEvent]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<div emitter listener></div>',
+                directives: [DirectiveEmitingEvent, DirectiveListeningEvent]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 var injector = view.rawView.elementInjectors[0];
-
-                 var emitter = injector.get(DirectiveEmitingEvent);
-                 var listener = injector.get(DirectiveListeningEvent);
+                 var tc = rootTC.componentViewChildren[0];
+                 var emitter = tc.inject(DirectiveEmitingEvent);
+                 var listener = tc.inject(DirectiveListeningEvent);
 
                  expect(listener.msg).toEqual('');
 
@@ -714,24 +725,24 @@ export function main() {
          }));
 
       it('should support [()] syntax',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: '<div [(control)]="ctxProp" two-way></div>',
-             directives: [DirectiveWithTwoWayBinding]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<div [(control)]="ctxProp" two-way></div>',
+                directives: [DirectiveWithTwoWayBinding]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 var injector = view.rawView.elementInjectors[0];
-                 var dir = injector.get(DirectiveWithTwoWayBinding);
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var tc = rootTC.componentViewChildren[0];
+                 var dir = tc.inject(DirectiveWithTwoWayBinding);
 
-                 ctx.ctxProp = 'one';
-                 view.detectChanges();
+                 rootTC.componentInstance.ctxProp = 'one';
+                 rootTC.detectChanges();
 
                  expect(dir.value).toEqual('one');
 
                  ObservableWrapper.subscribe(dir.control, (_) => {
-                   expect(ctx.ctxProp).toEqual('two');
+                   expect(rootTC.componentInstance.ctxProp).toEqual('two');
                    async.done();
                  });
 
@@ -741,43 +752,43 @@ export function main() {
 
       if (DOM.supportsDOMEvents()) {
         it("should support invoking methods on the host element via hostActions",
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<div update-host-actions></div>',
-               directives: [DirectiveUpdatingHostActions]
-             }));
+           inject(
+               [TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+                 tcb.overrideView(MyComp, new viewAnn.View({
+                      template: '<div update-host-actions></div>',
+                      directives: [DirectiveUpdatingHostActions]
+                    }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   var injector = view.rawView.elementInjectors[0];
-                   var domElement = view.rootNodes[0];
-                   var updateHost = injector.get(DirectiveUpdatingHostActions);
+                     .createAsync(MyComp)
+                     .then((rootTC) => {
+                       var tc = rootTC.componentViewChildren[0];
+                       var nativeElement = tc.nativeElement;
+                       var updateHost = tc.inject(DirectiveUpdatingHostActions);
 
-                   ObservableWrapper.subscribe(updateHost.setAttr, (_) => {
-                     expect(DOM.hasAttribute(domElement, 'update-host-actions')).toBe(true);
-                     async.done();
-                   });
+                       ObservableWrapper.subscribe(updateHost.setAttr, (_) => {
+                         expect(DOM.hasAttribute(nativeElement, 'update-host-actions')).toBe(true);
+                         async.done();
+                       });
 
-                   updateHost.triggerSetAttr('value');
-                 });
-           }));
+                       updateHost.triggerSetAttr('value');
+                     });
+               }));
       }
 
       it('should support render events',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(
-               MyComp,
-               new viewAnn.View(
-                   {template: '<div listener></div>', directives: [DirectiveListeningDomEvent]}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(
+                  MyComp,
+                  new viewAnn.View(
+                      {template: '<div listener></div>', directives: [DirectiveListeningDomEvent]}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
 
-                 var injector = view.rawView.elementInjectors[0];
+                 var tc = rootTC.componentViewChildren[0];
+                 var listener = tc.inject(DirectiveListeningDomEvent);
 
-                 var listener = injector.get(DirectiveListeningDomEvent);
-
-                 dispatchEvent(view.rootNodes[0], 'domEvent');
+                 dispatchEvent(tc.nativeElement, 'domEvent');
 
                  expect(listener.eventType).toEqual('domEvent');
 
@@ -786,26 +797,25 @@ export function main() {
          }));
 
       it('should support render global events',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(
-               MyComp,
-               new viewAnn.View(
-                   {template: '<div listener></div>', directives: [DirectiveListeningDomEvent]}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(
+                  MyComp,
+                  new viewAnn.View(
+                      {template: '<div listener></div>', directives: [DirectiveListeningDomEvent]}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 var injector = view.rawView.elementInjectors[0];
-
-                 var listener = injector.get(DirectiveListeningDomEvent);
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var tc = rootTC.componentViewChildren[0];
+                 var listener = tc.inject(DirectiveListeningDomEvent);
                  dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
                  expect(listener.eventType).toEqual('window_domEvent');
 
-                 listener = injector.get(DirectiveListeningDomEvent);
+                 listener = tc.inject(DirectiveListeningDomEvent);
                  dispatchEvent(DOM.getGlobalEventTarget("document"), 'domEvent');
                  expect(listener.eventType).toEqual('document_domEvent');
 
-                 view.destroy();
-                 listener = injector.get(DirectiveListeningDomEvent);
+                 rootTC.destroy();
+                 listener = tc.inject(DirectiveListeningDomEvent);
                  dispatchEvent(DOM.getGlobalEventTarget("body"), 'domEvent');
                  expect(listener.eventType).toEqual('');
 
@@ -814,39 +824,40 @@ export function main() {
          }));
 
       it('should support updating host element via hostAttributes',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: '<div update-host-attributes></div>',
-             directives: [DirectiveUpdatingHostAttributes]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<div update-host-attributes></div>',
+                directives: [DirectiveUpdatingHostAttributes]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 view.detectChanges();
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
 
-                 expect(DOM.getAttribute(view.rootNodes[0], "role")).toEqual("button");
+                 expect(DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, "role"))
+                     .toEqual("button");
 
                  async.done();
                });
          }));
 
       it('should support updating host element via hostProperties',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: '<div update-host-properties></div>',
-             directives: [DirectiveUpdatingHostProperties]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<div update-host-properties></div>',
+                directives: [DirectiveUpdatingHostProperties]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 var injector = view.rawView.elementInjectors[0];
-                 var updateHost = injector.get(DirectiveUpdatingHostProperties);
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var tc = rootTC.componentViewChildren[0];
+                 var updateHost = tc.inject(DirectiveUpdatingHostProperties);
 
                  updateHost.id = "newId";
 
-                 view.detectChanges();
+                 rootTC.detectChanges();
 
-                 expect(view.rootNodes[0].id).toEqual("newId");
+                 expect(tc.nativeElement.id).toEqual("newId");
 
                  async.done();
                });
@@ -855,56 +866,64 @@ export function main() {
 
       if (DOM.supportsDOMEvents()) {
         it('should support preventing default on render events',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template:
-                   '<input type="checkbox" listenerprevent></input><input type="checkbox" listenernoprevent></input>',
-               directives:
-                   [DirectiveListeningDomEventPrevent, DirectiveListeningDomEventNoPrevent]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
+                                                               async) => {
+             tcb.overrideView(MyComp, new viewAnn.View({
+                  template:
+                      '<input type="checkbox" listenerprevent></input><input type="checkbox" listenernoprevent></input>',
+                  directives:
+                      [DirectiveListeningDomEventPrevent, DirectiveListeningDomEventNoPrevent]
+                }))
 
-             tb.createView(MyComp, {context: ctx})
-                 .then((view) => {
-                   expect(DOM.getChecked(view.rootNodes[0])).toBeFalsy();
-                   expect(DOM.getChecked(view.rootNodes[1])).toBeFalsy();
-                   DOM.dispatchEvent(view.rootNodes[0], DOM.createMouseEvent('click'));
-                   DOM.dispatchEvent(view.rootNodes[1], DOM.createMouseEvent('click'));
-                   expect(DOM.getChecked(view.rootNodes[0])).toBeFalsy();
-                   expect(DOM.getChecked(view.rootNodes[1])).toBeTruthy();
+                 .createAsync(MyComp)
+                 .then((rootTC) => {
+                   expect(DOM.getChecked(rootTC.componentViewChildren[0].nativeElement))
+                       .toBeFalsy();
+                   expect(DOM.getChecked(rootTC.componentViewChildren[1].nativeElement))
+                       .toBeFalsy();
+                   DOM.dispatchEvent(rootTC.componentViewChildren[0].nativeElement,
+                                     DOM.createMouseEvent('click'));
+                   DOM.dispatchEvent(rootTC.componentViewChildren[1].nativeElement,
+                                     DOM.createMouseEvent('click'));
+                   expect(DOM.getChecked(rootTC.componentViewChildren[0].nativeElement))
+                       .toBeFalsy();
+                   expect(DOM.getChecked(rootTC.componentViewChildren[1].nativeElement))
+                       .toBeTruthy();
                    async.done();
                  });
            }));
       }
 
       it('should support render global events from multiple directives',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: '<div *ng-if="ctxBoolProp" listener listenerother></div>',
-             directives: [NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
-           }));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: '<div *ng-if="ctxBoolProp" listener listenerother></div>',
+                directives: [NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
+              }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
+               .createAsync(MyComp)
+               .then((rootTC) => {
                  globalCounter = 0;
-                 ctx.ctxBoolProp = true;
-                 view.detectChanges();
+                 rootTC.componentInstance.ctxBoolProp = true;
+                 rootTC.detectChanges();
 
-                 var subview = view.rawView.viewContainers[0].views[0];
-                 var injector = subview.elementInjectors[0];
-                 var listener = injector.get(DirectiveListeningDomEvent);
-                 var listenerother = injector.get(DirectiveListeningDomEventOther);
+                 var tc = rootTC.componentViewChildren[1];
+
+                 var listener = tc.inject(DirectiveListeningDomEvent);
+                 var listenerother = tc.inject(DirectiveListeningDomEventOther);
                  dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
                  expect(listener.eventType).toEqual('window_domEvent');
                  expect(listenerother.eventType).toEqual('other_domEvent');
                  expect(globalCounter).toEqual(1);
 
-                 ctx.ctxBoolProp = false;
-                 view.detectChanges();
+
+                 rootTC.componentInstance.ctxBoolProp = false;
+                 rootTC.detectChanges();
                  dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
                  expect(globalCounter).toEqual(1);
 
-                 ctx.ctxBoolProp = true;
-                 view.detectChanges();
+                 rootTC.componentInstance.ctxBoolProp = true;
+                 rootTC.detectChanges();
                  dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
                  expect(globalCounter).toEqual(2);
 
@@ -915,34 +934,38 @@ export function main() {
       describe('dynamic ViewContainers', () => {
 
         it('should allow to create a ViewContainerRef at any bound location',
-           inject([TestBed, AsyncTestCompleter, Compiler], (tb: TestBed, async, compiler) => {
-             tb.overrideView(MyComp, new viewAnn.View({
-               template: '<div><dynamic-vp #dynamic></dynamic-vp></div>',
-               directives: [DynamicViewport]
-             }));
+           inject([TestComponentBuilder, AsyncTestCompleter, Compiler],
+                  (tcb: TestComponentBuilder, async, compiler) => {
+                    tcb.overrideView(MyComp, new viewAnn.View({
+                         template: '<div><dynamic-vp #dynamic></dynamic-vp></div>',
+                         directives: [DynamicViewport]
+                       }))
 
-             tb.createView(MyComp).then((view) => {
-               var dynamicVp = view.rawView.elementInjectors[0].get(DynamicViewport);
-               dynamicVp.done.then((_) => {
-                 view.detectChanges();
-                 expect(view.rootNodes).toHaveText('dynamic greet');
-                 async.done();
-               });
-             });
-           }));
+                        .createAsync(MyComp)
+                        .then((rootTC) => {
+                          var tc = rootTC.componentViewChildren[0];
+                          var dynamicVp = tc.inject(DynamicViewport);
+                          dynamicVp.done.then((_) => {
+                            rootTC.detectChanges();
+                            expect(rootTC.componentViewChildren[1].nativeElement)
+                                .toHaveText('dynamic greet');
+                            async.done();
+                          });
+                        });
+                  }));
 
       });
 
       it('should support static attributes',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(
-               MyComp,
-               new viewAnn.View(
-                   {template: '<input static type="text" title>', directives: [NeedsAttribute]}));
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 var injector = view.rawView.elementInjectors[0];
-                 var needsAttribute = injector.get(NeedsAttribute);
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(
+                  MyComp,
+                  new viewAnn.View(
+                      {template: '<input static type="text" title>', directives: [NeedsAttribute]}))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var tc = rootTC.componentViewChildren[0];
+                 var needsAttribute = tc.inject(NeedsAttribute);
                  expect(needsAttribute.typeAttribute).toEqual('text');
                  expect(needsAttribute.titleAttribute).toEqual('');
                  expect(needsAttribute.fooAttribute).toEqual(null);
@@ -954,19 +977,19 @@ export function main() {
 
     describe("dependency injection", () => {
       it("should support hostInjector",
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: `
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: `
             <directive-providing-injectable>
               <directive-consuming-injectable #consuming>
               </directive-consuming-injectable>
             </directive-providing-injectable>
           `,
-             directives: [DirectiveProvidingInjectable, DirectiveConsumingInjectable]
-           }));
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 var comp = view.rawView.locals.get("consuming");
+                directives: [DirectiveProvidingInjectable, DirectiveConsumingInjectable]
+              }))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var comp = rootTC.componentViewChildren[0].getLocal("consuming");
                  expect(comp.injectable).toBeAnInstanceOf(InjectableService);
 
                  async.done();
@@ -974,18 +997,17 @@ export function main() {
          }));
 
       it("should support viewInjector",
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(DirectiveProvidingInjectableInView, new viewAnn.View({
-             template: `
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(DirectiveProvidingInjectableInView, new viewAnn.View({
+                template: `
               <directive-consuming-injectable #consuming>
               </directive-consuming-injectable>
           `,
-             directives: [DirectiveConsumingInjectable]
-           }));
-           tb.createView(DirectiveProvidingInjectableInView,
-                         {context: new DirectiveProvidingInjectableInView()})
-               .then((view) => {
-                 var comp = view.rawView.locals.get("consuming");
+                directives: [DirectiveConsumingInjectable]
+              }))
+               .createAsync(DirectiveProvidingInjectableInView)
+               .then((rootTC) => {
+                 var comp = rootTC.componentViewChildren[0].getLocal("consuming");
                  expect(comp.injectable).toBeAnInstanceOf(InjectableService);
 
                  async.done();
@@ -993,30 +1015,29 @@ export function main() {
          }));
 
       it("should support unbounded lookup",
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: `
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: `
             <directive-providing-injectable>
               <directive-containing-directive-consuming-an-injectable #dir>
               </directive-containing-directive-consuming-an-injectable>
             </directive-providing-injectable>
           `,
-             directives: [
-               DirectiveProvidingInjectable,
-               DirectiveContainingDirectiveConsumingAnInjectable
-             ]
-           }));
-
-           tb.overrideView(DirectiveContainingDirectiveConsumingAnInjectable, new viewAnn.View({
-             template: `
+                directives: [
+                  DirectiveProvidingInjectable,
+                  DirectiveContainingDirectiveConsumingAnInjectable
+                ]
+              }))
+               .overrideView(DirectiveContainingDirectiveConsumingAnInjectable, new viewAnn.View({
+                 template: `
             <directive-consuming-injectable-unbounded></directive-consuming-injectable-unbounded>
           `,
-             directives: [DirectiveConsumingInjectableUnbounded]
-           }));
+                 directives: [DirectiveConsumingInjectableUnbounded]
+               }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 var comp = view.rawView.locals.get("dir");
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var comp = rootTC.componentViewChildren[0].getLocal("dir");
                  expect(comp.directive.injectable).toBeAnInstanceOf(InjectableService);
 
                  async.done();
@@ -1024,9 +1045,9 @@ export function main() {
          }));
 
       it("should support the event-bus scenario",
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp, new viewAnn.View({
-             template: `
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({
+                template: `
             <grand-parent-providing-event-bus>
               <parent-providing-event-bus>
                 <child-consuming-event-bus>
@@ -1034,24 +1055,26 @@ export function main() {
               </parent-providing-event-bus>
             </grand-parent-providing-event-bus>
           `,
-             directives:
-                 [GrandParentProvidingEventBus, ParentProvidingEventBus, ChildConsumingEventBus]
-           }));
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 var eis = view.rawView.elementInjectors;
-                 var childRawView = view.rawView.componentChildViews[1];
+                directives: [
+                  GrandParentProvidingEventBus,
+                  ParentProvidingEventBus,
+                  ChildConsumingEventBus
+                ]
+              }))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var gpComp = rootTC.componentViewChildren[0];
+                 var parentComp = gpComp.children[0];
+                 var childComp = parentComp.children[0];
 
-                 var grandParent = eis[0].get(GrandParentProvidingEventBus);
-                 var parent = eis[1].get(ParentProvidingEventBus);
-                 var child1 = eis[2].get(ChildConsumingEventBus);
-                 var child2 = childRawView.elementInjectors[0].get(ChildConsumingEventBus);
+                 var grandParent = gpComp.inject(GrandParentProvidingEventBus);
+                 var parent = parentComp.inject(ParentProvidingEventBus);
+                 var child = childComp.inject(ChildConsumingEventBus);
 
                  expect(grandParent.bus.name).toEqual("grandparent");
                  expect(parent.bus.name).toEqual("parent");
                  expect(parent.grandParentBus).toBe(grandParent.bus);
-                 expect(child1.bus).toBe(parent.bus);
-                 expect(child2.bus).toBe(parent.bus);
+                 expect(child.bus).toBe(parent.bus);
 
                  async.done();
                });
@@ -1060,11 +1083,11 @@ export function main() {
 
     describe("error handling", () => {
       it('should report a meaningful error when a directive is missing annotation',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp,
-                           new viewAnn.View({directives: [SomeDirectiveMissingAnnotation]}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb = tcb.overrideView(MyComp,
+                                  new viewAnn.View({directives: [SomeDirectiveMissingAnnotation]}));
 
-           PromiseWrapper.catchError(tb.createView(MyComp, {context: ctx}), (e) => {
+           PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
              expect(e.message).toEqual(
                  `No Directive annotation found on ${stringify(SomeDirectiveMissingAnnotation)}`);
              async.done();
@@ -1073,8 +1096,8 @@ export function main() {
          }));
 
       it('should report a meaningful error when a component is missing view annotation',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           PromiseWrapper.catchError(tb.createView(ComponentWithoutView, {context: ctx}), (e) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           PromiseWrapper.catchError(tcb.createAsync(ComponentWithoutView), (e) => {
              expect(e.message).toEqual(
                  `No View annotation found on component ${stringify(ComponentWithoutView)}`);
              async.done();
@@ -1083,11 +1106,11 @@ export function main() {
          }));
 
       it('should report a meaningful error when a directive is null',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
 
-           tb.overrideView(MyComp, new viewAnn.View({directives: [[null]]}));
+           tcb = tcb.overrideView(MyComp, new viewAnn.View({directives: [[null]]}));
 
-           PromiseWrapper.catchError(tb.createView(MyComp, {context: ctx}), (e) => {
+           PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
              expect(e.message).toEqual(
                  `Unexpected directive value 'null' on the View of component '${stringify(MyComp)}'`);
              async.done();
@@ -1097,13 +1120,14 @@ export function main() {
 
       if (!IS_DARTIUM) {
         it('should report a meaningful error when a directive is undefined',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
+                                                               async) => {
 
              var undefinedValue;
 
-             tb.overrideView(MyComp, new viewAnn.View({directives: [undefinedValue]}));
+             tcb = tcb.overrideView(MyComp, new viewAnn.View({directives: [undefinedValue]}));
 
-             PromiseWrapper.catchError(tb.createView(MyComp, {context: ctx}), (e) => {
+             PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
                expect(e.message).toEqual(
                    `Unexpected directive value 'undefined' on the View of component '${stringify(MyComp)}'`);
                async.done();
@@ -1113,103 +1137,110 @@ export function main() {
       }
 
       it('should specify a location of an error that happened during change detection (text)',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter],
+                (tcb: TestComponentBuilder, async) => {
 
-           tb.overrideView(MyComp, new viewAnn.View({template: '{{a.b}}'}));
+                    tcb.overrideView(MyComp, new viewAnn.View({template: '{{a.b}}'}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 expect(() => view.detectChanges())
-                     .toThrowError(containsRegexp(`{{a.b}} in ${stringify(MyComp)}`));
-                 async.done();
-               })
-         }));
+                        .createAsync(MyComp)
+                        .then((rootTC) => {
+                          expect(() => rootTC.detectChanges())
+                              .toThrowError(containsRegexp(`{{a.b}} in ${stringify(MyComp)}`));
+                          async.done();
+                        })}));
 
       it('should specify a location of an error that happened during change detection (element property)',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject(
+             [TestComponentBuilder, AsyncTestCompleter],
+             (tcb: TestComponentBuilder, async) => {
 
-           tb.overrideView(MyComp, new viewAnn.View({template: '<div [title]="a.b"></div>'}));
+                 tcb.overrideView(MyComp, new viewAnn.View({template: '<div [title]="a.b"></div>'}))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 expect(() => view.detectChanges())
-                     .toThrowError(containsRegexp(`a.b in ${stringify(MyComp)}`));
-                 async.done();
-               })
-         }));
+                     .createAsync(MyComp)
+                     .then((rootTC) => {
+                       expect(() => rootTC.detectChanges())
+                           .toThrowError(containsRegexp(`a.b in ${stringify(MyComp)}`));
+                       async.done();
+                     })}));
 
       it('should specify a location of an error that happened during change detection (directive property)',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter],
+                (tcb: TestComponentBuilder, async) => {
 
-           tb.overrideView(
-               MyComp,
-               new viewAnn.View(
-                   {template: '<child-cmp [title]="a.b"></child-cmp>', directives: [ChildComp]}));
+                    tcb.overrideView(MyComp, new viewAnn.View({
+                         template: '<child-cmp [title]="a.b"></child-cmp>',
+                         directives: [ChildComp]
+                       }))
 
-           tb.createView(MyComp, {context: ctx})
-               .then((view) => {
-                 expect(() => view.detectChanges())
-                     .toThrowError(containsRegexp(`a.b in ${stringify(MyComp)}`));
-                 async.done();
-               })
-         }));
+                        .createAsync(MyComp)
+                        .then((rootTC) => {
+                          expect(() => rootTC.detectChanges())
+                              .toThrowError(containsRegexp(`a.b in ${stringify(MyComp)}`));
+                          async.done();
+                        })}));
     });
 
     it('should support imperative views',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.overrideView(MyComp, new viewAnn.View({
-           template: '<simple-imp-cmp></simple-imp-cmp>',
-           directives: [SimpleImperativeViewComponent]
-         }));
-         tb.createView(MyComp).then((view) => {
-           expect(view.rootNodes).toHaveText('hello imp view');
-           async.done();
-         });
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideView(MyComp, new viewAnn.View({
+              template: '<simple-imp-cmp></simple-imp-cmp>',
+              directives: [SimpleImperativeViewComponent]
+            }))
+             .createAsync(MyComp)
+             .then((rootTC) => {
+               expect(rootTC.nativeElement).toHaveText('hello imp view');
+               async.done();
+             });
        }));
 
     it('should support moving embedded views around',
-       inject([TestBed, AsyncTestCompleter, ANCHOR_ELEMENT], (tb, async, anchorElement) => {
-         tb.overrideView(MyComp, new viewAnn.View({
-           template: '<div><div *some-impvp="ctxBoolProp">hello</div></div>',
-           directives: [SomeImperativeViewport]
-         }));
-         tb.createView(MyComp).then((view) => {
-           view.detectChanges();
-           expect(anchorElement).toHaveText('');
+       inject([TestComponentBuilder, AsyncTestCompleter, ANCHOR_ELEMENT],
+              (tcb, async, anchorElement) => {
+                tcb.overrideView(MyComp, new viewAnn.View({
+                     template: '<div><div *some-impvp="ctxBoolProp">hello</div></div>',
+                     directives: [SomeImperativeViewport]
+                   }))
+                    .createAsync(MyComp)
+                    .then((rootTC) => {
+                      rootTC.detectChanges();
+                      expect(anchorElement).toHaveText('');
 
-           view.context.ctxBoolProp = true;
-           view.detectChanges();
-           expect(anchorElement).toHaveText('hello');
+                      rootTC.componentInstance.ctxBoolProp = true;
+                      rootTC.detectChanges();
 
-           view.context.ctxBoolProp = false;
-           view.detectChanges();
-           expect(view.rootNodes).toHaveText('');
+                      expect(anchorElement).toHaveText('hello');
 
-           async.done();
-         });
-       }));
+                      rootTC.componentInstance.ctxBoolProp = false;
+                      rootTC.detectChanges();
+                      expect(rootTC.nativeElement).toHaveText('');
+
+                      async.done();
+                    });
+              }));
 
     describe('Missing property bindings', () => {
       it('should throw on bindings to unknown properties',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(MyComp,
-                           new viewAnn.View({template: '<div unknown="{{ctxProp}}"></div>'}));
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb =
+               tcb.overrideView(MyComp,
+                                new viewAnn.View({template: '<div unknown="{{ctxProp}}"></div>'}))
 
-           PromiseWrapper.catchError(tb.createView(MyComp, {context: ctx}), (e) => {
-             expect(e.message).toEqual(
-                 `Can't bind to 'unknown' since it isn't a know property of the 'div' element and there are no matching directives with a corresponding property`);
-             async.done();
-             return null;
-           });
+                   PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
+                     expect(e.message).toEqual(
+                         `Can't bind to 'unknown' since it isn't a know property of the 'div' element and there are no matching directives with a corresponding property`);
+                     async.done();
+                     return null;
+                   });
          }));
 
       it('should not throw for property binding to a non-existing property when there is a matching directive property',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-           tb.overrideView(
-               MyComp,
-               new viewAnn.View(
-                   {template: '<div my-dir [elprop]="ctxProp"></div>', directives: [MyDir]}));
-           tb.createView(MyComp, {context: ctx}).then((val) => { async.done(); });
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(
+                  MyComp,
+                  new viewAnn.View(
+                      {template: '<div my-dir [elprop]="ctxProp"></div>', directives: [MyDir]}))
+               .createAsync(MyComp)
+               .then((val) => { async.done(); });
          }));
     });
 
@@ -1217,10 +1248,10 @@ export function main() {
     // - https://github.com/angular/angular/issues/776
     // - https://github.com/angular/angular/commit/81f3f32
     xdescribe('Missing directive checks', () => {
-      function expectCompileError(tb, inlineTpl, errMessage, done) {
-        tb.overrideView(MyComp, new viewAnn.View({template: inlineTpl}));
+      function expectCompileError(tcb, inlineTpl, errMessage, done) {
+        tcb = tcb.overrideView(MyComp, new viewAnn.View({template: inlineTpl}));
         PromiseWrapper.then(
-            tb.createView(MyComp),
+            tcb.createAsync(MyComp),
             (value) => {
               throw new BaseException(
                   "Test failure: should not have come here as an exception was expected");
@@ -1233,32 +1264,36 @@ export function main() {
 
       if (assertionsEnabled()) {
         it('should raise an error if no directive is registered for a template with template bindings',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             expectCompileError(tb, '<div><div template="if: foo"></div></div>',
+           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
+                                                               async) => {
+             expectCompileError(tcb, '<div><div template="if: foo"></div></div>',
                                 'Missing directive to handle \'if\' in <div template="if: foo">',
                                 () => async.done());
            }));
 
         it('should raise an error for missing template directive (1)',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             expectCompileError(tb, '<div><template foo></template></div>',
+           inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
+                                                               async) => {
+             expectCompileError(tcb, '<div><template foo></template></div>',
                                 'Missing directive to handle: <template foo>', () => async.done());
            }));
 
         it('should raise an error for missing template directive (2)',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             expectCompileError(tb, '<div><template *ng-if="condition"></template></div>',
-                                'Missing directive to handle: <template *ng-if="condition">',
-                                () => async.done());
-           }));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
+                    expectCompileError(tcb, '<div><template *ng-if="condition"></template></div>',
+                                       'Missing directive to handle: <template *ng-if="condition">',
+                                       () => async.done());
+                  }));
 
         it('should raise an error for missing template directive (3)',
-           inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-             expectCompileError(
-                 tb, '<div *ng-if="condition"></div>',
-                 'Missing directive to handle \'if\' in MyComp: <div *ng-if="condition">',
-                 () => async.done());
-           }));
+           inject([TestComponentBuilder, AsyncTestCompleter],
+                  (tcb: TestComponentBuilder, async) => {
+                    expectCompileError(
+                        tcb, '<div *ng-if="condition"></div>',
+                        'Missing directive to handle \'if\' in MyComp: <div *ng-if="condition">',
+                        () => async.done());
+                  }));
       }
     });
   });