feat(testing): export useful properties from componentFixture

juliemr · jelbourn · commit e9f873a365a6 · 2015-12-02T16:05:01.000-08:00
The component fixture returned from the test component builder now exports `nativeElement` and `componentInstance` members directly. They are also still available on the `debugElement`. See #5385
diff --git a/modules/angular2/src/testing/test_component_builder.ts b/modules/angular2/src/testing/test_component_builder.ts
@@ -27,9 +27,29 @@ import {DebugElement, DebugElement_} from 'angular2/src/core/debug/debug_element
  * Fixture for debugging and testing a component.
  */
 export abstract class ComponentFixture {
+  /**
+   * The DebugElement associated with the root element of this component.
+   */
   debugElement: DebugElement;
 
+  /**
+   * The instance of the root component class.
+   */
+  componentInstance: any;
+
+  /**
+   * The native element at the root of the component.
+   */
+  nativeElement: any;
+
+  /**
+   * Trigger a change detection cycle for the component.
+   */
   abstract detectChanges(): void;
+
+  /**
+   * Trigger component destruction.
+   */
   abstract destroy(): void;
 }
 
@@ -43,6 +63,8 @@ export class ComponentFixture_ extends ComponentFixture {
   constructor(componentRef: ComponentRef) {
     super();
     this.debugElement = new DebugElement_(internalView(<ViewRef>componentRef.hostView), 0);
+    this.componentInstance = this.debugElement.componentInstance;
+    this.nativeElement = this.debugElement.nativeElement;
     this._componentParentView = internalView(<ViewRef>componentRef.hostView);
     this._componentRef = componentRef;
   }
diff --git a/modules/angular2/test/testing/test_component_builder_spec.ts b/modules/angular2/test/testing/test_component_builder_spec.ts
@@ -99,7 +99,7 @@ export function main() {
          tcb.createAsync(ChildComp).then((componentFixture) => {
            componentFixture.detectChanges();
 
-           expect(componentFixture.debugElement.nativeElement).toHaveText('Original Child');
+           expect(componentFixture.nativeElement).toHaveText('Original Child');
            async.done();
          });
        }));
@@ -109,11 +109,11 @@ export function main() {
 
          tcb.createAsync(MyIfComp).then((componentFixture) => {
            componentFixture.detectChanges();
-           expect(componentFixture.debugElement.nativeElement).toHaveText('MyIf()');
+           expect(componentFixture.nativeElement).toHaveText('MyIf()');
 
-           componentFixture.debugElement.componentInstance.showMore = true;
+           componentFixture.componentInstance.showMore = true;
            componentFixture.detectChanges();
-           expect(componentFixture.debugElement.nativeElement).toHaveText('MyIf(More)');
+           expect(componentFixture.nativeElement).toHaveText('MyIf(More)');
 
            async.done();
          });
@@ -126,7 +126,7 @@ export function main() {
              .createAsync(MockChildComp)
              .then((componentFixture) => {
                componentFixture.detectChanges();
-               expect(componentFixture.debugElement.nativeElement).toHaveText('Mock');
+               expect(componentFixture.nativeElement).toHaveText('Mock');
 
                async.done();
              });
@@ -140,7 +140,7 @@ export function main() {
              .createAsync(ChildComp)
              .then((componentFixture) => {
                componentFixture.detectChanges();
-               expect(componentFixture.debugElement.nativeElement).toHaveText('Modified Child');
+               expect(componentFixture.nativeElement).toHaveText('Modified Child');
 
                async.done();
              });
@@ -153,7 +153,7 @@ export function main() {
              .createAsync(ParentComp)
              .then((componentFixture) => {
                componentFixture.detectChanges();
-               expect(componentFixture.debugElement.nativeElement).toHaveText('Parent(Mock)');
+               expect(componentFixture.nativeElement).toHaveText('Parent(Mock)');
 
                async.done();
              });
@@ -168,7 +168,7 @@ export function main() {
              .createAsync(ParentComp)
              .then((componentFixture) => {
                componentFixture.detectChanges();
-               expect(componentFixture.debugElement.nativeElement)
+               expect(componentFixture.nativeElement)
                    .toHaveText('Parent(Original Child(ChildChild Mock))');
 
                async.done();
@@ -183,7 +183,7 @@ export function main() {
              .createAsync(TestBindingsComp)
              .then((componentFixture) => {
                componentFixture.detectChanges();
-               expect(componentFixture.debugElement.nativeElement)
+               expect(componentFixture.nativeElement)
                    .toHaveText('injected value: mocked out value');
                async.done();
              });
@@ -198,7 +198,7 @@ export function main() {
              .createAsync(TestViewBindingsComp)
              .then((componentFixture) => {
                componentFixture.detectChanges();
-               expect(componentFixture.debugElement.nativeElement)
+               expect(componentFixture.nativeElement)
                    .toHaveText('injected value: mocked out value');
                async.done();
              });
