87959e9 feat(testing): Use NgZone in TestComponentBuilder.

vikerman · vikerman · commit 3e4c6c39c1cc · 2016-04-28T22:48:35.000Z
diff --git a/BUILD_INFO b/BUILD_INFO
@@ -1,2 +1,2 @@
-Thu Apr 28 21:20:04 UTC 2016
-ac55e1e27bdebbafda7bee60d4651d57636ce80a
+Thu Apr 28 22:48:35 UTC 2016
+87959e969b3ddb324f3cd95bf7ee1e3d5131536a
diff --git a/lib/platform/testing/browser_static.dart b/lib/platform/testing/browser_static.dart
@@ -27,16 +27,24 @@ import "package:angular2/src/mock/ng_zone_mock.dart" show MockNgZone;
 import "package:angular2/src/platform/browser/xhr_impl.dart" show XHRImpl;
 import "package:angular2/compiler.dart" show XHR;
 import "package:angular2/src/testing/test_component_builder.dart"
-    show TestComponentBuilder;
+    show
+        TestComponentBuilder,
+        ComponentFixtureAutoDetect,
+        ComponentFixtureNoNgZone;
 import "package:angular2/src/testing/utils.dart" show BrowserDetection;
 import "package:angular2/platform/common_dom.dart" show ELEMENT_PROBE_PROVIDERS;
+import "package:angular2/src/facade/lang.dart" show IS_DART;
 import "package:angular2/src/testing/utils.dart" show Log;
 
 initBrowserTests() {
   BrowserDomAdapter.makeCurrent();
   BrowserDetection.setup();
 }
 
+NgZone createNgZone() {
+  return IS_DART ? new MockNgZone() : new NgZone(enableLongStackTrace: true);
+}
+
 /**
  * Default platform providers for testing without a compiler.
  */
@@ -51,7 +59,7 @@ const List<dynamic> ADDITIONAL_TEST_BROWSER_PROVIDERS = const [
   const Provider(ViewResolver, useClass: MockViewResolver),
   Log,
   TestComponentBuilder,
-  const Provider(NgZone, useClass: MockNgZone),
+  const Provider(NgZone, useFactory: createNgZone),
   const Provider(LocationStrategy, useClass: MockLocationStrategy),
   const Provider(AnimationBuilder, useClass: MockAnimationBuilder)
 ];
diff --git a/lib/src/testing/test_component_builder.dart b/lib/src/testing/test_component_builder.dart
@@ -3,6 +3,7 @@ library angular2.src.testing.test_component_builder;
 import "dart:async";
 import "package:angular2/core.dart"
     show
+        OpaqueToken,
         ComponentRef,
         DynamicComponentLoader,
         Injector,
@@ -11,10 +12,15 @@ import "package:angular2/core.dart"
         ElementRef,
         EmbeddedViewRef,
         ChangeDetectorRef,
-        provide;
+        provide,
+        NgZone,
+        NgZoneError;
 import "package:angular2/compiler.dart" show DirectiveResolver, ViewResolver;
-import "package:angular2/src/facade/lang.dart" show Type, isPresent, isBlank;
-import "package:angular2/src/facade/async.dart" show PromiseWrapper;
+import "package:angular2/src/facade/exceptions.dart" show BaseException;
+import "package:angular2/src/facade/lang.dart"
+    show Type, isPresent, isBlank, IS_DART;
+import "package:angular2/src/facade/async.dart"
+    show PromiseWrapper, ObservableWrapper, PromiseCompleter;
 import "package:angular2/src/facade/collection.dart"
     show ListWrapper, MapWrapper;
 import "utils.dart" show el;
@@ -24,6 +30,9 @@ import "package:angular2/src/core/debug/debug_node.dart"
     show DebugNode, DebugElement, getDebugNode;
 import "fake_async.dart" show tick;
 
+var ComponentFixtureAutoDetect = new OpaqueToken("ComponentFixtureAutoDetect");
+var ComponentFixtureNoNgZone = new OpaqueToken("ComponentFixtureNoNgZone");
+
 /**
  * Fixture for debugging and testing a component.
  */
@@ -52,34 +61,144 @@ class ComponentFixture {
    * The ChangeDetectorRef for the component
    */
   ChangeDetectorRef changeDetectorRef;
-  ComponentFixture(ComponentRef componentRef) {
+  /**
+   * The NgZone in which this component was instantiated.
+   */
+  NgZone ngZone;
+  bool _autoDetect;
+  bool _isStable = true;
+  PromiseCompleter<dynamic> _completer = null;
+  var _onUnstableSubscription = null;
+  var _onStableSubscription = null;
+  var _onMicrotaskEmptySubscription = null;
+  var _onErrorSubscription = null;
+  ComponentFixture(ComponentRef componentRef, NgZone ngZone, bool autoDetect) {
     this.changeDetectorRef = componentRef.changeDetectorRef;
     this.elementRef = componentRef.location;
     this.debugElement =
         (getDebugNode(this.elementRef.nativeElement) as DebugElement);
     this.componentInstance = componentRef.instance;
     this.nativeElement = this.elementRef.nativeElement;
     this.componentRef = componentRef;
+    this.ngZone = ngZone;
+    this._autoDetect = autoDetect;
+    if (ngZone != null) {
+      this._onUnstableSubscription =
+          ObservableWrapper.subscribe(ngZone.onUnstable, (_) {
+        this._isStable = false;
+      });
+      this._onMicrotaskEmptySubscription =
+          ObservableWrapper.subscribe(ngZone.onMicrotaskEmpty, (_) {
+        if (this._autoDetect) {
+          // Do a change detection run with checkNoChanges set to true to check
+
+          // there are no changes on the second run.
+          this.detectChanges(true);
+        }
+      });
+      this._onStableSubscription =
+          ObservableWrapper.subscribe(ngZone.onStable, (_) {
+        this._isStable = true;
+        if (this._completer != null) {
+          this._completer.resolve(true);
+          this._completer = null;
+        }
+      });
+      this._onErrorSubscription =
+          ObservableWrapper.subscribe(ngZone.onError, (NgZoneError error) {
+        throw error.error;
+      });
+    }
   }
+  _tick(bool checkNoChanges) {
+    this.changeDetectorRef.detectChanges();
+    if (checkNoChanges) {
+      this.checkNoChanges();
+    }
+  }
+
   /**
    * Trigger a change detection cycle for the component.
    */
   void detectChanges([bool checkNoChanges = true]) {
-    this.changeDetectorRef.detectChanges();
-    if (checkNoChanges) {
-      this.checkNoChanges();
+    if (this.ngZone != null) {
+      // Run the change detection inside the NgZone so that any async tasks as part of the change
+
+      // detection are captured by the zone and can be waited for in isStable.
+      this.ngZone.run(() {
+        this._tick(checkNoChanges);
+      });
+    } else {
+      // Running without zone. Just do the change detection.
+      this._tick(checkNoChanges);
     }
   }
 
+  /**
+   * Do a change detection run to make sure there were no changes.
+   */
   void checkNoChanges() {
     this.changeDetectorRef.checkNoChanges();
   }
 
+  /**
+   * Set whether the fixture should autodetect changes.
+   *
+   * Also runs detectChanges once so that any existing change is detected.
+   */
+  autoDetectChanges([bool autoDetect = true]) {
+    if (this.ngZone == null) {
+      throw new BaseException(
+          "Cannot call autoDetectChanges when ComponentFixtureNoNgZone is set");
+    }
+    this._autoDetect = autoDetect;
+    this.detectChanges();
+  }
+
+  /**
+   * Return whether the fixture is currently stable or has async tasks that have not been completed
+   * yet.
+   */
+  bool isStable() {
+    return this._isStable;
+  }
+
+  /**
+   * Get a promise that resolves when the fixture is stable.
+   *
+   * This can be used to resume testing after events have triggered asynchronous activity or
+   * asynchronous change detection.
+   */
+  Future<dynamic> whenStable() {
+    if (this._isStable) {
+      return PromiseWrapper.resolve(false);
+    } else {
+      this._completer = new PromiseCompleter<dynamic>();
+      return this._completer.promise;
+    }
+  }
+
   /**
    * Trigger component destruction.
    */
   void destroy() {
     this.componentRef.destroy();
+    if (this._onUnstableSubscription != null) {
+      ObservableWrapper.dispose(this._onUnstableSubscription);
+      this._onUnstableSubscription = null;
+    }
+    if (this._onStableSubscription != null) {
+      ObservableWrapper.dispose(this._onStableSubscription);
+      this._onStableSubscription = null;
+    }
+    if (this._onMicrotaskEmptySubscription != null) {
+      ObservableWrapper.dispose(this._onMicrotaskEmptySubscription);
+      this._onMicrotaskEmptySubscription = null;
+    }
+    if (this._onErrorSubscription != null) {
+      ObservableWrapper.dispose(this._onErrorSubscription);
+      this._onErrorSubscription = null;
+    }
   }
 }
 
@@ -228,38 +347,45 @@ class TestComponentBuilder {
    * 
    */
   Future<ComponentFixture> createAsync(Type rootComponentType) {
-    var mockDirectiveResolver = this._injector.get(DirectiveResolver);
-    var mockViewResolver = this._injector.get(ViewResolver);
-    this
-        ._viewOverrides
-        .forEach((type, view) => mockViewResolver.setView(type, view));
-    this._templateOverrides.forEach(
-        (type, template) => mockViewResolver.setInlineTemplate(type, template));
-    this._directiveOverrides.forEach((component, overrides) {
-      overrides.forEach((from, to) {
-        mockViewResolver.overrideViewDirective(component, from, to);
+    var noNgZone =
+        IS_DART || this._injector.get(ComponentFixtureNoNgZone, false);
+    NgZone ngZone = noNgZone ? null : this._injector.get(NgZone, null);
+    bool autoDetect = this._injector.get(ComponentFixtureAutoDetect, false);
+    var initComponent = () {
+      var mockDirectiveResolver = this._injector.get(DirectiveResolver);
+      var mockViewResolver = this._injector.get(ViewResolver);
+      this
+          ._viewOverrides
+          .forEach((type, view) => mockViewResolver.setView(type, view));
+      this._templateOverrides.forEach((type, template) =>
+          mockViewResolver.setInlineTemplate(type, template));
+      this._directiveOverrides.forEach((component, overrides) {
+        overrides.forEach((from, to) {
+          mockViewResolver.overrideViewDirective(component, from, to);
+        });
       });
-    });
-    this._bindingsOverrides.forEach((type, bindings) =>
-        mockDirectiveResolver.setBindingsOverride(type, bindings));
-    this._viewBindingsOverrides.forEach((type, bindings) =>
-        mockDirectiveResolver.setViewBindingsOverride(type, bindings));
-    var rootElId = '''root${ _nextRootElementId ++}''';
-    var rootEl = el('''<div id="${ rootElId}"></div>''');
-    var doc = this._injector.get(DOCUMENT);
-    // TODO(juliemr): can/should this be optional?
-    var oldRoots = DOM.querySelectorAll(doc, "[id^=root]");
-    for (var i = 0; i < oldRoots.length; i++) {
-      DOM.remove(oldRoots[i]);
-    }
-    DOM.appendChild(doc.body, rootEl);
-    Future<ComponentRef> promise = this
-        ._injector
-        .get(DynamicComponentLoader)
-        .loadAsRoot(rootComponentType, '''#${ rootElId}''', this._injector);
-    return promise.then((componentRef) {
-      return new ComponentFixture(componentRef);
-    });
+      this._bindingsOverrides.forEach((type, bindings) =>
+          mockDirectiveResolver.setBindingsOverride(type, bindings));
+      this._viewBindingsOverrides.forEach((type, bindings) =>
+          mockDirectiveResolver.setViewBindingsOverride(type, bindings));
+      var rootElId = '''root${ _nextRootElementId ++}''';
+      var rootEl = el('''<div id="${ rootElId}"></div>''');
+      var doc = this._injector.get(DOCUMENT);
+      // TODO(juliemr): can/should this be optional?
+      var oldRoots = DOM.querySelectorAll(doc, "[id^=root]");
+      for (var i = 0; i < oldRoots.length; i++) {
+        DOM.remove(oldRoots[i]);
+      }
+      DOM.appendChild(doc.body, rootEl);
+      Future<ComponentRef> promise = this
+          ._injector
+          .get(DynamicComponentLoader)
+          .loadAsRoot(rootComponentType, '''#${ rootElId}''', this._injector);
+      return promise.then((componentRef) {
+        return new ComponentFixture(componentRef, ngZone, autoDetect);
+      });
+    };
+    return ngZone == null ? initComponent() : ngZone.run(initComponent);
   }
 
   ComponentFixture createFakeAsync(Type rootComponentType) {
diff --git a/lib/src/testing/test_injector.dart b/lib/src/testing/test_injector.dart
@@ -166,15 +166,15 @@ class InjectSetupWrapper {
   Function inject(List<dynamic> tokens, Function fn) {
     return () {
       this._addProviders();
-      return inject(tokens, fn)();
+      return inject_impl(tokens, fn)();
     };
   }
 
   /** @Deprecated {use async(withProviders().inject())} */
   Function injectAsync(List<dynamic> tokens, Function fn) {
     return () {
       this._addProviders();
-      return injectAsync(tokens, fn)();
+      return injectAsync_impl(tokens, fn)();
     };
   }
 }
@@ -206,3 +206,8 @@ withProviders(dynamic /* () => any */ providers) {
 Function injectAsync(List<dynamic> tokens, Function fn) {
   return async(inject(tokens, fn));
 }
+// This is to ensure inject(Async) within InjectSetupWrapper doesn't call itself
+
+// when transpiled to Dart.
+var inject_impl = inject;
+var injectAsync_impl = injectAsync;
diff --git a/lib/testing.dart b/lib/testing.dart
@@ -10,7 +10,11 @@ library angular2.testing;
 
 export "src/testing/testing.dart";
 export "src/testing/test_component_builder.dart"
-    show ComponentFixture, TestComponentBuilder;
+    show
+        ComponentFixture,
+        TestComponentBuilder,
+        ComponentFixtureAutoDetect,
+        ComponentFixtureNoNgZone;
 export "src/testing/test_injector.dart";
 export "src/testing/fake_async.dart";
 export "package:angular2/src/mock/view_resolver_mock.dart"
diff --git a/test/core/linker/dynamic_component_loader_spec.dart b/test/core/linker/dynamic_component_loader_spec.dart
@@ -166,7 +166,7 @@ main() {
             var rootEl = createRootElement(doc, "child-cmp");
             DOM.appendChild(doc.body, rootEl);
             loader.loadAsRoot(ChildComp, null, injector).then((componentRef) {
-              var el = new ComponentFixture(componentRef);
+              var el = new ComponentFixture(componentRef, null, false);
               expect(rootEl.parentNode).toBe(doc.body);
               el.detectChanges();
               expect(rootEl).toHaveText("hello");
diff --git a/test/testing/test_component_builder_spec.dart b/test/testing/test_component_builder_spec.dart
diff --git a/test/web_workers/shared/message_bus_spec.dart b/test/web_workers/shared/message_bus_spec.dart
