fix(ivy): Fix DebugElement.query queries when there is a node outside…

… Angular context
angular · Aug 28, 2019 · c2fabfb · c2fabfb
1 parent 65aaffc
commit c2fabfb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts
@@ -272,7 +272,11 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
    *  - attribute bindings (e.g. `[attr.role]="menu"`)
    */
   get properties(): {[key: string]: any;} {
-    const context = loadLContext(this.nativeNode) !;
+    const context = loadLContext(this.nativeNode, false);
+    if (context == null) {
+      return {};
+    }
+
     const lView = context.lView;
     const tData = lView[TVIEW].data;
     const tNode = tData[context.nodeIndex] as TNode;
@@ -297,7 +301,11 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
       return attributes;
     }
 
-    const context = loadLContext(element);
+    const context = loadLContext(element, false);
+    if (context == null) {
+      return {};
+    }
+
     const lView = context.lView;
     const tNodeAttrs = (lView[TVIEW].data[context.nodeIndex] as TNode).attrs;
     const lowercaseTNodeAttrs: string[] = [];
@@ -413,7 +421,7 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
 }
 
 function _getStylingDebugInfo(element: any, isClassBased: boolean) {
-  if (element) {
+  if (element && loadLContext(element, false) !== null) {
     const context = loadLContextFromNode(element);
     const lView = context.lView;
     const tData = lView[TVIEW].data;

diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts
@@ -8,7 +8,7 @@
 
 
 import {CommonModule, NgIfContext} from '@angular/common';
-import {Component, DebugNode, Directive, ElementRef, EmbeddedViewRef, EventEmitter, HostBinding, Injectable, Input, NO_ERRORS_SCHEMA, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {Component, DebugElement, DebugNode, Directive, ElementRef, EmbeddedViewRef, EventEmitter, HostBinding, Injectable, Input, NO_ERRORS_SCHEMA, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef} 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';
@@ -580,6 +580,31 @@ class TestCmptWithPropBindings {
       expect(fixture.debugElement.query(By.css('.myclass'))).toBeTruthy();
     });
 
+    describe('DebugElement.query doesn\'t fail on elements outside Angular context', () => {
+      @Component({template: '<div></div>'})
+      class NativeEl {
+        constructor(private elementRef: ElementRef) {}
+
+        ngAfterViewInit() {
+          this.elementRef.nativeElement.children[0].appendChild(document.createElement('p'));
+        }
+      }
+
+      let el: DebugElement;
+      beforeEach(() => {
+        const fixture =
+            TestBed.configureTestingModule({declarations: [NativeEl]}).createComponent(NativeEl);
+        fixture.detectChanges();
+        el = fixture.debugElement;
+      });
+
+      it('name', () => { expect(el.query(e => e.name === 'dne')).toBeNull(); });
+      it('attributes',
+         () => { expect(el.query(e => e.attributes !['name'] === 'dne')).toBeNull(); });
+      it('classes', () => { expect(el.query(e => e.classes['dne'] === true)).toBeNull(); });
+      it('styles', () => { expect(el.query(e => e.styles['dne'] === 'dne')).toBeNull(); });
+    });
+
     it('DebugElement.queryAll should pick up both elements inserted via the view and through Renderer2',
        () => {
          @Directive({