feat(tests): add TestComponentBuilder

Adds a TestComponentBuilder for use in component level tests.
For usage examples, see test_component_builder_spec

Closes #1812

modules/angular2/src/test_lib/test_bed.ts

@@ -23,6 +23,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
 
 /**
  * @exportedAs angular2/test
+ * TODO(juliemr): Deprecate in favor of TestComponentBuilder
  */
 @Injectable()
 export class TestBed {
@@ -61,7 +62,7 @@ export class TestBed {
    * @param {Type} to
    */
   overrideDirective(component: Type, from: Type, to: Type): void {
-    this._injector.get(TemplateResolver).overrideTemplateDirective(component, from, to);
+    this._injector.get(TemplateResolver).overrideViewDirective(component, from, to);
   }
 
   /**
@@ -107,6 +108,7 @@ export class TestBed {
 /**
  * Proxy to `AppView` return by `createView` in {@link TestBed} which offers a high level API for
  * tests.
+ * TODO(juliemr): Deprecate in favor of TestElement
  */
 export class ViewProxy {
   _componentRef: ComponentRef;

modules/angular2/src/test_lib/test_component_builder.ts

@@ -0,0 +1,343 @@
+import {Injector, bind, Injectable} from 'angular2/di';
+
+import {Type, isPresent, BaseException, isBlank} from 'angular2/src/facade/lang';
+import {Promise} from 'angular2/src/facade/async';
+import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {ElementInjector} from 'angular2/src/core/compiler/element_injector';
+import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
+import {AppView} from 'angular2/src/core/compiler/view';
+import {internalView} from 'angular2/src/core/compiler/view_ref';
+import {
+  DynamicComponentLoader,
+  ComponentRef
+} from 'angular2/src/core/compiler/dynamic_component_loader';
+import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+
+import {el} from './utils';
+
+import {DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
+import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
+
+/**
+ * @exportedAs angular2/test
+ *
+ * A TestElement contains information from the Angular compiler about an
+ * element and provides access to the corresponding ElementInjector and
+ * underlying dom Element, as well as a way to query for children.
+ */
+export class TestElement {
+  _elementInjector: ElementInjector;
+
+  constructor(private _parentView: AppView, private _boundElementIndex: number) {
+    this._elementInjector = this._parentView.elementInjectors[this._boundElementIndex];
+  }
+
+  static create(elementRef: ElementRef): TestElement {
+    return new TestElement(internalView(elementRef.parentView), elementRef.boundElementIndex);
+  }
+
+  get componentInstance(): any {
+    if (!isPresent(this._elementInjector)) {
+      return null;
+    }
+    return this._elementInjector.getComponent();
+  }
+
+  get dynamicallyCreatedComponentInstance(): any {
+    if (!isPresent(this._elementInjector)) {
+      return null;
+    }
+    return this._elementInjector.getDynamicallyLoadedComponent();
+  }
+
+  get domElement(): any {
+    return resolveInternalDomView(this._parentView.render).boundElements[this._boundElementIndex];
+  }
+
+  getDirectiveInstance(directiveIndex: number): any {
+    return this._elementInjector.getDirectiveAtIndex(directiveIndex);
+  }
+
+  /**
+   * Get child TestElements from within the Light DOM.
+   *
+   * @return {List<TestElement>}
+   */
+  get children(): List<TestElement> {
+    var thisElementBinder = this._parentView.proto.elementBinders[this._boundElementIndex];
+
+    return this._getChildElements(this._parentView, thisElementBinder.index);
+  }
+
+  /**
+   * Get the root TestElement children of a component. Returns an empty
+   * list if the current TestElement is not a component root.
+   *
+   * @return {List<TestElement>}
+   */
+  get componentViewChildren(): List<TestElement> {
+    var shadowView = this._parentView.componentChildViews[this._boundElementIndex];
+
+    if (!isPresent(shadowView)) {
+      // The current test element is not a component.
+      return ListWrapper.create();
+    }
+
+    return this._getChildElements(shadowView, null);
+  }
+
+  triggerEventHandler(eventName, eventObj): void {
+    this._parentView.triggerEventHandlers(eventName, eventObj, this._boundElementIndex);
+  }
+
+  hasDirective(type: Type): boolean {
+    if (!isPresent(this._elementInjector)) {
+      return false;
+    }
+    return this._elementInjector.hasDirective(type);
+  }
+
+  inject(type: Type): any {
+    if (!isPresent(this._elementInjector)) {
+      return null;
+    }
+    return this._elementInjector.get(type);
+  }
+
+  /**
+   * Return the first descendant TestElememt matching the given predicate
+   * and scope.
+   *
+   * @param {Function: boolean} predicate
+   * @param {Scope} scope
+   *
+   * @return {TestElement}
+   */
+  query(predicate: Function, scope = Scope.all): TestElement {
+    var results = this.queryAll(predicate, scope);
+    return results.length > 0 ? results[0] : null;
+  }
+
+  /**
+   * Return descendant TestElememts matching the given predicate
+   * and scope.
+   *
+   * @param {Function: boolean} predicate
+   * @param {Scope} scope
+   *
+   * @return {List<TestElement>}
+   */
+  queryAll(predicate: Function, scope = Scope.all): List<TestElement> {
+    var elementsInScope = scope(this);
+
+    return ListWrapper.filter(elementsInScope, predicate);
+  }
+
+  _getChildElements(view: AppView, parentBoundElementIndex: number): List<TestElement> {
+    var els = ListWrapper.create();
+    var parentElementBinder = null;
+    if (isPresent(parentBoundElementIndex)) {
+      parentElementBinder = view.proto.elementBinders[parentBoundElementIndex];
+    }
+    for (var i = 0; i < view.proto.elementBinders.length; ++i) {
+      var binder = view.proto.elementBinders[i];
+      if (binder.parent == parentElementBinder) {
+        ListWrapper.push(els, new TestElement(view, i));
+
+        var views = view.viewContainers[i];
+        if (isPresent(views)) {
+          ListWrapper.forEach(views.views, (nextView) => {
+            els = ListWrapper.concat(els, this._getChildElements(nextView, null));
+          });
+        }
+      }
+    }
+    return els;
+  }
+}
+
+export function inspectElement(elementRef: ElementRef): TestElement {
+  return TestElement.create(elementRef);
+}
+
+/**
+ * @exportedAs angular2/test
+ */
+export class RootTestComponent extends TestElement {
+  _componentRef: ComponentRef;
+  _componentParentView: AppView;
+
+  constructor(componentRef: ComponentRef) {
+    super(internalView(componentRef.hostView), 0);
+
+    this._componentParentView = internalView(componentRef.hostView);
+    this._componentRef = componentRef;
+  }
+
+  detectChanges(): void {
+    this._componentParentView.changeDetector.detectChanges();
+    this._componentParentView.changeDetector.checkNoChanges();
+  }
+
+  destroy(): void { this._componentRef.dispose(); }
+}
+
+/**
+ * @exportedAs angular2/test
+ */
+export class Scope {
+  static all(testElement): List<TestElement> {
+    var scope = ListWrapper.create();
+    ListWrapper.push(scope, testElement);
+
+    ListWrapper.forEach(testElement.children,
+                        (child) => { scope = ListWrapper.concat(scope, Scope.all(child)); });
+
+    ListWrapper.forEach(testElement.componentViewChildren,
+                        (child) => { scope = ListWrapper.concat(scope, Scope.all(child)); });
+
+    return scope;
+  }
+  static light(testElement): List<TestElement> {
+    var scope = ListWrapper.create();
+    ListWrapper.forEach(testElement.children, (child) => {
+      ListWrapper.push(scope, child);
+      scope = ListWrapper.concat(scope, Scope.light(child));
+    });
+    return scope;
+  }
+
+  static view(testElement): List<TestElement> {
+    var scope = ListWrapper.create();
+
+    ListWrapper.forEach(testElement.componentViewChildren, (child) => {
+      ListWrapper.push(scope, child);
+      scope = ListWrapper.concat(scope, Scope.light(child));
+    });
+    return scope;
+  }
+}
+
+/**
+ * @exportedAs angular2/test
+ */
+export class By {
+  static all(): Function { return (testElement) => true; }
+
+  static css(selector: string): Function {
+    return (testElement) => { return DOM.elementMatches(testElement.domElement, selector); };
+  }
+  static directive(type: Type): Function {
+    return (testElement) => { return testElement.hasDirective(type); };
+  }
+}
+
+/**
+ * @exportedAs angular2/test
+ *
+ * Builds a RootTestComponent for use in component level tests.
+ */
+@Injectable()
+export class TestComponentBuilder {
+  _injector: Injector;
+  _viewOverrides: Map<Type, View>;
+  _directiveOverrides: Map<Type, Map<Type, Type>>;
+  _templateOverrides: Map<Type, string>;
+
+  constructor(injector: Injector) {
+    this._injector = injector;
+    this._viewOverrides = MapWrapper.create();
+    this._directiveOverrides = MapWrapper.create();
+    this._templateOverrides = MapWrapper.create();
+  }
+
+  _clone(): TestComponentBuilder {
+    var clone = new TestComponentBuilder(this._injector);
+    clone._viewOverrides = MapWrapper.clone(this._viewOverrides);
+    clone._directiveOverrides = MapWrapper.clone(this._directiveOverrides);
+    clone._templateOverrides = MapWrapper.clone(this._templateOverrides);
+    return clone;
+  }
+
+  /**
+   * Overrides only the html of a {@link Component}.
+   * All the other propoerties of the component's {@link View} are preserved.
+   *
+   * @param {Type} component
+   * @param {string} html
+   *
+   * @return {TestComponentBuilder}
+   */
+  overrideTemplate(componentType: Type, template: string): TestComponentBuilder {
+    var clone = this._clone();
+    MapWrapper.set(clone._templateOverrides, componentType, template);
+    return clone;
+  }
+
+  /**
+   * Overrides a component's {@link View}.
+   *
+   * @param {Type} component
+   * @param {view} View
+   *
+   * @return {TestComponentBuilder}
+   */
+  overrideView(componentType: Type, view: View): TestComponentBuilder {
+    var clone = this._clone();
+    MapWrapper.set(clone._viewOverrides, componentType, view);
+    return clone;
+  }
+
+  /**
+   * Overrides the directives from the component {@link View}.
+   *
+   * @param {Type} component
+   * @param {Type} from
+   * @param {Type} to
+   *
+   * @return {TestComponentBuilder}
+   */
+  overrideDirective(componentType: Type, from: Type, to: Type): TestComponentBuilder {
+    var clone = this._clone();
+    var overridesForComponent = MapWrapper.get(clone._directiveOverrides, componentType);
+    if (!isPresent(overridesForComponent)) {
+      MapWrapper.set(clone._directiveOverrides, componentType, MapWrapper.create());
+      overridesForComponent = MapWrapper.get(clone._directiveOverrides, componentType);
+    }
+    MapWrapper.set(overridesForComponent, from, to);
+    return clone;
+  }
+
+  /**
+   * Builds and returns a RootTestComponent.
+   *
+   * @return {Promise<RootTestComponent>}
+   */
+  createAsync(rootComponentType: Type): Promise<RootTestComponent> {
+    var mockTemplateResolver = this._injector.get(TemplateResolver);
+    MapWrapper.forEach(this._viewOverrides,
+                       (view, type) => { mockTemplateResolver.setView(type, view); });
+    MapWrapper.forEach(this._templateOverrides, (template, type) => {
+      mockTemplateResolver.setInlineTemplate(type, template);
+    });
+    MapWrapper.forEach(this._directiveOverrides, (overrides, component) => {
+      MapWrapper.forEach(overrides, (to, from) => {
+        mockTemplateResolver.overrideViewDirective(component, from, to);
+      });
+    });
+
+    var rootEl = el('<div id="root"></div>');
+    var doc = this._injector.get(DOCUMENT_TOKEN);
+
+    // TODO(juliemr): can/should this be optional?
+    DOM.appendChild(doc.body, rootEl);
+    return this._injector.get(DynamicComponentLoader)
+        .loadAsRoot(rootComponentType, '#root', this._injector)
+        .then((componentRef) => { return new RootTestComponent(componentRef); });
+  }
+}

modules/angular2/src/test_lib/test_injector.ts

@@ -35,6 +35,7 @@ import {MockXHR} from 'angular2/src/mock/xhr_mock';
 import {MockNgZone} from 'angular2/src/mock/ng_zone_mock';
 
 import {TestBed} from './test_bed';
+import {TestComponentBuilder} from './test_component_builder';
 
 import {Injector} from 'angular2/di';
 
@@ -113,6 +114,7 @@ function _getAppBindings() {
     StyleUrlResolver,
     StyleInliner,
     TestBed,
+    TestComponentBuilder,
     bind(NgZone).toClass(MockNgZone),
     bind(EventManager)
         .toFactory((zone) =>