fix(ivy): DebugNode.query should query nodes in the logical tree (angular#29480)

PR Close angular#29480

Author: marclaval

packages/bazel/test/ng_package/core_package.spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {fixmeIvy, ivyEnabled, obsoleteInIvy} from '@angular/private/testing';
+import {ivyEnabled, obsoleteInIvy} from '@angular/private/testing';
 import * as path from 'path';
 import * as shx from 'shelljs';
 

packages/compiler-cli/test/ngtools_api_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {__NGTOOLS_PRIVATE_API_2 as NgTools_InternalApi_NG_2} from '@angular/compiler-cli';
-import {fixmeIvy, ivyEnabled} from '@angular/private/testing';
+import {ivyEnabled} from '@angular/private/testing';
 import * as path from 'path';
 import * as ts from 'typescript';
 

packages/core/src/debug/debug_node.ts

@@ -8,13 +8,16 @@
 
 import {Injector} from '../di';
 import {getViewComponent} from '../render3/global_utils_api';
-import {TNode} from '../render3/interfaces/node';
+import {LContainer, NATIVE, VIEWS} from '../render3/interfaces/container';
+import {TElementNode, TNode, TNodeFlags, TNodeType} from '../render3/interfaces/node';
 import {StylingIndex} from '../render3/interfaces/styling';
-import {LView, TData, TVIEW} from '../render3/interfaces/view';
+import {LView, NEXT, PARENT, TData, TVIEW, T_HOST} from '../render3/interfaces/view';
 import {getProp, getValue, isClassBasedValue} from '../render3/styling/class_and_style_bindings';
 import {getStylingContext} from '../render3/styling/util';
 import {getComponent, getContext, getInjectionTokens, getInjector, getListeners, getLocalRefs, isBrowserEvents, loadLContext, loadLContextFromNode} from '../render3/util/discovery_utils';
 import {INTERPOLATION_DELIMITER, isPropMetadataString, renderStringify} from '../render3/util/misc_utils';
+import {findComponentView} from '../render3/util/view_traversal_utils';
+import {getComponentViewByIndex, getNativeByTNode, isComponent, isLContainer} from '../render3/util/view_utils';
 import {assertDomNode} from '../util/assert';
 import {DebugContext} from '../view/index';
 
@@ -368,13 +371,13 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
 
   queryAll(predicate: Predicate<DebugElement>): DebugElement[] {
     const matches: DebugElement[] = [];
-    _queryNodeChildrenR3(this, predicate, matches, true);
+    _queryAllR3(this, predicate, matches, true);
     return matches;
   }
 
   queryAllNodes(predicate: Predicate<DebugNode>): DebugNode[] {
     const matches: DebugNode[] = [];
-    _queryNodeChildrenR3(this, predicate, matches, false);
+    _queryAllR3(this, predicate, matches, false);
     return matches;
   }
 
@@ -387,20 +390,130 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
   }
 }
 
+/**
+ * Walk the TNode tree to find matches for the predicate, skipping the parent element.
+ *
+ * @param parentElement the element from which the walk is started
+ * @param predicate the predicate to match
+ * @param matches the list of positive matches
+ * @param elementsOnly whether only elements should be searched
+ */
+function _queryAllR3(
+    parentElement: DebugElement, predicate: Predicate<DebugNode>, matches: DebugNode[],
+    elementsOnly: boolean) {
+  const context = loadLContext(parentElement.nativeNode) !;
+  const parentTNode = context.lView[TVIEW].data[context.nodeIndex] as TNode;
+  // This the fixture's debug element, so this is always a component view.
+  const lView = context.lView[parentTNode.index];
+  const tNode = lView[TVIEW].firstChild;
+  _queryNodeChildrenR3(tNode, lView, predicate, matches, elementsOnly);
+}
+
+/**
+ * Recursively match the current TNode against the predicate, and goes on with the next ones.
+ *
+ * @param tNode the current TNode
+ * @param lView the LView of this TNode
+ * @param predicate the predicate to match
+ * @param matches the list of positive matches
+ * @param elementsOnly whether only elements should be searched
+ */
 function _queryNodeChildrenR3(
-    parentNode: DebugNode, predicate: Predicate<DebugNode>, matches: DebugNode[],
+    tNode: TNode, lView: LView, predicate: Predicate<DebugNode>, matches: DebugNode[],
     elementsOnly: boolean) {
-  if (parentNode instanceof DebugElement__POST_R3__) {
-    parentNode.childNodes.forEach(node => {
-      if (predicate(node)) {
-        matches.push(node);
+  // For each type of TNode, specific logic is executed.
+  if (tNode.type === TNodeType.Element || tNode.type === TNodeType.ElementContainer) {
+    // Case 1: the TNode is an element
+    // The native node has to be checked.
+    _addQueryMatchR3(getNativeByTNode(tNode, lView), predicate, matches, elementsOnly);
+    if (isComponent(tNode)) {
+      // If the element is the host of a component, then all nodes in its view have to be processed.
+      // Note: the component's content (tNode.child) will be processed from the insertion points.
+      const componentView = getComponentViewByIndex(tNode.index, lView);
+      if (componentView && componentView[TVIEW].firstChild)
+        _queryNodeChildrenR3(
+            componentView[TVIEW].firstChild !, componentView, predicate, matches, elementsOnly);
+    } else {
+      // Otherwise, its children have to be processed.
+      if (tNode.child) _queryNodeChildrenR3(tNode.child, lView, predicate, matches, elementsOnly);
+    }
+    // In all cases, if a dynamic container exists for this node, each view inside it has to be
+    // processed.
+    const nodeOrContainer = lView[tNode.index];
+    if (isLContainer(nodeOrContainer)) {
+      _queryNodeChildrenInContainerR3(nodeOrContainer, predicate, matches, elementsOnly);
+    }
+  } else if (tNode.type === TNodeType.Container) {
+    // Case 2: the TNode is a container
+    // The native node has to be checked.
+    const lContainer = lView[tNode.index];
+    _addQueryMatchR3(lContainer[NATIVE], predicate, matches, elementsOnly);
+    // Each view inside the container has to be processed.
+    _queryNodeChildrenInContainerR3(lContainer, predicate, matches, elementsOnly);
+  } else if (tNode.type === TNodeType.Projection) {
+    // Case 3: the TNode is a projection insertion point (i.e. a <ng-content>).
+    // The nodes projected at this location all need to be processed.
+    const componentView = findComponentView(lView !);
+    const componentHost = componentView[T_HOST] as TElementNode;
+    const head: TNode|null =
+        (componentHost.projection as(TNode | null)[])[tNode.projection as number];
+
+    if (Array.isArray(head)) {
+      for (let nativeNode of head) {
+        _addQueryMatchR3(nativeNode, predicate, matches, elementsOnly);
       }
-      if (node instanceof DebugElement__POST_R3__) {
-        if (elementsOnly ? node.nativeElement : true) {
-          _queryNodeChildrenR3(node, predicate, matches, elementsOnly);
-        }
+    } else {
+      if (head) {
+        const nextLView = componentView[PARENT] !as LView;
+        const nextTNode = nextLView[TVIEW].data[head.index] as TNode;
+        _queryNodeChildrenR3(nextTNode, nextLView, predicate, matches, elementsOnly);
       }
-    });
+    }
+  } else {
+    // Case 4: the TNode is a view.
+    if (tNode.child) {
+      _queryNodeChildrenR3(tNode.child, lView, predicate, matches, elementsOnly);
+    }
+  }
+  // To determine the next node to be processed, we need to use the next or the projectionNext link,
+  // depending on whether the current node has been projected.
+  const nextTNode = (tNode.flags & TNodeFlags.isProjected) ? tNode.projectionNext : tNode.next;
+  if (nextTNode) {
+    _queryNodeChildrenR3(nextTNode, lView, predicate, matches, elementsOnly);
+  }
+}
+
+/**
+ * Process all TNodes in a given container.
+ *
+ * @param lContainer the container to be processed
+ * @param predicate the predicate to match
+ * @param matches the list of positive matches
+ * @param elementsOnly whether only elements should be searched
+ */
+function _queryNodeChildrenInContainerR3(
+    lContainer: LContainer, predicate: Predicate<DebugNode>, matches: DebugNode[],
+    elementsOnly: boolean) {
+  for (let i = 0; i < lContainer[VIEWS].length; i++) {
+    const childView = lContainer[VIEWS][i];
+    _queryNodeChildrenR3(childView[TVIEW].node !, childView, predicate, matches, elementsOnly);
+  }
+}
+
+/**
+ * Match the current native node against the predicate.
+ *
+ * @param nativeNode the current native node
+ * @param predicate the predicate to match
+ * @param matches the list of positive matches
+ * @param elementsOnly whether only elements should be searched
+ */
+function _addQueryMatchR3(
+    nativeNode: any, predicate: Predicate<DebugNode>, matches: DebugNode[], elementsOnly: boolean) {
+  const debugNode = getDebugNode(nativeNode);
+  if (debugNode && (elementsOnly ? debugNode instanceof DebugElement__POST_R3__ : true) &&
+      predicate(debugNode)) {
+    matches.push(debugNode);
   }
 }
 

packages/core/test/animation/animation_query_integration_spec.ts

@@ -14,7 +14,7 @@ import {CommonModule} from '@angular/common';
 import {Component, HostBinding, ViewChild} from '@angular/core';
 import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {fixmeIvy, ivyEnabled} from '@angular/private/testing';
+import {ivyEnabled} from '@angular/private/testing';
 
 import {HostListener} from '../../src/metadata/directives';
 

packages/core/test/animation/animation_router_integration_spec.ts

@@ -11,7 +11,6 @@ import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/brow
 import {Component, HostBinding} from '@angular/core';
 import {TestBed, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {fixmeIvy} from '@angular/private/testing';
 import {ActivatedRoute, Router, RouterOutlet} from '@angular/router';
 import {RouterTestingModule} from '@angular/router/testing';
 

packages/core/test/debug/debug_node_spec.ts

@@ -7,7 +7,7 @@
  */
 
 
-import {Component, Directive, EventEmitter, HostBinding, Injectable, Input, NO_ERRORS_SCHEMA} from '@angular/core';
+import {Component, Directive, ElementRef, EmbeddedViewRef, EventEmitter, HostBinding, Injectable, Input, NO_ERRORS_SCHEMA, 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';
@@ -154,6 +154,15 @@ class BankAccount {
   normalizedBankName !: string;
 }
 
+@Component({
+  template: `
+    <div class="content" #content>Some content</div>
+ `
+})
+class SimpleContentComp {
+  @ViewChild('content') content !: ElementRef;
+}
+
 @Component({
   selector: 'test-app',
   template: `
@@ -202,6 +211,7 @@ class HostClassBindingCmp {
           BankAccount,
           TestCmpt,
           HostClassBindingCmp,
+          SimpleContentComp,
         ],
         providers: [Logger],
         schemas: [NO_ERRORS_SCHEMA],
@@ -369,6 +379,122 @@ class HostClassBindingCmp {
       expect(debugElement).toBeTruthy();
     });
 
+    it('should query re-projected child elements by directive', () => {
+      @Directive({selector: 'example-directive-a'})
+      class ExampleDirectiveA {
+      }
+
+      @Component({
+        selector: 'proxy-component',
+        template: `
+          <ng-content></ng-content>
+        `
+      })
+      class ProxyComponent {
+      }
+
+      @Component({
+        selector: 'wrapper-component',
+        template: `
+          <proxy-component>
+            <ng-content select="div"></ng-content>
+            <ng-content select="example-directive-a"></ng-content>
+          </proxy-component>
+        `
+      })
+      class WrapperComponent {
+      }
+
+      TestBed.configureTestingModule({
+        declarations: [
+          ProxyComponent,
+          WrapperComponent,
+          ExampleDirectiveA,
+        ]
+      });
+
+      TestBed.overrideTemplate(TestApp, `<wrapper-component>
+        <div></div>
+        <example-directive-a></example-directive-a>
+       </wrapper-component>`);
+
+      const fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+
+      const debugElements = fixture.debugElement.queryAll(By.directive(ExampleDirectiveA));
+      expect(debugElements.length).toBe(1);
+    });
+
+    it('should query directives on containers before directives in a view', () => {
+      @Directive({selector: '[text]'})
+      class TextDirective {
+        @Input() text: string|undefined;
+      }
+
+      TestBed.configureTestingModule({declarations: [TextDirective]});
+      TestBed.overrideTemplate(
+          TestApp,
+          `<ng-template text="first" [ngIf]="true"><div text="second"></div></ng-template>`);
+
+      const fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+
+      const debugNodes = fixture.debugElement.queryAllNodes(By.directive(TextDirective));
+      expect(debugNodes.length).toBe(2);
+      expect(debugNodes[0].injector.get(TextDirective).text).toBe('first');
+      expect(debugNodes[1].injector.get(TextDirective).text).toBe('second');
+    });
+
+    it('should query directives on views moved in the DOM', () => {
+      @Directive({selector: '[text]'})
+      class TextDirective {
+        @Input() text: string|undefined;
+      }
+
+      @Directive({selector: '[moveView]'})
+      class ViewManipulatingDirective {
+        constructor(private _vcRef: ViewContainerRef, private _tplRef: TemplateRef<any>) {}
+
+        insert() { this._vcRef.createEmbeddedView(this._tplRef); }
+
+        removeFromTheDom() {
+          const viewRef = this._vcRef.get(0) as EmbeddedViewRef<any>;
+          viewRef.rootNodes.forEach(rootNode => { getDOM().remove(rootNode); });
+        }
+      }
+
+      TestBed.configureTestingModule({declarations: [TextDirective, ViewManipulatingDirective]});
+      TestBed.overrideTemplate(
+          TestApp, `<ng-template text="first" moveView><div text="second"></div></ng-template>`);
+
+      const fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+
+      const viewMover =
+          fixture.debugElement.queryAllNodes(By.directive(ViewManipulatingDirective))[0]
+              .injector.get(ViewManipulatingDirective);
+
+      let debugNodes = fixture.debugElement.queryAllNodes(By.directive(TextDirective));
+
+      // we've got just one directive on <ng-template>
+      expect(debugNodes.length).toBe(1);
+      expect(debugNodes[0].injector.get(TextDirective).text).toBe('first');
+
+      // insert a view - now we expect to find 2 directive instances
+      viewMover.insert();
+      fixture.detectChanges();
+      debugNodes = fixture.debugElement.queryAllNodes(By.directive(TextDirective));
+      expect(debugNodes.length).toBe(2);
+
+      // remove a view from the DOM (equivalent to moving it around)
+      // the logical tree is the same but DOM has changed
+      viewMover.removeFromTheDom();
+      debugNodes = fixture.debugElement.queryAllNodes(By.directive(TextDirective));
+      expect(debugNodes.length).toBe(2);
+      expect(debugNodes[0].injector.get(TextDirective).text).toBe('first');
+      expect(debugNodes[1].injector.get(TextDirective).text).toBe('second');
+    });
+
     it('should list providerTokens', () => {
       fixture = TestBed.createComponent(ParentComp);
       fixture.detectChanges();
@@ -489,5 +615,21 @@ class HostClassBindingCmp {
          });
     });
 
+    it('should be able to query for elements that are not in the same DOM tree anymore', () => {
+      fixture = TestBed.createComponent(SimpleContentComp);
+      fixture.detectChanges();
+
+      const parent = getDOM().parentElement(fixture.nativeElement) !;
+      const content = fixture.componentInstance.content.nativeElement;
+
+      // Move the content element outside the component
+      // so that it can't be reached via querySelector.
+      getDOM().appendChild(parent, content);
+
+      expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy();
+
+      getDOM().remove(content);
+    });
+
   });
 }

packages/core/test/linker/ng_module_integration_spec.ts

@@ -14,7 +14,7 @@ import {NgModuleData} from '@angular/core/src/view/types';
 import {tokenKey} from '@angular/core/src/view/util';
 import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
-import {fixmeIvy, modifiedInIvy, obsoleteInIvy, onlyInIvy} from '@angular/private/testing';
+import {modifiedInIvy, obsoleteInIvy, onlyInIvy} from '@angular/private/testing';
 
 import {InternalNgModuleRef, NgModuleFactory} from '../../src/linker/ng_module_factory';
 import {clearModulesForTest} from '../../src/linker/ng_module_factory_loader';