From ef3e12e8033f54c71736a0a7c1928cf74437882d Mon Sep 17 00:00:00 2001
From: Ian Riley <iri@google.com>
Date: Tue, 26 May 2015 14:22:35 -0700
Subject: [PATCH] refactor (test/directives): ts'ify test/directives

Translate all of the AtScript code in .../test/directives to TypeScript.

Closes #2167
---
 .../angular2/test/directives/class_spec.js    | 152 -----------
 .../angular2/test/directives/class_spec.ts    | 160 +++++++++++
 .../angular2/test/directives/ng_for_spec.js   | 240 -----------------
 .../angular2/test/directives/ng_for_spec.ts   | 248 ++++++++++++++++++
 .../angular2/test/directives/ng_if_spec.js    | 202 --------------
 .../angular2/test/directives/ng_if_spec.ts    | 211 +++++++++++++++
 .../test/directives/ng_switch_spec.js         | 153 -----------
 .../test/directives/ng_switch_spec.ts         | 155 +++++++++++
 .../test/directives/non_bindable_spec.js      |  73 ------
 .../test/directives/non_bindable_spec.ts      |  71 +++++
 10 files changed, 845 insertions(+), 820 deletions(-)
 delete mode 100644 modules/angular2/test/directives/class_spec.js
 create mode 100644 modules/angular2/test/directives/class_spec.ts
 delete mode 100644 modules/angular2/test/directives/ng_for_spec.js
 create mode 100644 modules/angular2/test/directives/ng_for_spec.ts
 delete mode 100644 modules/angular2/test/directives/ng_if_spec.js
 create mode 100644 modules/angular2/test/directives/ng_if_spec.ts
 delete mode 100644 modules/angular2/test/directives/ng_switch_spec.js
 create mode 100644 modules/angular2/test/directives/ng_switch_spec.ts
 delete mode 100644 modules/angular2/test/directives/non_bindable_spec.js
 create mode 100644 modules/angular2/test/directives/non_bindable_spec.ts

diff --git a/modules/angular2/test/directives/class_spec.js b/modules/angular2/test/directives/class_spec.js
deleted file mode 100644
index d58f87e265..0000000000
--- a/modules/angular2/test/directives/class_spec.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  beforeEachBindings,
-  ddescribe,
-  xdescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-  } from 'angular2/test_lib';
-
-import {StringMapWrapper} from 'angular2/src/facade/collection';
-
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-
-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', () => {
-
-    it('should add classes specified in an object literal',
-      inject([TestBed, AsyncTestCompleter], (tb, 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');
-
-        async.done();
-      });
-    }));
-
-    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>';
-
-      tb.createView(TestComponent, {html: template}).then((view) => {
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding foo');
-
-        view.context.condition = false;
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding bar');
-
-        async.done();
-      });
-    }));
-
-    it('should add and remove classes based on changes to the expression object',
-      inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var template = '<div [class]="expr"></div>';
-
-      tb.createView(TestComponent, {html: template}).then((view) => {
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding foo');
-
-        StringMapWrapper.set(view.context.expr, 'bar', true);
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
-
-        StringMapWrapper.set(view.context.expr, 'baz', true);
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding foo bar baz');
-
-        StringMapWrapper.delete(view.context.expr, 'bar');
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
-
-        async.done();
-      });
-    }));
-
-    it('should retain existing classes when expression evaluates to null',
-      inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var template = '<div [class]="expr"></div>';
-
-      tb.createView(TestComponent, {html: template}).then((view) => {
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding foo');
-
-        view.context.expr = null;
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding foo');
-
-        view.context.expr = {'foo': false, 'bar': true};
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('ng-binding bar');
-
-        async.done();
-      });
-    }));
-
-    it('should co-operate with the class attribute',
-      inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var template = '<div [class]="expr" class="init foo"></div>';
-
-      tb.createView(TestComponent, {html: template}).then((view) => {
-        StringMapWrapper.set(view.context.expr, 'bar', true);
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('init foo ng-binding bar');
-
-        StringMapWrapper.set(view.context.expr, 'foo', false);
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
-
-        async.done();
-      });
-    }));
-
-    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>';
-
-      tb.createView(TestComponent, {html: template}).then((view) => {
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz');
-
-        StringMapWrapper.set(view.context.expr, 'bar', true);
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz bar');
-
-        StringMapWrapper.set(view.context.expr, 'foo', false);
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('init ng-binding baz bar');
-
-        view.context.condition = false;
-        view.detectChanges();
-        expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
-
-        async.done();
-      });
-    }));
-  })
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [CSSClass]})
-class TestComponent {
-  condition:boolean;
-  expr;
-  constructor() {
-    this.condition = true;
-    this.expr = {'foo': true, 'bar': false};
-  }
-}
diff --git a/modules/angular2/test/directives/class_spec.ts b/modules/angular2/test/directives/class_spec.ts
new file mode 100644
index 0000000000..63a5eb5d1d
--- /dev/null
+++ b/modules/angular2/test/directives/class_spec.ts
@@ -0,0 +1,160 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  beforeEachBindings,
+  ddescribe,
+  xdescribe,
+  describe,
+  el,
+  expect,
+  iit,
+  inject,
+  it,
+  xit,
+} from 'angular2/test_lib';
+
+import {StringMapWrapper} from 'angular2/src/facade/collection';
+
+import {Component, View} from 'angular2/angular2';
+
+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', () => {
+
+    it('should add classes specified in an object literal',
+       inject([TestBed, AsyncTestCompleter], (tb, 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');
+
+               async.done();
+             });
+       }));
+
+    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>';
+
+         tb.createView(TestComponent, {html: template})
+             .then((view) => {
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+               view.context.condition = false;
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding bar');
+
+               async.done();
+             });
+       }));
+
+    it('should add and remove classes based on changes to the expression object',
+       inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var template = '<div [class]="expr"></div>';
+
+         tb.createView(TestComponent, {html: template})
+             .then((view) => {
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+               StringMapWrapper.set(view.context.expr, 'bar', true);
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+
+               StringMapWrapper.set(view.context.expr, 'baz', true);
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding foo bar baz');
+
+               StringMapWrapper.delete(view.context.expr, 'bar');
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
+
+               async.done();
+             });
+       }));
+
+    it('should retain existing classes when expression evaluates to null',
+       inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var template = '<div [class]="expr"></div>';
+
+         tb.createView(TestComponent, {html: template})
+             .then((view) => {
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+               view.context.expr = null;
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+               view.context.expr = {
+                 'foo': false,
+                 'bar': true
+               };
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('ng-binding bar');
+
+               async.done();
+             });
+       }));
+
+    it('should co-operate with the class attribute',
+       inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var template = '<div [class]="expr" class="init foo"></div>';
+
+         tb.createView(TestComponent, {html: template})
+             .then((view) => {
+               StringMapWrapper.set(view.context.expr, 'bar', true);
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('init foo ng-binding bar');
+
+               StringMapWrapper.set(view.context.expr, 'foo', false);
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
+
+               async.done();
+             });
+       }));
+
+    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>';
+
+         tb.createView(TestComponent, {html: template})
+             .then((view) => {
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz');
+
+               StringMapWrapper.set(view.context.expr, 'bar', true);
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz bar');
+
+               StringMapWrapper.set(view.context.expr, 'foo', false);
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('init ng-binding baz bar');
+
+               view.context.condition = false;
+               view.detectChanges();
+               expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
+
+               async.done();
+             });
+       }));
+  })
+}
+
+@Component({selector: 'test-cmp'})
+@View({directives: [CSSClass]})
+class TestComponent {
+  condition: boolean;
+  expr;
+  constructor() {
+    this.condition = true;
+    this.expr = {'foo': true, 'bar': false};
+  }
+}
diff --git a/modules/angular2/test/directives/ng_for_spec.js b/modules/angular2/test/directives/ng_for_spec.js
deleted file mode 100644
index 6a99a28f55..0000000000
--- a/modules/angular2/test/directives/ng_for_spec.js
+++ /dev/null
@@ -1,240 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  beforeEachBindings,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {NgFor} from 'angular2/src/directives/ng_for';
-
-import {TestBed} from 'angular2/src/test_lib/test_bed';
-
-
-export function main() {
-  describe('ng-for', () => {
-    var TEMPLATE = '<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
-
-    it('should reflect initial elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
-        view.detectChanges();
-        expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;');
-        async.done();
-      });
-    }));
-
-    it('should reflect added elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
-        view.detectChanges();
-
-        ListWrapper.push(view.context.items, 3);
-        view.detectChanges();
-
-        expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
-        async.done();
-      });
-    }));
-
-    it('should reflect removed elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
-        view.detectChanges();
-
-        ListWrapper.removeAt(view.context.items, 1);
-        view.detectChanges();
-
-        expect(DOM.getText(view.rootNodes[0])).toEqual('1;');
-        async.done();
-      });
-    }));
-
-    it('should reflect moved elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
-        view.detectChanges();
-
-        ListWrapper.removeAt(view.context.items, 0);
-        ListWrapper.push(view.context.items, 1);
-        view.detectChanges();
-
-        expect(DOM.getText(view.rootNodes[0])).toEqual('2;1;');
-        async.done();
-      });
-    }));
-
-    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();
-
-        view.context.items = [6, 2, 7, 0, 4, 8];
-        view.detectChanges();
-
-        expect(DOM.getText(view.rootNodes[0])).toEqual('6;2;7;0;4;8;');
-        async.done();
-      });
-    }));
-
-    it('should iterate over an array of objects', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
-
-      tb.createView(TestComponent, {html: template}).then((view) => {
-
-        // INIT
-        view.context.items = [{'name': 'misko'}, {'name':'shyam'}];
-        view.detectChanges();
-        expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;');
-
-        // GROW
-        ListWrapper.push(view.context.items, {'name': 'adam'});
-        view.detectChanges();
-
-        expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;adam;');
-
-        // SHRINK
-        ListWrapper.removeAt(view.context.items, 2);
-        ListWrapper.removeAt(view.context.items, 0);
-        view.detectChanges();
-
-        expect(DOM.getText(view.rootNodes[0])).toEqual('shyam;');
-        async.done();
-      });
-    }));
-
-    it('should gracefully handle nulls', inject([TestBed, AsyncTestCompleter], (tb, 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('');
-        async.done();
-      });
-    }));
-
-    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.rootNodes[0])).toEqual('1;2;');
-
-        view.context.items = null;
-        view.detectChanges();
-        expect(DOM.getText(view.rootNodes[0])).toEqual('');
-
-        view.context.items = [1, 2, 3];
-        view.detectChanges();
-        expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
-        async.done();
-      });
-    }));
-
-    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.rootNodes[0])).toEqual('1;2;');
-
-        view.context.items = 'whaaa';
-        expect(() => view.detectChanges()).toThrowError();
-        async.done();
-      });
-    }));
-
-    it('should works with duplicates', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
-        var a = new Foo();
-        view.context.items = [a, a];
-        view.detectChanges();
-        expect(DOM.getText(view.rootNodes[0])).toEqual('foo;foo;');
-        async.done();
-      });
-    }));
-
-    it('should repeat over nested arrays', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var template =
-        '<div>'+
-          '<div template="ng-for #item of items">' +
-            '<div template="ng-for #subitem of item">' +
-              '{{subitem}}-{{item.length}};' +
-            '</div>|'+
-          '</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;|');
-
-        view.context.items = [['e'], ['f', 'g']];
-        view.detectChanges();
-        expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;|f-2;g-2;|');
-
-        async.done();
-      });
-    }));
-
-    it('should repeat over nested arrays with no intermediate element',
-      inject([TestBed, AsyncTestCompleter], (tb, 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;');
-
-        view.context.items = [['e'], ['f', 'g']];
-        view.detectChanges();
-        expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;f-2;g-2;');
-        async.done();
-      });
-    }));
-
-    it('should display indices correctly',
-      inject([TestBed, AsyncTestCompleter], (tb, 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');
-
-        view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
-        view.detectChanges();
-        expect(DOM.getText(view.rootNodes[0])).toEqual('0123456789');
-        async.done();
-      });
-    }));
-
-  });
-}
-
-class Foo {
-  toString() {
-    return 'foo';
-  }
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgFor]})
-class TestComponent {
-  items: any;
-  constructor() {
-    this.items = [1, 2];
-  }
-}
diff --git a/modules/angular2/test/directives/ng_for_spec.ts b/modules/angular2/test/directives/ng_for_spec.ts
new file mode 100644
index 0000000000..beb395f1c3
--- /dev/null
+++ b/modules/angular2/test/directives/ng_for_spec.ts
@@ -0,0 +1,248 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  beforeEachBindings,
+  ddescribe,
+  describe,
+  el,
+  expect,
+  iit,
+  inject,
+  it,
+  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', () => {
+    var TEMPLATE =
+        '<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
+
+    it('should reflect initial elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         tb.createView(TestComponent, {html: TEMPLATE})
+             .then((view) => {
+               view.detectChanges();
+               expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;');
+               async.done();
+             });
+       }));
+
+    it('should reflect added elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         tb.createView(TestComponent, {html: TEMPLATE})
+             .then((view) => {
+               view.detectChanges();
+
+               ListWrapper.push(view.context.items, 3);
+               view.detectChanges();
+
+               expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
+               async.done();
+             });
+       }));
+
+    it('should reflect removed elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         tb.createView(TestComponent, {html: TEMPLATE})
+             .then((view) => {
+               view.detectChanges();
+
+               ListWrapper.removeAt(view.context.items, 1);
+               view.detectChanges();
+
+               expect(DOM.getText(view.rootNodes[0])).toEqual('1;');
+               async.done();
+             });
+       }));
+
+    it('should reflect moved elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         tb.createView(TestComponent, {html: TEMPLATE})
+             .then((view) => {
+               view.detectChanges();
+
+               ListWrapper.removeAt(view.context.items, 0);
+               ListWrapper.push(view.context.items, 1);
+               view.detectChanges();
+
+               expect(DOM.getText(view.rootNodes[0])).toEqual('2;1;');
+               async.done();
+             });
+       }));
+
+    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();
+
+               view.context.items = [6, 2, 7, 0, 4, 8];
+               view.detectChanges();
+
+               expect(DOM.getText(view.rootNodes[0])).toEqual('6;2;7;0;4;8;');
+               async.done();
+             });
+       }));
+
+    it('should iterate over an array of objects',
+       inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
+
+         tb.createView(TestComponent, {html: template})
+             .then((view) => {
+
+               // INIT
+               view.context.items = [{'name': 'misko'}, {'name': 'shyam'}];
+               view.detectChanges();
+               expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;');
+
+               // GROW
+               ListWrapper.push(view.context.items, {'name': 'adam'});
+               view.detectChanges();
+
+               expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;adam;');
+
+               // SHRINK
+               ListWrapper.removeAt(view.context.items, 2);
+               ListWrapper.removeAt(view.context.items, 0);
+               view.detectChanges();
+
+               expect(DOM.getText(view.rootNodes[0])).toEqual('shyam;');
+               async.done();
+             });
+       }));
+
+    it('should gracefully handle nulls', inject([TestBed, AsyncTestCompleter], (tb, 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('');
+               async.done();
+             });
+       }));
+
+    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.rootNodes[0])).toEqual('1;2;');
+
+               view.context.items = null;
+               view.detectChanges();
+               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+
+               view.context.items = [1, 2, 3];
+               view.detectChanges();
+               expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
+               async.done();
+             });
+       }));
+
+    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.rootNodes[0])).toEqual('1;2;');
+
+               view.context.items = 'whaaa';
+               expect(() => view.detectChanges()).toThrowError();
+               async.done();
+             });
+       }));
+
+    it('should works with duplicates', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         tb.createView(TestComponent, {html: TEMPLATE})
+             .then((view) => {
+               var a = new Foo();
+               view.context.items = [a, a];
+               view.detectChanges();
+               expect(DOM.getText(view.rootNodes[0])).toEqual('foo;foo;');
+               async.done();
+             });
+       }));
+
+    it('should repeat over nested arrays', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var template = '<div>' +
+                        '<div template="ng-for #item of items">' +
+                        '<div template="ng-for #subitem of item">' +
+                        '{{subitem}}-{{item.length}};' +
+                        '</div>|' +
+                        '</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;|');
+
+               view.context.items = [['e'], ['f', 'g']];
+               view.detectChanges();
+               expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;|f-2;g-2;|');
+
+               async.done();
+             });
+       }));
+
+    it('should repeat over nested arrays with no intermediate element',
+       inject([TestBed, AsyncTestCompleter], (tb, 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;');
+
+               view.context.items = [['e'], ['f', 'g']];
+               view.detectChanges();
+               expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;f-2;g-2;');
+               async.done();
+             });
+       }));
+
+    it('should display indices correctly', inject([TestBed, AsyncTestCompleter], (tb, 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');
+
+               view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
+               view.detectChanges();
+               expect(DOM.getText(view.rootNodes[0])).toEqual('0123456789');
+               async.done();
+             });
+       }));
+
+  });
+}
+
+class Foo {
+  toString() { return 'foo'; }
+}
+
+@Component({selector: 'test-cmp'})
+@View({directives: [NgFor]})
+class TestComponent {
+  items: any;
+  constructor() { this.items = [1, 2]; }
+}
diff --git a/modules/angular2/test/directives/ng_if_spec.js b/modules/angular2/test/directives/ng_if_spec.js
deleted file mode 100644
index efbef80599..0000000000
--- a/modules/angular2/test/directives/ng_if_spec.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  IS_DARTIUM,
-  it,
-  xit,
-} from 'angular2/test_lib';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {TestBed} from 'angular2/src/test_lib/test_bed';
-
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {NgIf} from 'angular2/src/directives/ng_if';
-
-export function main() {
-  describe('if directive', () => {
-    it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, 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');
-        async.done();
-      });
-    }));
-
-    it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, 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');
-        async.done();
-      });
-    }));
-
-    it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, 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('');
-
-        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');
-
-        view.context.booleanCondition = false;
-        view.detectChanges();
-        expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-        expect(DOM.getText(view.rootNodes[0])).toEqual('');
-
-        async.done();
-      });
-    }));
-
-    it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, 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('');
-
-        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');
-
-        view.context.nestedBooleanCondition = false;
-        view.detectChanges();
-        expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-        expect(DOM.getText(view.rootNodes[0])).toEqual('');
-
-        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');
-
-        view.context.booleanCondition = false;
-        view.detectChanges();
-        expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
-        expect(DOM.getText(view.rootNodes[0])).toEqual('');
-
-        async.done();
-      });
-    }));
-
-    it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var html =
-      '<div>' +
-        '<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
-        '<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
-        '<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])).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');
-
-        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');
-        async.done();
-      });
-    }));
-
-
-    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="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');
-
-          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');
-
-          async.done();
-        });
-      }));
-
-      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="ng-if numberCondition">hello</copy-me></div>';
-
-          tb.createView(TestComponent, {html: html}).then((view) => {
-            view.detectChanges();
-            DOM.addClass(view.rootNodes[0].childNodes[1], "foo");
-
-            view.context.numberCondition = 2;
-            view.detectChanges();
-            expect(DOM.hasClass(view.rootNodes[0].childNodes[1], "foo")).toBe(true);
-
-            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="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('');
-            async.done();
-          });
-      }));
-    }
-
-  });
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgIf]})
-class TestComponent {
-  booleanCondition: boolean;
-  nestedBooleanCondition: boolean;
-  numberCondition: number;
-  stringCondition: string;
-  functionCondition: Function;
-  constructor() {
-    this.booleanCondition = true;
-    this.nestedBooleanCondition = true;
-    this.numberCondition = 1;
-    this.stringCondition = "foo";
-    this.functionCondition = function(s, n){
-      return s == "foo" && n == 1;
-    };
-  }
-}
diff --git a/modules/angular2/test/directives/ng_if_spec.ts b/modules/angular2/test/directives/ng_if_spec.ts
new file mode 100644
index 0000000000..f88c910724
--- /dev/null
+++ b/modules/angular2/test/directives/ng_if_spec.ts
@@ -0,0 +1,211 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  describe,
+  el,
+  expect,
+  iit,
+  inject,
+  IS_DARTIUM,
+  it,
+  xit,
+} from 'angular2/test_lib';
+
+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';
+
+export function main() {
+  describe('if directive', () => {
+    it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, 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');
+               async.done();
+             });
+       }));
+
+    it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, 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');
+               async.done();
+             });
+       }));
+
+    it('should toggle node when condition changes',
+       inject([TestBed, AsyncTestCompleter], (tb, 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('');
+
+               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');
+
+               view.context.booleanCondition = false;
+               view.detectChanges();
+               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
+               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+
+               async.done();
+             });
+       }));
+
+    it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, 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('');
+
+               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');
+
+               view.context.nestedBooleanCondition = false;
+               view.detectChanges();
+               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
+               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+
+               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');
+
+               view.context.booleanCondition = false;
+               view.detectChanges();
+               expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
+               expect(DOM.getText(view.rootNodes[0])).toEqual('');
+
+               async.done();
+             });
+       }));
+
+    it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var html =
+             '<div>' +
+             '<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
+             '<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
+             '<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]))
+                   .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');
+
+               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');
+               async.done();
+             });
+       }));
+
+
+    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="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');
+
+                 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');
+
+                 async.done();
+               });
+         }));
+
+      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="ng-if numberCondition">hello</copy-me></div>';
+
+           tb.createView(TestComponent, {html: html})
+               .then((view) => {
+                 view.detectChanges();
+                 DOM.addClass(view.rootNodes[0].childNodes[1], "foo");
+
+                 view.context.numberCondition = 2;
+                 view.detectChanges();
+                 expect(DOM.hasClass(view.rootNodes[0].childNodes[1], "foo")).toBe(true);
+
+                 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="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('');
+                 async.done();
+               });
+         }));
+    }
+
+  });
+}
+
+@Component({selector: 'test-cmp'})
+@View({directives: [NgIf]})
+class TestComponent {
+  booleanCondition: boolean;
+  nestedBooleanCondition: boolean;
+  numberCondition: number;
+  stringCondition: string;
+  functionCondition: Function;
+  constructor() {
+    this.booleanCondition = true;
+    this.nestedBooleanCondition = true;
+    this.numberCondition = 1;
+    this.stringCondition = "foo";
+    this.functionCondition = function(s, n) { return s == "foo" && n == 1; };
+  }
+}
diff --git a/modules/angular2/test/directives/ng_switch_spec.js b/modules/angular2/test/directives/ng_switch_spec.js
deleted file mode 100644
index d8deec4931..0000000000
--- a/modules/angular2/test/directives/ng_switch_spec.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-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, 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('');
-
-          view.context.switchValue = 'a';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
-
-          view.context.switchValue = 'b';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when b');
-
-          async.done();
-        });
-      }));
-
-      it('should switch amongst when values with fallback to default',
-        inject([TestBed, AsyncTestCompleter], (tb, 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');
-
-          view.context.switchValue = 'a';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
-
-          view.context.switchValue = 'b';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
-
-          async.done();
-        });
-      }));
-
-      it('should support multiple whens with the same value',
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var template = '<div>' +
-          '<ul [ng-switch]="switchValue">' +
-            '<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
-            '<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
-            '<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
-            '<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
-            '<template [ng-switch-default]><li>when default1;</li></template>' +
-            '<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;');
-
-          view.context.switchValue = 'a';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when a1;when a2;');
-
-          view.context.switchValue = 'b';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when b1;when b2;');
-
-          async.done();
-        });
-      }));
-    });
-
-    describe('when values changes', () => {
-      it('should switch amongst when values',
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var template = '<div>' +
-          '<ul [ng-switch]="switchValue">' +
-            '<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
-            '<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
-            '<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;');
-
-          view.context.switchValue = 'b';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when 2;');
-
-          view.context.switchValue = 'c';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
-
-          view.context.when1 = 'c';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when 1;');
-
-          view.context.when1 = 'd';
-          view.detectChanges();
-          expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
-
-          async.done();
-        });
-      }));
-    });
-  });
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
-class TestComponent {
-  switchValue: any;
-  when1: any;
-  when2: any;
-
-  constructor() {
-    this.switchValue = null;
-    this.when1 = null;
-    this.when2 = null;
-  }
-}
diff --git a/modules/angular2/test/directives/ng_switch_spec.ts b/modules/angular2/test/directives/ng_switch_spec.ts
new file mode 100644
index 0000000000..7166e49503
--- /dev/null
+++ b/modules/angular2/test/directives/ng_switch_spec.ts
@@ -0,0 +1,155 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  describe,
+  el,
+  expect,
+  iit,
+  inject,
+  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, 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('');
+
+                 view.context.switchValue = 'a';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
+
+                 view.context.switchValue = 'b';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when b');
+
+                 async.done();
+               });
+         }));
+
+      it('should switch amongst when values with fallback to default',
+         inject([TestBed, AsyncTestCompleter], (tb, 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');
+
+                 view.context.switchValue = 'a';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
+
+                 view.context.switchValue = 'b';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
+
+                 async.done();
+               });
+         }));
+
+      it('should support multiple whens with the same value',
+         inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var template = '<div>' +
+                          '<ul [ng-switch]="switchValue">' +
+                          '<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
+                          '<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
+                          '<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
+                          '<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
+                          '<template [ng-switch-default]><li>when default1;</li></template>' +
+                          '<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;');
+
+                 view.context.switchValue = 'a';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when a1;when a2;');
+
+                 view.context.switchValue = 'b';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when b1;when b2;');
+
+                 async.done();
+               });
+         }));
+    });
+
+    describe('when values changes', () => {
+      it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var template = '<div>' +
+                          '<ul [ng-switch]="switchValue">' +
+                          '<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
+                          '<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
+                          '<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;');
+
+                 view.context.switchValue = 'b';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when 2;');
+
+                 view.context.switchValue = 'c';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
+
+                 view.context.when1 = 'c';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when 1;');
+
+                 view.context.when1 = 'd';
+                 view.detectChanges();
+                 expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
+
+                 async.done();
+               });
+         }));
+    });
+  });
+}
+
+@Component({selector: 'test-cmp'})
+@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
+class TestComponent {
+  switchValue: any;
+  when1: any;
+  when2: any;
+
+  constructor() {
+    this.switchValue = null;
+    this.when1 = null;
+    this.when2 = null;
+  }
+}
diff --git a/modules/angular2/test/directives/non_bindable_spec.js b/modules/angular2/test/directives/non_bindable_spec.js
deleted file mode 100644
index d07d24c7f1..0000000000
--- a/modules/angular2/test/directives/non_bindable_spec.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import {
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit,
-} from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-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, 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}}');
-        async.done();
-      });
-    }));
-
-    it('should ignore directives on child nodes', inject([TestBed, AsyncTestCompleter], (tb, 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');
-        expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
-        async.done();
-      });
-    }));
-
-    it('should trigger directives on the same node', inject([TestBed, AsyncTestCompleter], (tb, 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');
-        expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
-        async.done();
-      });
-    }));
-  })
-}
-
-@Component({selector: 'test-cmp'})
-@View({directives: [NgNonBindable, TestDirective]})
-class TestComponent {
-  text: string;
-  constructor() {
-    this.text = 'foo';
-  }
-}
-
-@Directive({
-  selector: '[test-dec]'
-})
-class TestDirective {
-  constructor(el: ElementRef) {
-    DOM.addClass(el.domElement, 'compiled');
-  }
-}
diff --git a/modules/angular2/test/directives/non_bindable_spec.ts b/modules/angular2/test/directives/non_bindable_spec.ts
new file mode 100644
index 0000000000..c5347122be
--- /dev/null
+++ b/modules/angular2/test/directives/non_bindable_spec.ts
@@ -0,0 +1,71 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  describe,
+  el,
+  expect,
+  iit,
+  inject,
+  it,
+  xit,
+} from 'angular2/test_lib';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
+import {Component, Directive, View} from 'angular2/angular2';
+
+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, 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}}');
+               async.done();
+             });
+       }));
+
+    it('should ignore directives on child nodes',
+       inject([TestBed, AsyncTestCompleter], (tb, 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');
+               expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
+               async.done();
+             });
+       }));
+
+    it('should trigger directives on the same node',
+       inject([TestBed, AsyncTestCompleter], (tb, 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');
+               expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
+               async.done();
+             });
+       }));
+  })
+}
+
+@Directive({selector: '[test-dec]'})
+class TestDirective {
+  constructor(el: ElementRef) { DOM.addClass(el.domElement, 'compiled'); }
+}
+
+@Component({selector: 'test-cmp'})
+@View({directives: [NgNonBindable, TestDirective]})
+class TestComponent {
+  text: string;
+  constructor() { this.text = 'foo'; }
+}