diff --git a/modules/angular2/test/directives/class_spec.js b/modules/angular2/test/directives/class_spec.js
index d752a1b06b..f05988a525 100644
--- a/modules/angular2/test/directives/class_spec.js
+++ b/modules/angular2/test/directives/class_spec.js
@@ -15,151 +15,123 @@ import {
 
 import {StringMapWrapper} from 'angular2/src/facade/collection';
 
-import {Injector, bind} from 'angular2/di';
-
-import {Compiler} from 'angular2/src/core/compiler/compiler';
-import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
-
 import {Template} from 'angular2/src/core/annotations/template';
-import {Decorator, Component} from 'angular2/src/core/annotations/annotations';
+import {Component} from 'angular2/src/core/annotations/annotations';
 
-import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
+import {TestBed} from 'angular2/src/test_lib/test_bed';
 
 import {CSSClass} from 'angular2/src/directives/class';
 
 export function main() {
   describe('binding to CSS class list', () => {
 
-    var view, cd, compiler, component, tplResolver;
-
-    beforeEachBindings(() => [
-      bind(TemplateResolver).toClass(MockTemplateResolver)
-    ]);
-
-    beforeEach(inject([Compiler, TemplateResolver], (c, t) => {
-      compiler = c;
-      tplResolver = t;
-    }));
-
-    function createView(pv) {
-      component = new TestComponent();
-      view = pv.instantiate(null, null);
-      view.hydrate(new Injector([]), null, null, component, null);
-      cd = view.changeDetector;
-    }
-
-    function compileWithTemplate(html) {
-      var template = new Template({
-        inline: html,
-        directives: [CSSClass]
-      });
-      tplResolver.setTemplate(TestComponent, template);
-      return compiler.compile(TestComponent);
-    }
-
-    it('should add classes specified in an object literal', inject([AsyncTestCompleter], (async) => {
+    it('should add classes specified in an object literal',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div [class]="{foo: true, bar: false}"></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
 
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding foo');
 
         async.done();
       });
     }));
 
-    it('should add and remove classes based on changes in object literal values', inject([AsyncTestCompleter], (async) => {
+    it('should add and remove classes based on changes in object literal values',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding foo');
 
-        component.condition = false;
-        cd.detectChanges();
+        view.context.condition = false;
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding bar');
 
         async.done();
       });
     }));
 
-    it('should add and remove classes based on changes to the expression object', inject([AsyncTestCompleter], (async) => {
+    it('should add and remove classes based on changes to the expression object',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div [class]="expr"></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding foo');
 
-        StringMapWrapper.set(component.expr, 'bar', true);
-        cd.detectChanges();
+        StringMapWrapper.set(view.context.expr, 'bar', true);
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding foo bar');
 
-        StringMapWrapper.set(component.expr, 'baz', true);
-        cd.detectChanges();
+        StringMapWrapper.set(view.context.expr, 'baz', true);
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding foo bar baz');
 
-        StringMapWrapper.delete(component.expr, 'bar');
-        cd.detectChanges();
+        StringMapWrapper.delete(view.context.expr, 'bar');
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding foo baz');
 
         async.done();
       });
     }));
 
-    it('should retain existing classes when expression evaluates to null', inject([AsyncTestCompleter], (async) => {
+    it('should retain existing classes when expression evaluates to null',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div [class]="expr"></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding foo');
 
-        component.expr = null;
-        cd.detectChanges();
+        view.context.expr = null;
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding foo');
 
-        component.expr = {'foo': false, 'bar': true};
-        cd.detectChanges();
+        view.context.expr = {'foo': false, 'bar': true};
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('ng-binding bar');
 
         async.done();
       });
     }));
 
-    it('should co-operate with the class attribute', inject([AsyncTestCompleter], (async) => {
+    it('should co-operate with the class attribute',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div [class]="expr" class="init foo"></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
 
-        StringMapWrapper.set(component.expr, 'bar', true);
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        StringMapWrapper.set(view.context.expr, 'bar', true);
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('init foo ng-binding bar');
 
-        StringMapWrapper.set(component.expr, 'foo', false);
-        cd.detectChanges();
+        StringMapWrapper.set(view.context.expr, 'foo', false);
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('init ng-binding bar');
 
         async.done();
       });
     }));
 
-    it('should co-operate with the class attribute and class.name binding', inject([AsyncTestCompleter], (async) => {
+    it('should co-operate with the class attribute and class.name binding',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div class="init foo" [class]="expr" [class.baz]="condition"></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('init foo ng-binding baz');
 
-        StringMapWrapper.set(component.expr, 'bar', true);
-        cd.detectChanges();
+        StringMapWrapper.set(view.context.expr, 'bar', true);
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('init foo ng-binding baz bar');
 
-        StringMapWrapper.set(component.expr, 'foo', false);
-        cd.detectChanges();
+        StringMapWrapper.set(view.context.expr, 'foo', false);
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('init ng-binding baz bar');
 
-        component.condition = false;
-        cd.detectChanges();
+        view.context.condition = false;
+        view.detectChanges();
         expect(view.nodes[0].className).toEqual('init ng-binding bar');
 
         async.done();
@@ -169,6 +141,7 @@ export function main() {
 }
 
 @Component({selector: 'test-cmp'})
+@Template({directives: [CSSClass]})
 class TestComponent {
   condition:boolean;
   expr;
diff --git a/modules/angular2/test/directives/for_spec.js b/modules/angular2/test/directives/for_spec.js
index ffdf338258..143ca97d85 100644
--- a/modules/angular2/test/directives/for_spec.js
+++ b/modules/angular2/test/directives/for_spec.js
@@ -15,245 +15,207 @@ import {
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {ListWrapper} from 'angular2/src/facade/collection';
 
-import {Injector} from 'angular2/di';
-
-import {Compiler} from 'angular2/src/core/compiler/compiler';
-import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
-
+import {Component} from 'angular2/src/core/annotations/annotations';
 import {Template} from 'angular2/src/core/annotations/template';
-import {Decorator, Component, Viewport} from 'angular2/src/core/annotations/annotations';
-
-import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
 
 import {For} from 'angular2/src/directives/for';
 
-import {bind} from 'angular2/di';
+import {TestBed} from 'angular2/src/test_lib/test_bed';
+
 
 export function main() {
   describe('for', () => {
-    var view, cd, compiler, component, tplResolver;
-
-    beforeEachBindings(() => [
-      bind(TemplateResolver).toClass(MockTemplateResolver),
-    ]);
-
-    beforeEach(inject([Compiler, TemplateResolver], (c, t) => {
-      compiler = c;
-      tplResolver = t;
-    }));
-
-    function createView(pv) {
-      component = new TestComponent();
-      view = pv.instantiate(null, null);
-      view.hydrate(new Injector([]), null, null, component, null);
-      cd = view.changeDetector;
-    }
-
-    function compileWithTemplate(html) {
-      var template = new Template({
-        inline: html,
-        directives: [For]
-      });
-      tplResolver.setTemplate(TestComponent, template);
-      return compiler.compile(TestComponent);
-    }
-
     var TEMPLATE = '<div><copy-me template="for #item of items">{{item.toString()}};</copy-me></div>';
 
-    it('should reflect initial elements', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(TEMPLATE).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
-
+    it('should reflect initial elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
         async.done();
       });
     }));
 
-    it('should reflect added elements', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(TEMPLATE).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+    it('should reflect added elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
+        view.detectChanges();
 
-        ListWrapper.push(component.items, 3);
-        cd.detectChanges();
+        ListWrapper.push(view.context.items, 3);
+        view.detectChanges();
 
         expect(DOM.getText(view.nodes[0])).toEqual('1;2;3;');
         async.done();
       });
     }));
 
-    it('should reflect removed elements', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(TEMPLATE).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+    it('should reflect removed elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
+        view.detectChanges();
 
-        ListWrapper.removeAt(component.items, 1);
-        cd.detectChanges();
+        ListWrapper.removeAt(view.context.items, 1);
+        view.detectChanges();
 
         expect(DOM.getText(view.nodes[0])).toEqual('1;');
         async.done();
       });
     }));
 
-    it('should reflect moved elements', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(TEMPLATE).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+    it('should reflect moved elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
+        view.detectChanges();
 
-        ListWrapper.removeAt(component.items, 0);
-        ListWrapper.push(component.items, 1);
-        cd.detectChanges();
+        ListWrapper.removeAt(view.context.items, 0);
+        ListWrapper.push(view.context.items, 1);
+        view.detectChanges();
 
         expect(DOM.getText(view.nodes[0])).toEqual('2;1;');
         async.done();
       });
     }));
 
-    it('should reflect a mix of all changes (additions/removals/moves)', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(TEMPLATE).then((pv) => {
-        createView(pv);
-        component.items = [0, 1, 2, 3, 4, 5];
-        cd.detectChanges();
+    it('should reflect a mix of all changes (additions/removals/moves)',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
+        view.context.items = [0, 1, 2, 3, 4, 5];
+        view.detectChanges();
 
-        component.items = [6, 2, 7, 0, 4, 8];
-        cd.detectChanges();
+        view.context.items = [6, 2, 7, 0, 4, 8];
+        view.detectChanges();
 
         expect(DOM.getText(view.nodes[0])).toEqual('6;2;7;0;4;8;');
         async.done();
       });
     }));
 
-    it('should iterate over an array of objects', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate('<ul><li template="for #item of items">{{item["name"]}};</li></ul>').then((pv) => {
-        createView(pv);
+    it('should iterate over an array of objects', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var template = '<ul><li template="for #item of items">{{item["name"]}};</li></ul>';
+
+      tb.createView(TestComponent, {html: template}).then((view) => {
 
         // INIT
-        component.items = [{'name': 'misko'}, {'name':'shyam'}];
-        cd.detectChanges();
+        view.context.items = [{'name': 'misko'}, {'name':'shyam'}];
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('misko;shyam;');
 
         // GROW
-        ListWrapper.push(component.items, {'name': 'adam'});
-        cd.detectChanges();
+        ListWrapper.push(view.context.items, {'name': 'adam'});
+        view.detectChanges();
 
         expect(DOM.getText(view.nodes[0])).toEqual('misko;shyam;adam;');
 
         // SHRINK
-        ListWrapper.removeAt(component.items, 2);
-        ListWrapper.removeAt(component.items, 0);
-        cd.detectChanges();
+        ListWrapper.removeAt(view.context.items, 2);
+        ListWrapper.removeAt(view.context.items, 0);
+        view.detectChanges();
 
         expect(DOM.getText(view.nodes[0])).toEqual('shyam;');
         async.done();
       });
     }));
 
-    it('should gracefully handle nulls', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate('<ul><li template="for #item of null">{{item}};</li></ul>').then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+    it('should gracefully handle nulls', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var template = '<ul><li template="for #item of null">{{item}};</li></ul>';
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('');
         async.done();
       });
     }));
 
-    it('should gracefully handle ref changing to null and back', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(TEMPLATE).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+    it('should gracefully handle ref changing to null and back',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
 
-        component.items = null;
-        cd.detectChanges();
+        view.context.items = null;
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('');
 
-        component.items = [1, 2, 3];
-        cd.detectChanges();
+        view.context.items = [1, 2, 3];
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('1;2;3;');
         async.done();
       });
     }));
 
-    it('should throw on ref changing to string', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(TEMPLATE).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+    it('should throw on ref changing to string', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
 
-        component.items = 'whaaa';
-        expect(() => cd.detectChanges()).toThrowError();
+        view.context.items = 'whaaa';
+        expect(() => view.detectChanges()).toThrowError();
         async.done();
       });
     }));
 
-    it('should works with duplicates', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(TEMPLATE).then((pv) => {
-        createView(pv);
+    it('should works with duplicates', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
         var a = new Foo();
-        component.items = [a, a];
-        cd.detectChanges();
+        view.context.items = [a, a];
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('foo;foo;');
         async.done();
       });
     }));
 
-    it('should repeat over nested arrays', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(
+    it('should repeat over nested arrays', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var template =
         '<div>'+
           '<div template="for #item of items">' +
             '<div template="for #subitem of item">' +
               '{{subitem}}-{{item.length}};' +
             '</div>|'+
           '</div>'+
-        '</div>'
-      ).then((pv) => {
-        createView(pv);
-        component.items = [['a', 'b'], ['c']];
-        cd.detectChanges();
-        cd.detectChanges();
-        cd.detectChanges();
+        '</div>';
+
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.context.items = [['a', 'b'], ['c']];
+        view.detectChanges();
+        view.detectChanges();
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('a-2;b-2;|c-1;|');
 
-        component.items = [['e'], ['f', 'g']];
-        cd.detectChanges();
+        view.context.items = [['e'], ['f', 'g']];
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('e-1;|f-2;g-2;|');
 
         async.done();
       });
     }));
 
-    it('should repeat over nested arrays with no intermediate element', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate(
+    it('should repeat over nested arrays with no intermediate element',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var template =
           '<div><template [for] #item [of]="items">' +
             '<div template="for #subitem of item">' +
             '{{subitem}}-{{item.length}};' +
-          '</div></template></div>'
-      ).then((pv) => {
-        createView(pv);
+          '</div></template></div>';
 
-        component.items = [['a', 'b'], ['c']];
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.context.items = [['a', 'b'], ['c']];
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('a-2;b-2;c-1;');
 
-        component.items = [['e'], ['f', 'g']];
-        cd.detectChanges();
+        view.context.items = [['e'], ['f', 'g']];
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('e-1;f-2;g-2;');
         async.done();
       });
     }));
 
-    it('should display indices correctly', inject([AsyncTestCompleter], (async) => {
-      var INDEX_TEMPLATE =
+    it('should display indices correctly',
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var template =
         '<div><copy-me template="for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
-      compileWithTemplate(INDEX_TEMPLATE).then((pv) => {
-        createView(pv);
-        component.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-        cd.detectChanges();
+
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.context.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('0123456789');
 
-        component.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
-        cd.detectChanges();
+        view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('0123456789');
         async.done();
       });
@@ -269,6 +231,7 @@ class Foo {
 }
 
 @Component({selector: 'test-cmp'})
+@Template({directives: [For]})
 class TestComponent {
   items: any;
   constructor() {
diff --git a/modules/angular2/test/directives/if_spec.js b/modules/angular2/test/directives/if_spec.js
index 7ae6cc0035..60d7dbdd39 100644
--- a/modules/angular2/test/directives/if_spec.js
+++ b/modules/angular2/test/directives/if_spec.js
@@ -14,99 +14,53 @@ import {
 
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
-import {Injector} from 'angular2/di';
-import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
-
-import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
-import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
-import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
-import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
-import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
+import {TestBed} from 'angular2/src/test_lib/test_bed';
 
 import {Component} from 'angular2/src/core/annotations/annotations';
 import {Template} from 'angular2/src/core/annotations/template';
 
-import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
-
 import {If} from 'angular2/src/directives/if';
 
 export function main() {
   describe('if directive', () => {
-    var view, cd, compiler, component, tplResolver;
-
-    beforeEach(() => {
-      var urlResolver = new UrlResolver();
-      tplResolver = new MockTemplateResolver();
-      compiler = new Compiler(
-        dynamicChangeDetection,
-        new TemplateLoader(null, null),
-        new DirectiveMetadataReader(),
-        new Parser(new Lexer()),
-        new CompilerCache(),
-        new NativeShadowDomStrategy(new StyleUrlResolver(urlResolver)),
-        tplResolver,
-        new ComponentUrlMapper(),
-        urlResolver
-      );
-    });
-
-    function createView(pv) {
-      component = new TestComponent();
-      view = pv.instantiate(null, null);
-      view.hydrate(new Injector([]), null, null, component, null);
-      cd = view.changeDetector;
-    }
-
-    function compileWithTemplate(html) {
-      var template = new Template({
-        inline: html,
-        directives: [If]
-      });
-      tplResolver.setTemplate(TestComponent, template);
-      return compiler.compile(TestComponent);
-    }
-
-    it('should work in a template attribute', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+    it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
 
+      tb.createView(TestComponent, {html: html}).then((view) => {
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
         expect(DOM.getText(view.nodes[0])).toEqual('hello');
         async.done();
       });
     }));
 
-    it('should work in a template element', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate('<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+    it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var html = '<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
 
+      tb.createView(TestComponent, {html: html}).then((view) => {
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
         expect(DOM.getText(view.nodes[0])).toEqual('hello2');
         async.done();
       });
     }));
 
-    it('should toggle node when condition changes', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
-        createView(pv);
+    it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
 
-        component.booleanCondition = false;
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: html}).then((view) => {
+        view.context.booleanCondition = false;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
         expect(DOM.getText(view.nodes[0])).toEqual('');
 
-
-        component.booleanCondition = true;
-        cd.detectChanges();
+        view.context.booleanCondition = true;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
         expect(DOM.getText(view.nodes[0])).toEqual('hello');
 
-        component.booleanCondition = false;
-        cd.detectChanges();
+        view.context.booleanCondition = false;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
         expect(DOM.getText(view.nodes[0])).toEqual('');
 
@@ -114,32 +68,32 @@ export function main() {
       });
     }));
 
-    it('should handle nested if correctly', inject([AsyncTestCompleter], (async) => {
-      compileWithTemplate('<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>').then((pv) => {
-        createView(pv);
+    it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var html = '<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>';
 
-        component.booleanCondition = false;
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: html}).then((view) => {
+        view.context.booleanCondition = false;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
         expect(DOM.getText(view.nodes[0])).toEqual('');
 
-        component.booleanCondition = true;
-        cd.detectChanges();
+        view.context.booleanCondition = true;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
         expect(DOM.getText(view.nodes[0])).toEqual('hello');
 
-        component.nestedBooleanCondition = false;
-        cd.detectChanges();
+        view.context.nestedBooleanCondition = false;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
         expect(DOM.getText(view.nodes[0])).toEqual('');
 
-        component.nestedBooleanCondition = true;
-        cd.detectChanges();
+        view.context.nestedBooleanCondition = true;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
         expect(DOM.getText(view.nodes[0])).toEqual('hello');
 
-        component.booleanCondition = false;
-        cd.detectChanges();
+        view.context.booleanCondition = false;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
         expect(DOM.getText(view.nodes[0])).toEqual('');
 
@@ -147,28 +101,27 @@ export function main() {
       });
     }));
 
-    it('should update several nodes with if', inject([AsyncTestCompleter], (async) => {
-      var templateString =
+    it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var html =
       '<div>' +
         '<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' +
         '<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' +
         '<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
       '</div>';
-      compileWithTemplate(templateString).then((pv) => {
-        createView(pv);
 
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: html}).then((view) => {
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(3);
         expect(DOM.getText(view.nodes[0])).toEqual('helloNumberhelloStringhelloFunction');
 
-        component.numberCondition = 0;
-        cd.detectChanges();
+        view.context.numberCondition = 0;
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
         expect(DOM.getText(view.nodes[0])).toEqual('helloString');
 
-        component.numberCondition = 1;
-        component.stringCondition = "bar";
-        cd.detectChanges();
+        view.context.numberCondition = 1;
+        view.context.stringCondition = "bar";
+        view.detectChanges();
         expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
         expect(DOM.getText(view.nodes[0])).toEqual('helloNumber');
         async.done();
@@ -176,17 +129,18 @@ export function main() {
     }));
 
 
-    if (!IS_DARTIUM) {;
-      it('should not add the element twice if the condition goes from true to true (JS)', inject([AsyncTestCompleter], (async) => {
-        compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
-          createView(pv);
+    if (!IS_DARTIUM) {
+      it('should not add the element twice if the condition goes from true to true (JS)',
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
 
-          cd.detectChanges();
+        tb.createView(TestComponent, {html: html}).then((view) => {
+          view.detectChanges();
           expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
           expect(DOM.getText(view.nodes[0])).toEqual('hello');
 
-          component.numberCondition = 2;
-          cd.detectChanges();
+          view.context.numberCondition = 2;
+          view.detectChanges();
           expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
           expect(DOM.getText(view.nodes[0])).toEqual('hello');
 
@@ -194,29 +148,34 @@ export function main() {
         });
       }));
 
-      it('should not recreate the element if the condition goes from true to true (JS)', inject([AsyncTestCompleter], (async) => {
-        compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
-          createView(pv);
+      it('should not recreate the element if the condition goes from true to true (JS)',
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
+          var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
 
-          cd.detectChanges();
-          DOM.addClass(view.nodes[0].childNodes[1], "foo");
+          tb.createView(TestComponent, {html: html}).then((view) => {
+            view.detectChanges();
+            DOM.addClass(view.nodes[0].childNodes[1], "foo");
 
-          component.numberCondition = 2;
-          cd.detectChanges();
-          expect(DOM.hasClass(view.nodes[0].childNodes[1], "foo")).toBe(true);
+            view.context.numberCondition = 2;
+            view.detectChanges();
+            expect(DOM.hasClass(view.nodes[0].childNodes[1], "foo")).toBe(true);
 
-          async.done();
-        });
+            async.done();
+          });
       }));
-    } else {
-      it('should not create the element if the condition is not a boolean (DART)', inject([AsyncTestCompleter], (async) => {
-        compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
-          createView(pv);
-          expect(function(){cd.detectChanges();}).toThrowError();
-          expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
-          expect(DOM.getText(view.nodes[0])).toEqual('');
-          async.done();
-        });
+    }
+
+    if (IS_DARTIUM) {
+      it('should not create the element if the condition is not a boolean (DART)',
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
+          var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
+
+          tb.createView(TestComponent, {html: html}).then((view) => {
+            expect(() => view.detectChanges()).toThrowError();
+            expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
+            expect(DOM.getText(view.nodes[0])).toEqual('');
+            async.done();
+          });
       }));
     }
 
@@ -224,6 +183,7 @@ export function main() {
 }
 
 @Component({selector: 'test-cmp'})
+@Template({directives: [If]})
 class TestComponent {
   booleanCondition: boolean;
   nestedBooleanCondition: boolean;
diff --git a/modules/angular2/test/directives/non_bindable_spec.js b/modules/angular2/test/directives/non_bindable_spec.js
index 3fd0c2db5c..5974725deb 100644
--- a/modules/angular2/test/directives/non_bindable_spec.js
+++ b/modules/angular2/test/directives/non_bindable_spec.js
@@ -11,86 +11,41 @@ import {
   xit,
 } from 'angular2/test_lib';
 import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Injector} from 'angular2/di';
-import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
-
-import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
-import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
-import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
-import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
-
 
 import {Decorator, Component} from 'angular2/src/core/annotations/annotations';
 import {Template} from 'angular2/src/core/annotations/template';
 
-import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
 import {NgElement} from 'angular2/src/core/dom/element';
+
 import {NonBindable} from 'angular2/src/directives/non_bindable';
-import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
+
+import {TestBed} from 'angular2/src/test_lib/test_bed';
 
 export function main() {
   describe('non-bindable', () => {
-    var view, cd, compiler, component, tplResolver;
-    beforeEach(() => {
-      var urlResolver = new UrlResolver();
-      tplResolver = new MockTemplateResolver();
-      compiler = new Compiler(
-        dynamicChangeDetection,
-        new TemplateLoader(null, null),
-        new DirectiveMetadataReader(),
-        new Parser(new Lexer()),
-        new CompilerCache(),
-        new NativeShadowDomStrategy(new StyleUrlResolver(urlResolver)),
-        tplResolver,
-        new ComponentUrlMapper(),
-        urlResolver
-      );
-    });
-
-    function createView(pv) {
-      component = new TestComponent();
-      view = pv.instantiate(null, null);
-      view.hydrate(new Injector([]), null, null, component, null);
-      cd = view.changeDetector;
-    }
-
-    function compileWithTemplate(html) {
-      var template = new Template({
-        inline: html,
-        directives: [NonBindable, TestDecorator]
-      });
-      tplResolver.setTemplate(TestComponent, template);
-      return compiler.compile(TestComponent);
-    }
-
-    it('should not interpolate children', inject([AsyncTestCompleter], (async) => {
+    it('should not interpolate children', inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div>{{text}}<span non-bindable>{{text}}</span></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('foo{{text}}');
         async.done();
       });
     }));
 
-    it('should ignore directives on child nodes', inject([AsyncTestCompleter], (async) => {
+    it('should ignore directives on child nodes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div non-bindable><span id=child test-dec>{{text}}</span></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         var span = DOM.querySelector(view.nodes[0], '#child');
         expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
         async.done();
       });
     }));
 
-    it('should trigger directives on the same node', inject([AsyncTestCompleter], (async) => {
+    it('should trigger directives on the same node', inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template = '<div><span id=child non-bindable test-dec>{{text}}</span></div>';
-      compileWithTemplate(template).then((pv) => {
-        createView(pv);
-        cd.detectChanges();
+      tb.createView(TestComponent, {html: template}).then((view) => {
+        view.detectChanges();
         var span = DOM.querySelector(view.nodes[0], '#child');
         expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
         async.done();
@@ -100,6 +55,7 @@ export function main() {
 }
 
 @Component({selector: 'test-cmp'})
+@Template({directives: [NonBindable, TestDecorator]})
 class TestComponent {
   text: string;
   constructor() {
diff --git a/modules/angular2/test/directives/switch_spec.js b/modules/angular2/test/directives/switch_spec.js
index c040ec6e8f..be45000238 100644
--- a/modules/angular2/test/directives/switch_spec.js
+++ b/modules/angular2/test/directives/switch_spec.js
@@ -11,105 +11,66 @@ import {
   xit,
 } from 'angular2/test_lib';
 import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Injector} from 'angular2/di';
-import {Lexer, Parser, dynamicChangeDetection} from 'angular2/change_detection';
-
-import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
-import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
-import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
-import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
 
 import {Component} from 'angular2/src/core/annotations/annotations';
 import {Template} from 'angular2/src/core/annotations/template';
-import {TemplateLoader} from 'angular2/core';
+
 import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch';
-import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
+
+import {TestBed} from 'angular2/src/test_lib/test_bed';
 
 export function main() {
   describe('switch', () => {
-    var view, cd, compiler, component, tplResolver;
-    beforeEach(() => {
-      var urlResolver = new UrlResolver();
-      tplResolver = new MockTemplateResolver();
-      compiler = new Compiler(
-        dynamicChangeDetection,
-        new TemplateLoader(null, null),
-        new DirectiveMetadataReader(),
-        new Parser(new Lexer()),
-        new CompilerCache(),
-        new NativeShadowDomStrategy(new StyleUrlResolver(urlResolver)),
-        tplResolver,
-        new ComponentUrlMapper(),
-        urlResolver
-      );
-    });
-
-    function createView(pv) {
-      component = new TestComponent();
-      view = pv.instantiate(null, null);
-      view.hydrate(new Injector([]), null, null, component, null);
-      cd = view.changeDetector;
-    }
-
-    function compileWithTemplate(html) {
-      var template = new Template({
-        inline: html,
-        directives: [Switch, SwitchWhen, SwitchDefault]
-      });
-      tplResolver.setTemplate(TestComponent, template);
-      return compiler.compile(TestComponent);
-    }
-
     describe('switch value changes', () => {
-      it('should switch amongst when values', inject([AsyncTestCompleter], (async) => {
+      it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var template = '<div>' +
           '<ul [switch]="switchValue">' +
             '<template [switch-when]="\'a\'"><li>when a</li></template>' +
             '<template [switch-when]="\'b\'"><li>when b</li></template>' +
           '</ul></div>';
-        compileWithTemplate(template).then((pv) => {
-          createView(pv);
-          cd.detectChanges();
+
+        tb.createView(TestComponent, {html: template}).then((view) => {
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('');
 
-          component.switchValue = 'a';
-          cd.detectChanges();
+          view.context.switchValue = 'a';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when a');
 
-          component.switchValue = 'b';
-          cd.detectChanges();
+          view.context.switchValue = 'b';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when b');
 
           async.done();
         });
       }));
 
-      it('should switch amongst when values with fallback to default', inject([AsyncTestCompleter], (async) => {
+      it('should switch amongst when values with fallback to default',
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var template = '<div>' +
           '<ul [switch]="switchValue">' +
             '<li template="switch-when \'a\'">when a</li>' +
             '<li template="switch-default">when default</li>' +
           '</ul></div>';
-        compileWithTemplate(template).then((pv) => {
-          createView(pv);
-          cd.detectChanges();
-          // expect(DOM.getText(view.nodes[0])).toEqual('when default');
 
-          component.switchValue = 'a';
-          cd.detectChanges();
+        tb.createView(TestComponent, {html: template}).then((view) => {
+          view.detectChanges();
+          expect(DOM.getText(view.nodes[0])).toEqual('when default');
+
+          view.context.switchValue = 'a';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when a');
 
-          // component.switchValue = 'b';
-          // cd.detectChanges();
-          // expect(DOM.getText(view.nodes[0])).toEqual('when default');
+          view.context.switchValue = 'b';
+          view.detectChanges();
+          expect(DOM.getText(view.nodes[0])).toEqual('when default');
 
           async.done();
         });
       }));
 
-      it('should support multiple whens with the same value', inject([AsyncTestCompleter], (async) => {
+      it('should support multiple whens with the same value',
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var template = '<div>' +
           '<ul [switch]="switchValue">' +
             '<template [switch-when]="\'a\'"><li>when a1;</li></template>' +
@@ -119,17 +80,17 @@ export function main() {
             '<template [switch-default]><li>when default1;</li></template>' +
             '<template [switch-default]><li>when default2;</li></template>' +
           '</ul></div>';
-        compileWithTemplate(template).then((pv) => {
-          createView(pv);
-          cd.detectChanges();
+
+        tb.createView(TestComponent, {html: template}).then((view) => {
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when default1;when default2;');
 
-          component.switchValue = 'a';
-          cd.detectChanges();
+          view.context.switchValue = 'a';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when a1;when a2;');
 
-          component.switchValue = 'b';
-          cd.detectChanges();
+          view.context.switchValue = 'b';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when b1;when b2;');
 
           async.done();
@@ -138,36 +99,36 @@ export function main() {
     });
 
     describe('when values changes', () => {
-      it('should switch amongst when values', inject([AsyncTestCompleter], (async) => {
+      it('should switch amongst when values',
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var template = '<div>' +
           '<ul [switch]="switchValue">' +
             '<template [switch-when]="when1"><li>when 1;</li></template>' +
             '<template [switch-when]="when2"><li>when 2;</li></template>' +
             '<template [switch-default]><li>when default;</li></template>' +
           '</ul></div>';
-        compileWithTemplate(template).then((pv) => {
-          createView(pv);
 
-          component.when1 = 'a';
-          component.when2 = 'b';
-          component.switchValue = 'a';
-          cd.detectChanges();
+        tb.createView(TestComponent, {html: template}).then((view) => {
+          view.context.when1 = 'a';
+          view.context.when2 = 'b';
+          view.context.switchValue = 'a';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when 1;');
 
-          component.switchValue = 'b';
-          cd.detectChanges();
+          view.context.switchValue = 'b';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when 2;');
 
-          component.switchValue = 'c';
-          cd.detectChanges();
+          view.context.switchValue = 'c';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when default;');
 
-          component.when1 = 'c';
-          cd.detectChanges();
+          view.context.when1 = 'c';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when 1;');
 
-          component.when1 = 'd';
-          cd.detectChanges();
+          view.context.when1 = 'd';
+          view.detectChanges();
           expect(DOM.getText(view.nodes[0])).toEqual('when default;');
 
           async.done();
@@ -178,6 +139,7 @@ export function main() {
 }
 
 @Component({selector: 'test-cmp'})
+@Template({directives: [Switch, SwitchWhen, SwitchDefault]})
 class TestComponent {
   switchValue: any;
   when1: any;
diff --git a/modules/angular2/test/forms/integration_spec.js b/modules/angular2/test/forms/integration_spec.js
index ad47a677a0..720fd4e5c0 100644
--- a/modules/angular2/test/forms/integration_spec.js
+++ b/modules/angular2/test/forms/integration_spec.js
@@ -10,70 +10,25 @@ import {
   iit,
   inject,
   it,
-  queryView,
   xit
 } from 'angular2/test_lib';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
-import {Inject, Injectable} from 'angular2/di';
-import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
-import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
-import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
-import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
-import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
-import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
-import {EventManager, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
-import {VmTurnZone} from 'angular2/src/core/zone/vm_turn_zone';
-
-import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
-
-import {Injector} from 'angular2/di';
+import {Inject} from 'angular2/di';
 
 import {Component, Decorator, Template, PropertySetter} from 'angular2/angular2';
+
+import {TestBed} from 'angular2/src/test_lib/test_bed';
+
 import {ControlGroupDirective, ControlDirective, Control, ControlGroup, OptionalControl,
   ControlValueAccessor, RequiredValidatorDirective, CheckboxControlValueAccessor,
   DefaultValueAccessor, Validators} from 'angular2/forms';
 
 export function main() {
-  function detectChanges(view) {
-    view.changeDetector.detectChanges();
-  }
-
-  function compile(componentType, template, context, callback) {
-    var tplResolver = new MockTemplateResolver();
-    var urlResolver = new UrlResolver();
-
-    var compiler = new Compiler(dynamicChangeDetection,
-      new TemplateLoader(null, null),
-      new DirectiveMetadataReader(),
-      new Parser(new Lexer()),
-      new CompilerCache(),
-      new NativeShadowDomStrategy(new StyleUrlResolver(urlResolver)),
-      tplResolver,
-      new ComponentUrlMapper(),
-      urlResolver
-    );
-
-    tplResolver.setTemplate(componentType, new Template({
-      inline: template,
-      directives: [ControlGroupDirective, ControlDirective, WrappedValue, RequiredValidatorDirective,
-        CheckboxControlValueAccessor, DefaultValueAccessor]
-    }));
-
-    compiler.compile(componentType).then((pv) => {
-      var eventManager = new EventManager([new DomEventsPlugin()], new FakeVmTurnZone());
-      var view = pv.instantiate(null, eventManager);
-      view.hydrate(new Injector([]), null, null, context, null);
-      detectChanges(view);
-      callback(view);
-    });
-  }
-
   if (DOM.supportsDOMEvents()) {
     describe("integration tests", () => {
-      it("should initialize DOM elements with the given form object", inject([AsyncTestCompleter], (async) => {
+      it("should initialize DOM elements with the given form object",
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var ctx = new MyComp(new ControlGroup({
           "login": new Control("loginValue")
         }));
@@ -82,14 +37,16 @@ export function main() {
                 <input type="text" control="login">
               </div>`;
 
-        compile(MyComp, t, ctx, (view) => {
-          var input = queryView(view, "input")
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var input = view.querySelector("input");
           expect(input.value).toEqual("loginValue");
           async.done();
         });
       }));
 
-      it("should update the control group values on DOM change", inject([AsyncTestCompleter], (async) => {
+      it("should update the control group values on DOM change",
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var form = new ControlGroup({
           "login": new Control("oldValue")
         });
@@ -99,8 +56,9 @@ export function main() {
                   <input type="text" control="login">
                 </div>`;
 
-        compile(MyComp, t, ctx, (view) => {
-          var input = queryView(view, "input")
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var input = view.querySelector("input");
 
           input.value = "updatedValue";
           dispatchEvent(input, "change");
@@ -110,14 +68,15 @@ export function main() {
         });
       }));
 
-      it("should work with single controls", inject([AsyncTestCompleter], (async) => {
+      it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var control = new Control("loginValue");
         var ctx = new MyComp(control);
 
         var t = `<div><input type="text" [control]="form"></div>`;
 
-        compile(MyComp, t, ctx, (view) => {
-          var input = queryView(view, "input")
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var input = view.querySelector("input")
           expect(input.value).toEqual("loginValue");
 
           input.value = "updatedValue";
@@ -128,7 +87,8 @@ export function main() {
         });
       }));
 
-      it("should update DOM elements when rebinding the control group", inject([AsyncTestCompleter], (async) => {
+      it("should update DOM elements when rebinding the control group",
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var form = new ControlGroup({
           "login": new Control("oldValue")
         });
@@ -138,19 +98,21 @@ export function main() {
                 <input type="text" control="login">
               </div>`;
 
-        compile(MyComp, t, ctx, (view) => {
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
           ctx.form = new ControlGroup({
             "login": new Control("newValue")
           });
-          detectChanges(view);
+          view.detectChanges();
 
-          var input = queryView(view, "input")
+          var input = view.querySelector("input")
           expect(input.value).toEqual("newValue");
           async.done();
         });
       }));
 
-      it("should update DOM element when rebinding the control name", inject([AsyncTestCompleter], (async) => {
+      it("should update DOM element when rebinding the control name",
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var ctx = new MyComp(new ControlGroup({
           "one": new Control("one"),
           "two": new Control("two")
@@ -160,12 +122,13 @@ export function main() {
                 <input type="text" [control]="name">
               </div>`;
 
-        compile(MyComp, t, ctx, (view) => {
-          var input = queryView(view, "input")
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var input = view.querySelector("input")
           expect(input.value).toEqual("one");
 
           ctx.name = "two";
-          detectChanges(view);
+          view.detectChanges();
 
           expect(input.value).toEqual("two");
           async.done();
@@ -173,15 +136,16 @@ export function main() {
       }));
 
       describe("different control types", () => {
-        it("should support <input type=text>", inject([AsyncTestCompleter], (async) => {
+        it("should support <input type=text>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
 
           var t = `<div [control-group]="form">
                     <input type="text" control="text">
                   </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
-            var input = queryView(view, "input")
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
+            var input = view.querySelector("input")
             expect(input.value).toEqual("old");
 
             input.value = "new";
@@ -192,15 +156,16 @@ export function main() {
           });
         }));
 
-        it("should support <input> without type", inject([AsyncTestCompleter], (async) => {
+        it("should support <input> without type", inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
 
           var t = `<div [control-group]="form">
                     <input control="text">
                   </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
-            var input = queryView(view, "input")
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
+            var input = view.querySelector("input")
             expect(input.value).toEqual("old");
 
             input.value = "new";
@@ -211,15 +176,16 @@ export function main() {
           });
         }));
 
-        it("should support <textarea>", inject([AsyncTestCompleter], (async) => {
+        it("should support <textarea>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var ctx = new MyComp(new ControlGroup({"text": new Control('old')}));
 
           var t = `<div [control-group]="form">
                     <textarea control="text"></textarea>
                   </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
-            var textarea = queryView(view, "textarea")
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
+            var textarea = view.querySelector("textarea")
             expect(textarea.value).toEqual("old");
 
             textarea.value = "new";
@@ -230,15 +196,16 @@ export function main() {
           });
         }));
 
-        it("should support <type=checkbox>", inject([AsyncTestCompleter], (async) => {
+        it("should support <type=checkbox>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)}));
 
           var t = `<div [control-group]="form">
                     <input type="checkbox" control="checkbox">
                   </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
-            var input = queryView(view, "input")
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
+            var input = view.querySelector("input")
             expect(input.checked).toBe(true);
 
             input.checked = false;
@@ -249,7 +216,7 @@ export function main() {
           });
         }));
 
-        it("should support <select>", inject([AsyncTestCompleter], (async) => {
+        it("should support <select>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var ctx = new MyComp(new ControlGroup({"city": new Control("SF")}));
 
           var t = `<div [control-group]="form">
@@ -259,9 +226,10 @@ export function main() {
                       </select>
                     </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
-            var select = queryView(view, "select")
-            var sfOption = queryView(view, "option")
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
+            var select = view.querySelector("select")
+            var sfOption = view.querySelector("option")
             expect(select.value).toEqual('SF');
             expect(sfOption.selected).toBe(true);
 
@@ -274,15 +242,16 @@ export function main() {
           });
         }));
 
-        it("should support custom value accessors", inject([AsyncTestCompleter], (async) => {
+        it("should support custom value accessors", inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var ctx = new MyComp(new ControlGroup({"name": new Control("aa")}));
 
           var t = `<div [control-group]="form">
                     <input type="text" control="name" wrapped-value>
                   </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
-            var input = queryView(view, "input")
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
+            var input = view.querySelector("input")
             expect(input.value).toEqual("!aa!");
 
             input.value = "!bb!";
@@ -295,7 +264,8 @@ export function main() {
       });
 
       describe("validations", () => {
-        it("should use validators defined in html", inject([AsyncTestCompleter], (async) => {
+        it("should use validators defined in html",
+          inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var form = new ControlGroup({"login": new Control("aa")});
           var ctx = new MyComp(form);
 
@@ -303,10 +273,11 @@ export function main() {
                     <input type="text" control="login" required>
                    </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
             expect(form.valid).toEqual(true);
 
-            var input = queryView(view, "input");
+            var input = view.querySelector("input");
 
             input.value = "";
             dispatchEvent(input, "change");
@@ -316,7 +287,8 @@ export function main() {
           });
         }));
 
-        it("should use validators defined in the model", inject([AsyncTestCompleter], (async) => {
+        it("should use validators defined in the model",
+          inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var form = new ControlGroup({"login": new Control("aa", Validators.required)});
           var ctx = new MyComp(form);
 
@@ -324,10 +296,11 @@ export function main() {
                     <input type="text" control="login">
                    </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
             expect(form.valid).toEqual(true);
 
-            var input = queryView(view, "input");
+            var input = view.querySelector("input");
 
             input.value = "";
             dispatchEvent(input, "change");
@@ -339,7 +312,8 @@ export function main() {
       });
 
       describe("nested forms", () => {
-        it("should init DOM with the given form object", inject([AsyncTestCompleter], (async) => {
+        it("should init DOM with the given form object",
+          inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var form = new ControlGroup({
             "nested": new ControlGroup({
               "login": new Control("value")
@@ -353,14 +327,16 @@ export function main() {
                     </div>
                 </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
-            var input = queryView(view, "input")
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
+            var input = view.querySelector("input")
             expect(input.value).toEqual("value");
             async.done();
           });
         }));
 
-        it("should update the control group values on DOM change", inject([AsyncTestCompleter], (async) => {
+        it("should update the control group values on DOM change",
+          inject([TestBed, AsyncTestCompleter], (tb, async) => {
           var form = new ControlGroup({
             "nested": new ControlGroup({
               "login": new Control("value")
@@ -374,8 +350,9 @@ export function main() {
                       </div>
                   </div>`;
 
-          compile(MyComp, t, ctx, (view) => {
-            var input = queryView(view, "input")
+          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+            view.detectChanges();
+            var input = view.querySelector("input")
 
             input.value = "updatedValue";
             dispatchEvent(input, "change");
@@ -389,9 +366,14 @@ export function main() {
   }
 }
 
-@Component({
-  selector: "my-comp"
-})
+@Component({selector: "my-comp"})
+@Template({directives: [
+  ControlGroupDirective,
+  ControlDirective,
+  WrappedValue,
+  RequiredValidatorDirective,
+  CheckboxControlValueAccessor,
+  DefaultValueAccessor]})
 class MyComp {
   form:any;
   name:string;
@@ -402,7 +384,6 @@ class MyComp {
   }
 }
 
-
 @Decorator({
   selector:'[wrapped-value]',
   events: {
@@ -426,17 +407,3 @@ class WrappedValue {
     this.onChange(value.substring(1, value.length - 1));
   }
 }
-
-class FakeVmTurnZone extends VmTurnZone {
-  constructor() {
-    super({enableLongStackTrace: false});
-  }
-
-  run(fn) {
-    fn();
-  }
-
-  runOutsideAngular(fn) {
-    fn();
-  }
-}
\ No newline at end of file