test: convert to using TestBed

Author: vicb

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;