chore(test): migrate directives tests to testcomponentbuilder

Part of #2354

modules/angular2/test/directives/class_spec.ts

@@ -1,5 +1,6 @@
 import {
   AsyncTestCompleter,
+  TestComponentBuilder,
   beforeEach,
   beforeEachBindings,
   ddescribe,
@@ -14,7 +15,6 @@ import {
 } from 'angular2/test_lib';
 import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
 import {Component, View} from 'angular2/angular2';
-import {TestBed} from 'angular2/src/test_lib/test_bed';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {CSSClass} from 'angular2/src/directives/class';
 
@@ -24,76 +24,90 @@ export function main() {
     describe('expressions evaluating to objects', () => {
 
       it('should add classes specified in an object literal',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div [class]="{foo: true, bar: false}"></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo');
 
                  async.done();
                });
          }));
 
       it('should add and remove classes based on changes in object literal values',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo');
 
-                 view.context.condition = false;
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding bar');
+                 rootTC.componentInstance.condition = false;
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding bar');
 
                  async.done();
                });
          }));
 
       it('should add and remove classes based on changes to the expression object',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div [class]="objExpr"></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo');
 
-                 StringMapWrapper.set(view.context.objExpr, 'bar', true);
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+                 StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo bar');
 
-                 StringMapWrapper.set(view.context.objExpr, 'baz', true);
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar baz');
+                 StringMapWrapper.set(rootTC.componentInstance.objExpr, 'baz', true);
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo bar baz');
 
-                 StringMapWrapper.delete(view.context.objExpr, 'bar');
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
+                 StringMapWrapper.delete(rootTC.componentInstance.objExpr, 'bar');
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo baz');
 
                  async.done();
                });
          }));
 
       it('should add and remove classes based on reference changes to the expression object',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div [class]="objExpr"></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo');
 
-                 view.context.objExpr = {foo: true, bar: true};
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+                 rootTC.componentInstance.objExpr = {foo: true, bar: true};
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo bar');
 
-                 view.context.objExpr = {baz: true};
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding baz');
+                 rootTC.componentInstance.objExpr = {baz: true};
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding baz');
 
                  async.done();
                });
@@ -103,58 +117,68 @@ export function main() {
     describe('expressions evaluating to lists', () => {
 
       it('should add classes specified in a list literal',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = `<div [class]="['foo', 'bar']"></div>`;
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo bar');
 
                  async.done();
                });
          }));
 
       it('should add and remove classes based on changes to the expression',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div [class]="arrExpr"></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
 
-                 var arrExpr: List<string> = view.context.arrExpr;
+                 var arrExpr: List<string> = rootTC.componentInstance.arrExpr;
 
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo');
 
                  arrExpr.push('bar');
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo bar');
 
                  arrExpr[1] = 'baz';
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo baz');
 
-                 ListWrapper.remove(view.context.arrExpr, 'baz');
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+                 ListWrapper.remove(rootTC.componentInstance.arrExpr, 'baz');
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo');
 
                  async.done();
                });
          }));
 
       it('should add and remove classes when a reference changes',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div [class]="arrExpr"></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo');
 
-                 view.context.arrExpr = ['bar'];
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding bar');
+                 rootTC.componentInstance.arrExpr = ['bar'];
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding bar');
 
                  async.done();
                });
@@ -164,34 +188,40 @@ export function main() {
     describe('expressions evaluating to string', () => {
 
       it('should add classes specified in a string literal',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = `<div [class]="'foo bar'"></div>`;
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo bar');
 
                  async.done();
                });
          }));
 
       it('should add and remove classes based on changes to the expression',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div [class]="strExpr"></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo');
 
-                 view.context.strExpr = 'foo bar';
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+                 rootTC.componentInstance.strExpr = 'foo bar';
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding foo bar');
 
-                 view.context.strExpr = 'baz';
-                 view.detectChanges();
-                 expect(view.rootNodes[0].className).toEqual('ng-binding baz');
+                 rootTC.componentInstance.strExpr = 'baz';
+                 rootTC.detectChanges();
+                 expect(rootTC.componentViewChildren[0].nativeElement.className)
+                     .toEqual('ng-binding baz');
 
                  async.done();
                });
@@ -199,78 +229,92 @@ export function main() {
     });
 
     it('should remove active classes when expression evaluates to null',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div [class]="objExpr"></div>';
 
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('ng-binding foo');
 
-               view.context.objExpr = null;
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding');
+               rootTC.componentInstance.objExpr = null;
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('ng-binding');
 
-               view.context.objExpr = {'foo': false, 'bar': true};
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding bar');
+               rootTC.componentInstance.objExpr = {'foo': false, 'bar': true};
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('ng-binding bar');
 
                async.done();
              });
        }));
 
     it('should have no effect when activated by a static class attribute',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div class="init foo"></div>';
 
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.detectChanges();
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
                // TODO(pk): in CJS className isn't initialized properly if we don't mutate classes
-               expect(ListWrapper.join(DOM.classList(view.rootNodes[0]), ' '))
+               expect(ListWrapper.join(DOM.classList(rootTC.componentViewChildren[0].nativeElement),
+                                       ' '))
                    .toEqual('init foo ng-binding');
                async.done();
              });
        }));
 
     it('should co-operate with the class attribute',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div [class]="objExpr" class="init foo"></div>';
 
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               StringMapWrapper.set(view.context.objExpr, 'bar', true);
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('init foo ng-binding bar');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('init foo ng-binding bar');
 
-               StringMapWrapper.set(view.context.objExpr, 'foo', false);
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
+               StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('init ng-binding bar');
 
                async.done();
              });
        }));
 
     it('should co-operate with the class attribute and class.name binding',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div class="init foo" [class]="objExpr" [class.baz]="condition"></div>';
 
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('init foo ng-binding baz');
 
-               StringMapWrapper.set(view.context.objExpr, 'bar', true);
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz bar');
+               StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('init foo ng-binding baz bar');
 
-               StringMapWrapper.set(view.context.objExpr, 'foo', false);
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('init ng-binding baz bar');
+               StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('init ng-binding baz bar');
 
-               view.context.condition = false;
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
+               rootTC.componentInstance.condition = false;
+               rootTC.detectChanges();
+               expect(rootTC.componentViewChildren[0].nativeElement.className)
+                   .toEqual('init ng-binding bar');
 
                async.done();
              });

modules/angular2/test/directives/ng_for_spec.ts

@@ -1,5 +1,6 @@
 import {
   AsyncTestCompleter,
+  TestComponentBuilder,
   beforeEach,
   beforeEachBindings,
   ddescribe,
@@ -12,15 +13,12 @@ import {
   xit,
 } from 'angular2/test_lib';
 
-import {DOM} from 'angular2/src/dom/dom_adapter';
 import {ListWrapper} from 'angular2/src/facade/collection';
 
 import {Component, View} from 'angular2/angular2';
 
 import {NgFor} from 'angular2/src/directives/ng_for';
 
-import {TestBed} from 'angular2/src/test_lib/test_bed';
-
 
 export function main() {
   describe('ng-for', () => {
@@ -28,157 +26,167 @@ export function main() {
         '<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
 
     it('should reflect initial elements',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.createView(TestComponent, {html: TEMPLATE})
-             .then((view) => {
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;');
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, TEMPLATE)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('1;2;');
                async.done();
              });
        }));
 
     it('should reflect added elements',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.createView(TestComponent, {html: TEMPLATE})
-             .then((view) => {
-               view.detectChanges();
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, TEMPLATE)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
 
-               (<number[]>view.context.items).push(3);
-               view.detectChanges();
+               (<number[]>rootTC.componentInstance.items).push(3);
+               rootTC.detectChanges();
 
-               expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
+               expect(rootTC.nativeElement).toHaveText('1;2;3;');
                async.done();
              });
        }));
 
     it('should reflect removed elements',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.createView(TestComponent, {html: TEMPLATE})
-             .then((view) => {
-               view.detectChanges();
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, TEMPLATE)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
 
-               ListWrapper.removeAt(view.context.items, 1);
-               view.detectChanges();
+               ListWrapper.removeAt(rootTC.componentInstance.items, 1);
+               rootTC.detectChanges();
 
-               expect(DOM.getText(view.rootNodes[0])).toEqual('1;');
+               expect(rootTC.nativeElement).toHaveText('1;');
                async.done();
              });
        }));
 
     it('should reflect moved elements',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.createView(TestComponent, {html: TEMPLATE})
-             .then((view) => {
-               view.detectChanges();
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, TEMPLATE)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
 
-               ListWrapper.removeAt(view.context.items, 0);
-               (<number[]>view.context.items).push(1);
-               view.detectChanges();
+               ListWrapper.removeAt(rootTC.componentInstance.items, 0);
+               (<number[]>rootTC.componentInstance.items).push(1);
+               rootTC.detectChanges();
 
-               expect(DOM.getText(view.rootNodes[0])).toEqual('2;1;');
+               expect(rootTC.nativeElement).toHaveText('2;1;');
                async.done();
              });
        }));
 
     it('should reflect a mix of all changes (additions/removals/moves)',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.createView(TestComponent, {html: TEMPLATE})
-             .then((view) => {
-               view.context.items = [0, 1, 2, 3, 4, 5];
-               view.detectChanges();
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, TEMPLATE)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.componentInstance.items = [0, 1, 2, 3, 4, 5];
+               rootTC.detectChanges();
 
-               view.context.items = [6, 2, 7, 0, 4, 8];
-               view.detectChanges();
+               rootTC.componentInstance.items = [6, 2, 7, 0, 4, 8];
+               rootTC.detectChanges();
 
-               expect(DOM.getText(view.rootNodes[0])).toEqual('6;2;7;0;4;8;');
+               expect(rootTC.nativeElement).toHaveText('6;2;7;0;4;8;');
                async.done();
              });
        }));
 
     it('should iterate over an array of objects',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
 
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
 
                // INIT
-               view.context.items = [{'name': 'misko'}, {'name': 'shyam'}];
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;');
+               rootTC.componentInstance.items = [{'name': 'misko'}, {'name': 'shyam'}];
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('misko;shyam;');
 
                // GROW
-               (<any[]>view.context.items).push({'name': 'adam'});
-               view.detectChanges();
+               (<any[]>rootTC.componentInstance.items).push({'name': 'adam'});
+               rootTC.detectChanges();
 
-               expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;adam;');
+               expect(rootTC.nativeElement).toHaveText('misko;shyam;adam;');
 
                // SHRINK
-               ListWrapper.removeAt(view.context.items, 2);
-               ListWrapper.removeAt(view.context.items, 0);
-               view.detectChanges();
+               ListWrapper.removeAt(rootTC.componentInstance.items, 2);
+               ListWrapper.removeAt(rootTC.componentInstance.items, 0);
+               rootTC.detectChanges();
 
-               expect(DOM.getText(view.rootNodes[0])).toEqual('shyam;');
+               expect(rootTC.nativeElement).toHaveText('shyam;');
                async.done();
              });
        }));
 
     it('should gracefully handle nulls',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>';
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('');
                async.done();
              });
        }));
 
     it('should gracefully handle ref changing to null and back',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.createView(TestComponent, {html: TEMPLATE})
-             .then((view) => {
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;');
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, TEMPLATE)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('1;2;');
 
-               view.context.items = null;
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+               rootTC.componentInstance.items = null;
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('');
 
-               view.context.items = [1, 2, 3];
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
+               rootTC.componentInstance.items = [1, 2, 3];
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('1;2;3;');
                async.done();
              });
        }));
 
     it('should throw on ref changing to string',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.createView(TestComponent, {html: TEMPLATE})
-             .then((view) => {
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;');
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, TEMPLATE)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('1;2;');
 
-               view.context.items = 'whaaa';
-               expect(() => view.detectChanges()).toThrowError();
+               rootTC.componentInstance.items = 'whaaa';
+               expect(() => rootTC.detectChanges()).toThrowError();
                async.done();
              });
        }));
 
     it('should works with duplicates',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         tb.createView(TestComponent, {html: TEMPLATE})
-             .then((view) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, TEMPLATE)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
                var a = new Foo();
-               view.context.items = [a, a];
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('foo;foo;');
+               rootTC.componentInstance.items = [a, a];
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('foo;foo;');
                async.done();
              });
        }));
 
     it('should repeat over nested arrays',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div>' +
                         '<div template="ng-for #item of items">' +
                         '<div template="ng-for #subitem of item">' +
@@ -187,56 +195,59 @@ export function main() {
                         '</div>' +
                         '</div>';
 
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.context.items = [['a', 'b'], ['c']];
-               view.detectChanges();
-               view.detectChanges();
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('a-2;b-2;|c-1;|');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.componentInstance.items = [['a', 'b'], ['c']];
+               rootTC.detectChanges();
+               rootTC.detectChanges();
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('a-2;b-2;|c-1;|');
 
-               view.context.items = [['e'], ['f', 'g']];
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;|f-2;g-2;|');
+               rootTC.componentInstance.items = [['e'], ['f', 'g']];
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('e-1;|f-2;g-2;|');
 
                async.done();
              });
        }));
 
     it('should repeat over nested arrays with no intermediate element',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div><template ng-for #item [ng-for-of]="items">' +
                         '<div template="ng-for #subitem of item">' +
                         '{{subitem}}-{{item.length}};' +
                         '</div></template></div>';
 
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.context.items = [['a', 'b'], ['c']];
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('a-2;b-2;c-1;');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.componentInstance.items = [['a', 'b'], ['c']];
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('a-2;b-2;c-1;');
 
-               view.context.items = [['e'], ['f', 'g']];
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;f-2;g-2;');
+               rootTC.componentInstance.items = [['e'], ['f', 'g']];
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('e-1;f-2;g-2;');
                async.done();
              });
        }));
 
     it('should display indices correctly',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template =
              '<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
 
-         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.rootNodes[0])).toEqual('0123456789');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('0123456789');
 
-               view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('0123456789');
+               rootTC.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('0123456789');
                async.done();
              });
        }));

modules/angular2/test/directives/ng_if_spec.ts

@@ -1,5 +1,7 @@
 import {
   AsyncTestCompleter,
+  TestComponentBuilder,
+  By,
   beforeEach,
   ddescribe,
   describe,
@@ -14,8 +16,6 @@ import {
 
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
-import {TestBed} from 'angular2/src/test_lib/test_bed';
-
 import {Component, View} from 'angular2/angular2';
 
 import {NgIf} from 'angular2/src/directives/ng_if';
@@ -23,95 +23,99 @@ import {NgIf} from 'angular2/src/directives/ng_if';
 export function main() {
   describe('ng-if directive', () => {
     it('should work in a template attribute',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
 
-         tb.createView(TestComponent, {html: html})
-             .then((view) => {
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
+         tcb.overrideTemplate(TestComponent, html)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+               expect(rootTC.nativeElement).toHaveText('hello');
                async.done();
              });
        }));
 
     it('should work in a template element',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var html =
              '<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
 
-         tb.createView(TestComponent, {html: html})
-             .then((view) => {
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('hello2');
+         tcb.overrideTemplate(TestComponent, html)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+               expect(rootTC.nativeElement).toHaveText('hello2');
                async.done();
              });
        }));
 
     it('should toggle node when condition changes',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
 
-         tb.createView(TestComponent, {html: html})
-             .then((view) => {
-               view.context.booleanCondition = false;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+         tcb.overrideTemplate(TestComponent, html)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.componentInstance.booleanCondition = false;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
+               expect(rootTC.nativeElement).toHaveText('');
 
-               view.context.booleanCondition = true;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
+               rootTC.componentInstance.booleanCondition = true;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+               expect(rootTC.nativeElement).toHaveText('hello');
 
-               view.context.booleanCondition = false;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+               rootTC.componentInstance.booleanCondition = false;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
+               expect(rootTC.nativeElement).toHaveText('');
 
                async.done();
              });
        }));
 
     it('should handle nested if correctly',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var html =
              '<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
 
-         tb.createView(TestComponent, {html: html})
-             .then((view) => {
-               view.context.booleanCondition = false;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+         tcb.overrideTemplate(TestComponent, html)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.componentInstance.booleanCondition = false;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
+               expect(rootTC.nativeElement).toHaveText('');
 
-               view.context.booleanCondition = true;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
+               rootTC.componentInstance.booleanCondition = true;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+               expect(rootTC.nativeElement).toHaveText('hello');
 
-               view.context.nestedBooleanCondition = false;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+               rootTC.componentInstance.nestedBooleanCondition = false;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
+               expect(rootTC.nativeElement).toHaveText('');
 
-               view.context.nestedBooleanCondition = true;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
+               rootTC.componentInstance.nestedBooleanCondition = true;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+               expect(rootTC.nativeElement).toHaveText('hello');
 
-               view.context.booleanCondition = false;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+               rootTC.componentInstance.booleanCondition = false;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
+               expect(rootTC.nativeElement).toHaveText('');
 
                async.done();
              });
        }));
 
     it('should update several nodes with if',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var html =
              '<div>' +
              '<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
@@ -119,23 +123,24 @@ export function main() {
              '<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
              '</div>';
 
-         tb.createView(TestComponent, {html: html})
-             .then((view) => {
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(3);
-               expect(DOM.getText(view.rootNodes[0]))
+         tcb.overrideTemplate(TestComponent, html)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(3);
+               expect(DOM.getText(rootTC.nativeElement))
                    .toEqual('helloNumberhelloStringhelloFunction');
 
-               view.context.numberCondition = 0;
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('helloString');
+               rootTC.componentInstance.numberCondition = 0;
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+               expect(rootTC.nativeElement).toHaveText('helloString');
 
-               view.context.numberCondition = 1;
-               view.context.stringCondition = "bar";
-               view.detectChanges();
-               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-               expect(DOM.getText(view.rootNodes[0])).toEqual('helloNumber');
+               rootTC.componentInstance.numberCondition = 1;
+               rootTC.componentInstance.stringCondition = "bar";
+               rootTC.detectChanges();
+               expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+               expect(rootTC.nativeElement).toHaveText('helloNumber');
                async.done();
              });
        }));
@@ -143,36 +148,39 @@ export function main() {
 
     if (!IS_DARTIUM) {
       it('should not add the element twice if the condition goes from true to true (JS)',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
 
-           tb.createView(TestComponent, {html: html})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
+           tcb.overrideTemplate(TestComponent, html)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+                 expect(rootTC.nativeElement).toHaveText('hello');
 
-                 view.context.numberCondition = 2;
-                 view.detectChanges();
-                 expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
+                 rootTC.componentInstance.numberCondition = 2;
+                 rootTC.detectChanges();
+                 expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
+                 expect(rootTC.nativeElement).toHaveText('hello');
 
                  async.done();
                });
          }));
 
       it('should not recreate the element if the condition goes from true to true (JS)',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
 
-           tb.createView(TestComponent, {html: html})
-               .then((view) => {
-                 view.detectChanges();
-                 DOM.addClass(view.rootNodes[0].childNodes[1], "foo");
+           tcb.overrideTemplate(TestComponent, html)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 DOM.addClass(DOM.querySelector(rootTC.nativeElement, 'copy-me'), "foo");
 
-                 view.context.numberCondition = 2;
-                 view.detectChanges();
-                 expect(DOM.hasClass(view.rootNodes[0].childNodes[1], "foo")).toBe(true);
+                 rootTC.componentInstance.numberCondition = 2;
+                 rootTC.detectChanges();
+                 expect(DOM.hasClass(DOM.querySelector(rootTC.nativeElement, 'copy-me'), "foo"))
+                     .toBe(true);
 
                  async.done();
                });
@@ -181,14 +189,15 @@ export function main() {
 
     if (IS_DARTIUM) {
       it('should not create the element if the condition is not a boolean (DART)',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
 
-           tb.createView(TestComponent, {html: html})
-               .then((view) => {
-                 expect(() => view.detectChanges()).toThrowError();
-                 expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('');
+           tcb.overrideTemplate(TestComponent, html)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 expect(() => rootTC.detectChanges()).toThrowError();
+                 expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
+                 expect(rootTC.nativeElement).toHaveText('');
                  async.done();
                });
          }));

modules/angular2/test/directives/ng_switch_spec.ts

@@ -1,5 +1,6 @@
 import {
   AsyncTestCompleter,
+  TestComponentBuilder,
   beforeEach,
   ddescribe,
   describe,
@@ -10,69 +11,68 @@ import {
   it,
   xit,
 } from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
 
 import {Component, View} from 'angular2/angular2';
 
 import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch';
 
-import {TestBed} from 'angular2/src/test_lib/test_bed';
-
 export function main() {
   describe('switch', () => {
     describe('switch value changes', () => {
       it('should switch amongst when values',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div>' +
                           '<ul [ng-switch]="switchValue">' +
                           '<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
                           '<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
                           '</ul></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('');
 
-                 view.context.switchValue = 'a';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
+                 rootTC.componentInstance.switchValue = 'a';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when a');
 
-                 view.context.switchValue = 'b';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when b');
+                 rootTC.componentInstance.switchValue = 'b';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when b');
 
                  async.done();
                });
          }));
 
       it('should switch amongst when values with fallback to default',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div>' +
                           '<ul [ng-switch]="switchValue">' +
                           '<li template="ng-switch-when \'a\'">when a</li>' +
                           '<li template="ng-switch-default">when default</li>' +
                           '</ul></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when default');
 
-                 view.context.switchValue = 'a';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
+                 rootTC.componentInstance.switchValue = 'a';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when a');
 
-                 view.context.switchValue = 'b';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
+                 rootTC.componentInstance.switchValue = 'b';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when default');
 
                  async.done();
                });
          }));
 
       it('should support multiple whens with the same value',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div>' +
                           '<ul [ng-switch]="switchValue">' +
                           '<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
@@ -83,18 +83,19 @@ export function main() {
                           '<template ng-switch-default><li>when default2;</li></template>' +
                           '</ul></div>';
 
-           tb.createView(TestComponent, {html: template})
-               .then((view) => {
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when default1;when default2;');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when default1;when default2;');
 
-                 view.context.switchValue = 'a';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when a1;when a2;');
+                 rootTC.componentInstance.switchValue = 'a';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when a1;when a2;');
 
-                 view.context.switchValue = 'b';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when b1;when b2;');
+                 rootTC.componentInstance.switchValue = 'b';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when b1;when b2;');
 
                  async.done();
                });
@@ -103,7 +104,7 @@ export function main() {
 
     describe('when values changes', () => {
       it('should switch amongst when values',
-         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var template = '<div>' +
                           '<ul [ng-switch]="switchValue">' +
                           '<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
@@ -111,29 +112,30 @@ export function main() {
                           '<template ng-switch-default><li>when default;</li></template>' +
                           '</ul></div>';
 
-           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.rootNodes[0])).toEqual('when 1;');
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.componentInstance.when1 = 'a';
+                 rootTC.componentInstance.when2 = 'b';
+                 rootTC.componentInstance.switchValue = 'a';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when 1;');
 
-                 view.context.switchValue = 'b';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when 2;');
+                 rootTC.componentInstance.switchValue = 'b';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when 2;');
 
-                 view.context.switchValue = 'c';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
+                 rootTC.componentInstance.switchValue = 'c';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when default;');
 
-                 view.context.when1 = 'c';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when 1;');
+                 rootTC.componentInstance.when1 = 'c';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when 1;');
 
-                 view.context.when1 = 'd';
-                 view.detectChanges();
-                 expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
+                 rootTC.componentInstance.when1 = 'd';
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('when default;');
 
                  async.done();
                });

modules/angular2/test/directives/non_bindable_spec.ts

@@ -1,5 +1,7 @@
 import {
   AsyncTestCompleter,
+  TestComponentBuilder,
+  By,
   beforeEach,
   ddescribe,
   describe,
@@ -18,40 +20,44 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 
 import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable';
 
-import {TestBed} from 'angular2/src/test_lib/test_bed';
-
 export function main() {
   describe('non-bindable', () => {
     it('should not interpolate children',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.detectChanges();
-               expect(DOM.getText(view.rootNodes[0])).toEqual('foo{{text}}');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               expect(rootTC.nativeElement).toHaveText('foo{{text}}');
                async.done();
              });
        }));
 
     it('should ignore directives on child nodes',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.detectChanges();
-               var span = DOM.querySelector(view.rootNodes[0], '#child');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+
+               // We must use DOM.querySelector instead of rootTC.query here
+               // since the elements inside are not compiled.
+               var span = DOM.querySelector(rootTC.nativeElement, '#child');
                expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
                async.done();
              });
        }));
 
     it('should trigger directives on the same node',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.detectChanges();
-               var span = DOM.querySelector(view.rootNodes[0], '#child');
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((rootTC) => {
+               rootTC.detectChanges();
+               var span = DOM.querySelector(rootTC.nativeElement, '#child');
                expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
                async.done();
              });