diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts index b6c8396dd4..0a8dd3636d 100644 --- a/packages/core/src/debug/debug_node.ts +++ b/packages/core/src/debug/debug_node.ts @@ -7,7 +7,7 @@ */ import {Injector} from '../di'; -import {getComponent, getContext, getInjectionTokens, getInjector, getListeners, getLocalRefs, isBrowserEvents, loadLContext, loadLContextFromNode} from '../render3/discovery_utils'; +import {getComponent, getContext, getInjectionTokens, getInjector, getListeners, getLocalRefs, getViewComponent, isBrowserEvents, loadLContext, loadLContextFromNode} from '../render3/discovery_utils'; import {TNode} from '../render3/interfaces/node'; import {StylingIndex} from '../render3/interfaces/styling'; import {LView, TData, TVIEW} from '../render3/interfaces/view'; @@ -210,7 +210,8 @@ class DebugNode__POST_R3__ implements DebugNode { get componentInstance(): any { const nativeElement = this.nativeNode; - return nativeElement && getComponent(nativeElement as Element); + return nativeElement && + (getComponent(nativeElement as Element) || getViewComponent(nativeElement)); } get context(): any { return getContext(this.nativeNode as Element); } diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts index 5577ed49ac..5519e18e07 100644 --- a/packages/core/test/debug/debug_node_spec.ts +++ b/packages/core/test/debug/debug_node_spec.ts @@ -7,8 +7,7 @@ */ -import {EventEmitter, Injectable, NO_ERRORS_SCHEMA} from '@angular/core'; -import {Component, Directive, Input} from '@angular/core/src/metadata'; +import {Component, Directive, EventEmitter, Injectable, Input, NO_ERRORS_SCHEMA} from '@angular/core'; import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {By} from '@angular/platform-browser/src/dom/debug/by'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; @@ -172,6 +171,10 @@ class TestApp { isClosed = true; } +@Component({selector: 'test-cmpt', template: ``}) +class TestCmpt { +} + { describe('debug element', () => { let fixture: ComponentFixture; @@ -191,6 +194,7 @@ class TestApp { TestApp, UsingFor, BankAccount, + TestCmpt, ], providers: [Logger], schemas: [NO_ERRORS_SCHEMA], @@ -370,5 +374,61 @@ class TestApp { expect(fixture.componentInstance.customed).toBe(true); }); + + describe('componentInstance on DebugNode', () => { + + it('should return component associated with a node if a node is a component host', () => { + TestBed.overrideTemplate(TestCmpt, ``); + fixture = TestBed.createComponent(TestCmpt); + + const debugEl = fixture.debugElement.children[0]; + expect(debugEl.componentInstance).toBeAnInstanceOf(ParentComp); + }); + + it('should return component associated with a node if a node is a component host (content projection)', + () => { + TestBed.overrideTemplate( + TestCmpt, ``); + fixture = TestBed.createComponent(TestCmpt); + + const debugEl = fixture.debugElement.query(By.directive(ChildComp)); + expect(debugEl.componentInstance).toBeAnInstanceOf(ChildComp); + }); + + it('should return host component instance if a node has no associated component and there is no component projecting this node', + () => { + TestBed.overrideTemplate(TestCmpt, `
`); + fixture = TestBed.createComponent(TestCmpt); + + const debugEl = fixture.debugElement.children[0]; + expect(debugEl.componentInstance).toBeAnInstanceOf(TestCmpt); + }); + + it('should return host component instance if a node has no associated component and there is no component projecting this node (nested embedded views)', + () => { + TestBed.overrideTemplate(TestCmpt, ` + + +
+
+
`); + fixture = TestBed.createComponent(TestCmpt); + fixture.detectChanges(); + + const debugEl = fixture.debugElement.query(By.directive(MyDir)); + expect(debugEl.componentInstance).toBeAnInstanceOf(TestCmpt); + }); + + it('should return component instance that projects a given node if a node has no associated component', + () => { + TestBed.overrideTemplate( + TestCmpt, `
`); + fixture = TestBed.createComponent(TestCmpt); + + const debugEl = fixture.debugElement.children[0].children[0].children[0]; //
+ expect(debugEl.componentInstance).toBeAnInstanceOf(ParentComp); + }); + }); + }); }