chore(build): run event tests in Node

Closes #1476

gulpfile.js

@@ -215,7 +215,6 @@ var CONFIG = {
 };
 CONFIG.test.js.cjs = CONFIG.test.js.cjs.map(function(s) {return CONFIG.dest.js.cjs + s});
 CONFIG.test.js.cjs.push('!**/core/zone/vm_turn_zone_spec.js'); //Disabled in nodejs because it relies on Zone.js
-CONFIG.test.js.cjs.push('!**/render/dom/events/event_manager_spec.js'); //Disabled in nodejs because it relies on DOM events
 
 // ------------
 // clean

modules/angular2/src/dom/parse5_adapter.cjs

@@ -84,19 +84,46 @@ export class Parse5DomAdapter extends DomAdapter {
     return result;
   }
   on(el, evt, listener) {
-    //Do nothing, in order to not break forms integration tests
+    var listenersMap = el._eventListenersMap;
+    if (isBlank(listenersMap)) {
+      var listenersMap = StringMapWrapper.create();
+      el._eventListenersMap = listenersMap;
+    }
+    var listeners = StringMapWrapper.get(listenersMap, evt);
+    if (isBlank(listeners)) {
+      listeners = ListWrapper.create();
+    }
+    ListWrapper.push(listeners, listener);
+    StringMapWrapper.set(listenersMap, evt, listeners);
   }
   onAndCancel(el, evt, listener): Function {
-    //Do nothing, in order to not break forms integration tests
+    this.on(el, evt, listener);
+    return () => {ListWrapper.remove(StringMapWrapper.get(el._eventListenersMap, evt), listener);};
   }
   dispatchEvent(el, evt) {
-    throw _notImplemented('dispatchEvent');
+    if (isBlank(evt.target)) {
+      evt.target = el;
+    }
+    if (isPresent(el._eventListenersMap)) {
+      var listeners = StringMapWrapper.get(el._eventListenersMap, evt.type);
+      if (isPresent(listeners)) {
+        for (var i = 0; i < listeners.length; i++) {
+          listeners[i](evt);
+        }
+      }
+    }
+    if (isPresent(el.parent)) {
+      this.dispatchEvent(el.parent, evt);
+    }
+    if (isPresent(el._window)) {
+      this.dispatchEvent(el._window, evt);
+    }
   }
   createMouseEvent(eventType) {
-    throw _notImplemented('createMouseEvent');
+    return this.createEvent(eventType);
   }
   createEvent(eventType) {
-    throw _notImplemented('createEvent');
+    return {type: eventType};
   }
   getInnerHTML(el) {
     return serializer.serialize(this.templateAwareRoot(el));
@@ -378,6 +405,7 @@ export class Parse5DomAdapter extends DomAdapter {
     this.appendChild(newDoc, body);
     StringMapWrapper.set(newDoc, "head", head);
     StringMapWrapper.set(newDoc, "body", body);
+    StringMapWrapper.set(newDoc, "_window", StringMapWrapper.create());
     return newDoc;
   }
   defaultDoc() {
@@ -482,6 +510,15 @@ export class Parse5DomAdapter extends DomAdapter {
   supportsNativeShadowDOM(): boolean {
     return false;
   }
+  getGlobalEventTarget(target:string) {
+    if (target == "window") {
+      return this.defaultDoc()._window;
+    } else if (target == "document") {
+      return this.defaultDoc();
+    } else if (target == "body") {
+      return this.defaultDoc().body;
+    }
+  }
 }
 
 //TODO: build a proper list, this one is all the keys of a HTMLInputElement

modules/angular2/src/forms/validator_directives.js

@@ -1,6 +1,7 @@
 import {Decorator} from 'angular2/angular2';
 
-import {ControlDirective, Validators} from 'angular2/forms';
+import {Validators} from './validators';
+import {ControlDirective} from './directives';
 
 @Decorator({
   selector: '[required]'

modules/angular2/test/core/compiler/integration_spec.js

@@ -545,53 +545,53 @@ export function main() {
         });
       }));
 
+      it('should support render events', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        tb.overrideView(MyComp, new View({
+          template: '<div listener></div>',
+          directives: [DecoratorListeningDomEvent]
+        }));
+
+        tb.createView(MyComp, {context: ctx}).then((view) => {
+
+          var injector = view.rawView.elementInjectors[0];
+
+          var listener = injector.get(DecoratorListeningDomEvent);
+
+          dispatchEvent(view.rootNodes[0], 'domEvent');
+
+          expect(listener.eventType).toEqual('domEvent');
+
+          async.done();
+        });
+      }));
+
+      it('should support render global events', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        tb.overrideView(MyComp, new View({
+          template: '<div listener></div>',
+          directives: [DecoratorListeningDomEvent]
+        }));
+
+        tb.createView(MyComp, {context: ctx}).then((view) => {
+          var injector = view.rawView.elementInjectors[0];
+
+          var listener = injector.get(DecoratorListeningDomEvent);
+          dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
+          expect(listener.eventType).toEqual('window_domEvent');
+
+          listener = injector.get(DecoratorListeningDomEvent);
+          dispatchEvent(DOM.getGlobalEventTarget("document"), 'domEvent');
+          expect(listener.eventType).toEqual('document_domEvent');
+
+          view.destroy();
+          listener = injector.get(DecoratorListeningDomEvent);
+          dispatchEvent(DOM.getGlobalEventTarget("body"), 'domEvent');
+          expect(listener.eventType).toEqual('');
+
+          async.done();
+        });
+      }));
+
       if (DOM.supportsDOMEvents()) {
-        it('should support render events', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          tb.overrideView(MyComp, new View({
-            template: '<div listener></div>',
-            directives: [DecoratorListeningDomEvent]
-          }));
-
-          tb.createView(MyComp, {context: ctx}).then((view) => {
-
-            var injector = view.rawView.elementInjectors[0];
-
-            var listener = injector.get(DecoratorListeningDomEvent);
-
-            dispatchEvent(view.rootNodes[0], 'domEvent');
-
-            expect(listener.eventType).toEqual('domEvent');
-
-            async.done();
-          });
-        }));
-
-        it('should support render global events', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          tb.overrideView(MyComp, new View({
-            template: '<div listener></div>',
-            directives: [DecoratorListeningDomEvent]
-          }));
-
-          tb.createView(MyComp, {context: ctx}).then((view) => {
-            var injector = view.rawView.elementInjectors[0];
-
-            var listener = injector.get(DecoratorListeningDomEvent);
-            dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
-            expect(listener.eventType).toEqual('window_domEvent');
-
-            listener = injector.get(DecoratorListeningDomEvent);
-            dispatchEvent(DOM.getGlobalEventTarget("document"), 'domEvent');
-            expect(listener.eventType).toEqual('document_domEvent');
-
-            view.destroy();
-            listener = injector.get(DecoratorListeningDomEvent);
-            dispatchEvent(DOM.getGlobalEventTarget("body"), 'domEvent');
-            expect(listener.eventType).toEqual('');
-
-            async.done();
-          });
-        }));
-
         it('should support preventing default on render events', inject([TestBed, AsyncTestCompleter], (tb, async) => {
           tb.overrideView(MyComp, new View({
             template: '<input type="checkbox" listenerprevent></input><input type="checkbox" listenernoprevent></input>',
@@ -608,42 +608,42 @@ export function main() {
             async.done();
           });
         }));
-
-        it('should support render global events from multiple directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          tb.overrideView(MyComp, new View({
-            template: '<div *if="ctxBoolProp" listener listenerother></div>',
-            directives: [If, DecoratorListeningDomEvent, DecoratorListeningDomEventOther]
-          }));
-
-          tb.createView(MyComp, {context: ctx}).then((view) => {
-            globalCounter = 0;
-            ctx.ctxBoolProp = true;
-            view.detectChanges();
-
-            var subview = view.rawView.viewContainers[0].get(0);
-            var injector = subview.elementInjectors[0];
-            var listener = injector.get(DecoratorListeningDomEvent);
-            var listenerother = injector.get(DecoratorListeningDomEventOther);
-            dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
-            expect(listener.eventType).toEqual('window_domEvent');
-            expect(listenerother.eventType).toEqual('other_domEvent');
-            expect(globalCounter).toEqual(1);
-
-            ctx.ctxBoolProp = false;
-            view.detectChanges();
-            dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
-            expect(globalCounter).toEqual(1);
-
-            ctx.ctxBoolProp = true;
-            view.detectChanges();
-            dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
-            expect(globalCounter).toEqual(2);
-
-            async.done();
-          });
-        }));
       }
 
+      it('should support render global events from multiple directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        tb.overrideView(MyComp, new View({
+          template: '<div *if="ctxBoolProp" listener listenerother></div>',
+          directives: [If, DecoratorListeningDomEvent, DecoratorListeningDomEventOther]
+        }));
+
+        tb.createView(MyComp, {context: ctx}).then((view) => {
+          globalCounter = 0;
+          ctx.ctxBoolProp = true;
+          view.detectChanges();
+
+          var subview = view.rawView.viewContainers[0].get(0);
+          var injector = subview.elementInjectors[0];
+          var listener = injector.get(DecoratorListeningDomEvent);
+          var listenerother = injector.get(DecoratorListeningDomEventOther);
+          dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
+          expect(listener.eventType).toEqual('window_domEvent');
+          expect(listenerother.eventType).toEqual('other_domEvent');
+          expect(globalCounter).toEqual(1);
+
+          ctx.ctxBoolProp = false;
+          view.detectChanges();
+          dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
+          expect(globalCounter).toEqual(1);
+
+          ctx.ctxBoolProp = true;
+          view.detectChanges();
+          dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
+          expect(globalCounter).toEqual(2);
+
+          async.done();
+        });
+      }));
+
       describe('dynamic ViewContainers', () => {
 
         it('should allow to create a ViewContainer at any bound location',

modules/angular2/test/forms/integration_spec.js

@@ -20,27 +20,320 @@ import {Component, Decorator, View, PropertySetter} from 'angular2/angular2';
 
 import {TestBed} from 'angular2/src/test_lib/test_bed';
 
-import {ControlGroupDirective, ControlDirective, Control, ControlGroup, OptionalControl,
+import {ControlGroupDirective, ControlDirective, Control, ControlGroup, RequiredValidatorDirective, CheckboxControlValueAccessor,
-  ControlValueAccessor, RequiredValidatorDirective, CheckboxControlValueAccessor,
   DefaultValueAccessor, Validators} from 'angular2/forms';
 
 export function main() {
   describe("integration tests", () => {
-    if (DOM.supportsDOMEvents()) {
+    
-      it("should initialize DOM elements with the given form object",
+    it("should initialize DOM elements with the given form object",
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({
+      var ctx = new MyComp(new ControlGroup({
-          "login": new Control("loginValue")
+        "login": new Control("loginValue")
-        }));
+      }));
+
+      var t = `<div [control-group]="form">
+              <input type="text" control="login">
+            </div>`;
+
+      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+        view.detectChanges();
+        var input = view.querySelector("input");
+        expect(input.value).toEqual("loginValue");
+        async.done();
+      });
+    }));
+
+    it("should update the control group values on DOM change",
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var form = new ControlGroup({
+        "login": new Control("oldValue")
+      });
+      var ctx = new MyComp(form);
+
+      var t = `<div [control-group]="form">
+                <input type="text" control="login">
+              </div>`;
+
+      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+        view.detectChanges();
+        var input = view.querySelector("input");
+
+        input.value = "updatedValue";
+        dispatchEvent(input, "change");
+
+        expect(form.value).toEqual({"login": "updatedValue"});
+        async.done();
+      });
+    }));
+
+    it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var control = new Control("loginValue");
+      var ctx = new MyComp(control);
+
+      var t = `<div><input type="text" [control]="form"></div>`;
+
+      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+        view.detectChanges();
+        var input = view.querySelector("input")
+        expect(input.value).toEqual("loginValue");
+
+        input.value = "updatedValue";
+        dispatchEvent(input, "change");
+
+        expect(control.value).toEqual("updatedValue");
+        async.done();
+      });
+    }));
+
+    it("should update DOM elements when rebinding the control group",
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var form = new ControlGroup({
+        "login": new Control("oldValue")
+      });
+      var ctx = new MyComp(form);
+
+      var t = `<div [control-group]="form">
+              <input type="text" control="login">
+            </div>`;
+
+      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+        view.detectChanges();
+        ctx.form = new ControlGroup({
+          "login": new Control("newValue")
+        });
+        view.detectChanges();
+
+        var input = view.querySelector("input")
+        expect(input.value).toEqual("newValue");
+        async.done();
+      });
+    }));
+
+    it("should update DOM element when rebinding the control name",
+      inject([TestBed, AsyncTestCompleter], (tb, async) => {
+      var ctx = new MyComp(new ControlGroup({
+        "one": new Control("one"),
+        "two": new Control("two")
+      }), "one");
+
+      var t = `<div [control-group]="form">
+              <input type="text" [control]="name">
+            </div>`;
+
+      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+        view.detectChanges();
+        var input = view.querySelector("input")
+        expect(input.value).toEqual("one");
+
+        ctx.name = "two";
+        view.detectChanges();
+
+        expect(input.value).toEqual("two");
+        async.done();
+      });
+    }));
+
+    describe("different control types", () => {
+      it("should support <input type=text>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
 
         var t = `<div [control-group]="form">
-                <input type="text" control="login">
+                  <input type="text" control="text">
+                </div>`;
+
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var input = view.querySelector("input")
+          expect(input.value).toEqual("old");
+
+          input.value = "new";
+          dispatchEvent(input, "input");
+
+          expect(ctx.form.value).toEqual({"text": "new"});
+          async.done();
+        });
+      }));
+
+      it("should support <input> without type", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
+
+        var t = `<div [control-group]="form">
+                  <input control="text">
+                </div>`;
+
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var input = view.querySelector("input")
+          expect(input.value).toEqual("old");
+
+          input.value = "new";
+          dispatchEvent(input, "input");
+
+          expect(ctx.form.value).toEqual({"text": "new"});
+          async.done();
+        });
+      }));
+
+      it("should support <textarea>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var ctx = new MyComp(new ControlGroup({"text": new Control('old')}));
+
+        var t = `<div [control-group]="form">
+                  <textarea control="text"></textarea>
+                </div>`;
+
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var textarea = view.querySelector("textarea")
+          expect(textarea.value).toEqual("old");
+
+          textarea.value = "new";
+          dispatchEvent(textarea, "input");
+
+          expect(ctx.form.value).toEqual({"text": 'new'});
+          async.done();
+        });
+      }));
+
+      it("should support <type=checkbox>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)}));
+
+        var t = `<div [control-group]="form">
+                  <input type="checkbox" control="checkbox">
+                </div>`;
+
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var input = view.querySelector("input")
+          expect(input.checked).toBe(true);
+
+          input.checked = false;
+          dispatchEvent(input, "change");
+
+          expect(ctx.form.value).toEqual({"checkbox": false});
+          async.done();
+        });
+      }));
+
+      it("should support <select>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var ctx = new MyComp(new ControlGroup({"city": new Control("SF")}));
+
+        var t = `<div [control-group]="form">
+                    <select control="city">
+                      <option value="SF"></option>
+                      <option value="NYC"></option>
+                    </select>
+                  </div>`;
+
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var select = view.querySelector("select")
+          var sfOption = view.querySelector("option")
+          expect(select.value).toEqual('SF');
+          if (DOM.supportsDOMEvents()) {
+            expect(sfOption.selected).toBe(true);
+          }
+
+          select.value = 'NYC';
+          dispatchEvent(select, "change");
+
+          expect(ctx.form.value).toEqual({"city": 'NYC'});
+          if (DOM.supportsDOMEvents()) {
+            expect(sfOption.selected).toBe(false);
+          }
+          async.done();
+        });
+      }));
+
+      it("should support custom value accessors", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var ctx = new MyComp(new ControlGroup({"name": new Control("aa")}));
+
+        var t = `<div [control-group]="form">
+                  <input type="text" control="name" wrapped-value>
+                </div>`;
+
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          var input = view.querySelector("input")
+          expect(input.value).toEqual("!aa!");
+
+          input.value = "!bb!";
+          dispatchEvent(input, "change");
+
+          expect(ctx.form.value).toEqual({"name": "bb"});
+          async.done();
+        });
+      }));
+    });
+
+    describe("validations", () => {
+      it("should use validators defined in html",
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var form = new ControlGroup({"login": new Control("aa")});
+        var ctx = new MyComp(form);
+
+        var t = `<div [control-group]="form">
+                  <input type="text" control="login" required>
+                 </div>`;
+
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          expect(form.valid).toEqual(true);
+
+          var input = view.querySelector("input");
+
+          input.value = "";
+          dispatchEvent(input, "change");
+
+          expect(form.valid).toEqual(false);
+          async.done();
+        });
+      }));
+
+      it("should use validators defined in the model",
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var form = new ControlGroup({"login": new Control("aa", Validators.required)});
+        var ctx = new MyComp(form);
+
+        var t = `<div [control-group]="form">
+                  <input type="text" control="login">
+                 </div>`;
+
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+          view.detectChanges();
+          expect(form.valid).toEqual(true);
+
+          var input = view.querySelector("input");
+
+          input.value = "";
+          dispatchEvent(input, "change");
+
+          expect(form.valid).toEqual(false);
+          async.done();
+        });
+      }));
+    });
+
+    describe("nested forms", () => {
+      it("should init DOM with the given form object",
+        inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        var form = new ControlGroup({
+          "nested": new ControlGroup({
+            "login": new Control("value")
+          })
+        });
+        var ctx = new MyComp(form);
+
+        var t = `<div [control-group]="form">
+                  <div control-group="nested">
+                    <input type="text" control="login">
+                  </div>
               </div>`;
 
         tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
           view.detectChanges();
-          var input = view.querySelector("input");
+          var input = view.querySelector("input")
-          expect(input.value).toEqual("loginValue");
+          expect(input.value).toEqual("value");
           async.done();
         });
       }));
@@ -48,321 +341,30 @@ export function main() {
       it("should update the control group values on DOM change",
         inject([TestBed, AsyncTestCompleter], (tb, async) => {
         var form = new ControlGroup({
-          "login": new Control("oldValue")
+          "nested": new ControlGroup({
+            "login": new Control("value")
+          })
         });
         var ctx = new MyComp(form);
 
         var t = `<div [control-group]="form">
-                  <input type="text" control="login">
-                </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("input");
-
-          input.value = "updatedValue";
-          dispatchEvent(input, "change");
-
-          expect(form.value).toEqual({"login": "updatedValue"});
-          async.done();
-        });
-      }));
-
-      it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var control = new Control("loginValue");
-        var ctx = new MyComp(control);
-
-        var t = `<div><input type="text" [control]="form"></div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("input")
-          expect(input.value).toEqual("loginValue");
-
-          input.value = "updatedValue";
-          dispatchEvent(input, "change");
-
-          expect(control.value).toEqual("updatedValue");
-          async.done();
-        });
-      }));
-
-      it("should update DOM elements when rebinding the control group",
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var form = new ControlGroup({
-          "login": new Control("oldValue")
-        });
-        var ctx = new MyComp(form);
-
-        var t = `<div [control-group]="form">
-                <input type="text" control="login">
-              </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          ctx.form = new ControlGroup({
-            "login": new Control("newValue")
-          });
-          view.detectChanges();
-
-          var input = view.querySelector("input")
-          expect(input.value).toEqual("newValue");
-          async.done();
-        });
-      }));
-
-      it("should update DOM element when rebinding the control name",
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({
-          "one": new Control("one"),
-          "two": new Control("two")
-        }), "one");
-
-        var t = `<div [control-group]="form">
-                <input type="text" [control]="name">
-              </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("input")
-          expect(input.value).toEqual("one");
-
-          ctx.name = "two";
-          view.detectChanges();
-
-          expect(input.value).toEqual("two");
-          async.done();
-        });
-      }));
-
-      describe("different control types", () => {
-        it("should support <input type=text>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
-
-          var t = `<div [control-group]="form">
-                    <input type="text" control="text">
-                  </div>`;
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            var input = view.querySelector("input")
-            expect(input.value).toEqual("old");
-
-            input.value = "new";
-            dispatchEvent(input, "input");
-
-            expect(ctx.form.value).toEqual({"text": "new"});
-            async.done();
-          });
-        }));
-
-        it("should support <input> without type", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
-
-          var t = `<div [control-group]="form">
-                    <input control="text">
-                  </div>`;
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            var input = view.querySelector("input")
-            expect(input.value).toEqual("old");
-
-            input.value = "new";
-            dispatchEvent(input, "input");
-
-            expect(ctx.form.value).toEqual({"text": "new"});
-            async.done();
-          });
-        }));
-
-        it("should support <textarea>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var ctx = new MyComp(new ControlGroup({"text": new Control('old')}));
-
-          var t = `<div [control-group]="form">
-                    <textarea control="text"></textarea>
-                  </div>`;
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            var textarea = view.querySelector("textarea")
-            expect(textarea.value).toEqual("old");
-
-            textarea.value = "new";
-            dispatchEvent(textarea, "input");
-
-            expect(ctx.form.value).toEqual({"text": 'new'});
-            async.done();
-          });
-        }));
-
-        it("should support <type=checkbox>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)}));
-
-          var t = `<div [control-group]="form">
-                    <input type="checkbox" control="checkbox">
-                  </div>`;
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            var input = view.querySelector("input")
-            expect(input.checked).toBe(true);
-
-            input.checked = false;
-            dispatchEvent(input, "change");
-
-            expect(ctx.form.value).toEqual({"checkbox": false});
-            async.done();
-          });
-        }));
-
-        it("should support <select>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var ctx = new MyComp(new ControlGroup({"city": new Control("SF")}));
-
-          var t = `<div [control-group]="form">
-                      <select control="city">
-                        <option value="SF"></option>
-                        <option value="NYC"></option>
-                      </select>
-                    </div>`;
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            var select = view.querySelector("select")
-            var sfOption = view.querySelector("option")
-            expect(select.value).toEqual('SF');
-            expect(sfOption.selected).toBe(true);
-
-            select.value = 'NYC';
-            dispatchEvent(select, "change");
-
-            expect(ctx.form.value).toEqual({"city": 'NYC'});
-            expect(sfOption.selected).toBe(false);
-            async.done();
-          });
-        }));
-
-        it("should support custom value accessors", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var ctx = new MyComp(new ControlGroup({"name": new Control("aa")}));
-
-          var t = `<div [control-group]="form">
-                    <input type="text" control="name" wrapped-value>
-                  </div>`;
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            var input = view.querySelector("input")
-            expect(input.value).toEqual("!aa!");
-
-            input.value = "!bb!";
-            dispatchEvent(input, "change");
-
-            expect(ctx.form.value).toEqual({"name": "bb"});
-            async.done();
-          });
-        }));
-      });
-
-      describe("validations", () => {
-        it("should use validators defined in html",
-          inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var form = new ControlGroup({"login": new Control("aa")});
-          var ctx = new MyComp(form);
-
-          var t = `<div [control-group]="form">
-                    <input type="text" control="login" required>
-                   </div>`;
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            expect(form.valid).toEqual(true);
-
-            var input = view.querySelector("input");
-
-            input.value = "";
-            dispatchEvent(input, "change");
-
-            expect(form.valid).toEqual(false);
-            async.done();
-          });
-        }));
-
-        it("should use validators defined in the model",
-          inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var form = new ControlGroup({"login": new Control("aa", Validators.required)});
-          var ctx = new MyComp(form);
-
-          var t = `<div [control-group]="form">
-                    <input type="text" control="login">
-                   </div>`;
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            expect(form.valid).toEqual(true);
-
-            var input = view.querySelector("input");
-
-            input.value = "";
-            dispatchEvent(input, "change");
-
-            expect(form.valid).toEqual(false);
-            async.done();
-          });
-        }));
-      });
-
-      describe("nested forms", () => {
-        it("should init DOM with the given form object",
-          inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var form = new ControlGroup({
-            "nested": new ControlGroup({
-              "login": new Control("value")
-            })
-          });
-          var ctx = new MyComp(form);
-
-          var t = `<div [control-group]="form">
                     <div control-group="nested">
                       <input type="text" control="login">
                     </div>
                 </div>`;
 
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
+        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
+          view.detectChanges();
-            var input = view.querySelector("input")
+          var input = view.querySelector("input")
-            expect(input.value).toEqual("value");
-            async.done();
-          });
-        }));
 
-        it("should update the control group values on DOM change",
+          input.value = "updatedValue";
-          inject([TestBed, AsyncTestCompleter], (tb, async) => {
+          dispatchEvent(input, "change");
-          var form = new ControlGroup({
-            "nested": new ControlGroup({
-              "login": new Control("value")
-            })
-          });
-          var ctx = new MyComp(form);
 
-          var t = `<div [control-group]="form">
+          expect(form.value).toEqual({"nested": {"login": "updatedValue"}});
-                      <div control-group="nested">
+          async.done();
-                        <input type="text" control="login">
+        });
-                      </div>
+      }));
-                  </div>`;
+    });
-
-          tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-            view.detectChanges();
-            var input = view.querySelector("input")
-
-            input.value = "updatedValue";
-            dispatchEvent(input, "change");
-
-            expect(form.value).toEqual({"nested": {"login": "updatedValue"}});
-            async.done();
-          });
-        }));
-      });
-    }
   });
 }
 

modules/angular2/test/render/dom/events/event_manager_spec.js

@@ -2,7 +2,6 @@ import {describe, ddescribe, it, iit, xit, xdescribe, expect, beforeEach, el} fr
 import {EventManager, EventManagerPlugin, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
 import {VmTurnZone} from 'angular2/src/core/zone/vm_turn_zone';
 import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-import {document} from 'angular2/src/facade/browser';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
 export function main() {
@@ -71,7 +70,7 @@ export function main() {
     it('bubbled events are caught when fired from a child', () => {
       var element = el('<div><div></div></div>');
       // Workaround for https://bugs.webkit.org/show_bug.cgi?id=122755
-      DOM.appendChild(document.body, element);
+      DOM.appendChild(DOM.defaultDoc().body, element);
 
       var child = DOM.firstChild(element);
       var dispatchedEvent = DOM.createMouseEvent('click');
@@ -86,7 +85,7 @@ export function main() {
 
     it('should add and remove global event listeners with correct bubbling', () => {
       var element = el('<div><div></div></div>');
-      DOM.appendChild(document.body, element);
+      DOM.appendChild(DOM.defaultDoc().body, element);
       var dispatchedEvent = DOM.createMouseEvent('click');
       var receivedEvent = null;
       var handler = (e) => { receivedEvent = e; };