wip: iterating on tests

dgp1130 · dgp1130 · commit d7f6f2735c8b · 2026-01-14T14:31:12.000-08:00
diff --git a/packages/core/src/render3/node_manipulation.ts b/packages/core/src/render3/node_manipulation.ts
@@ -250,6 +250,7 @@ export function detachViewFromDOM(tView: TView, lView: LView) {
  *  - Destroy only called on movement to sibling or movement to parent (laterally or up)
  *
  *  @param rootView The view to destroy
+ * TODO: Relevant?
  */
 export function destroyViewTree(rootView: LView): void {
   // If the view has no children, we can clean it up and return early.
diff --git a/packages/core/src/render3/util/view_traversal_utils.ts b/packages/core/src/render3/util/view_traversal_utils.ts
@@ -13,8 +13,20 @@ import {assertDefined} from '../../util/assert';
 import {assertLView} from '../assert';
 import {readPatchedLView} from '../context_discovery';
 import {CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
-import {isLContainer, isLView, isRootView} from '../interfaces/type_checks';
-import {CHILD_HEAD, CONTEXT, HOST, INJECTOR, LView, NEXT, RENDERER} from '../interfaces/view';
+import {TElementNode, TNode} from '../interfaces/node';
+import {isComponentHost, isLContainer, isLView, isRootView} from '../interfaces/type_checks';
+import {
+  CHILD_HEAD,
+  DECLARATION_COMPONENT_VIEW,
+  CONTEXT,
+  HOST,
+  INJECTOR,
+  LView,
+  NEXT,
+  RENDERER,
+  T_HOST,
+  PARENT,
+} from '../interfaces/view';
 
 import {getLViewParent} from './view_utils';
 
@@ -69,13 +81,23 @@ function getNearestLContainer(viewOrContainer: LContainer | LView | null) {
   return viewOrContainer as LContainer | null;
 }
 
-/** Generates all the {@link LView} and {@link LContainer} descendants of the given input. */
+/**
+ * Generates all the {@link LView} and {@link LContainer} descendants of the given input. Also generates {@link LView}
+ * and {@link LContainer} instances which are projected into a descendant.
+ *
+ * There are no strict guarantees on the order of traversal.
+ * TODO: Duplicating results.
+ */
 export function* walkDescendants(
   parent: LView | LContainer,
 ): Generator<LView | LContainer, void, void> {
   for (const child of walkChildren(parent)) {
     yield child;
-    yield* walkDescendants(child);
+    // console.log(child); // DEBUG
+    for (const descendant of walkDescendants(child)) {
+      yield descendant;
+      // console.log(descendant); // DEBUG
+    }
   }
 }
 
@@ -85,6 +107,43 @@ function* walkChildren(parent: LView | LContainer): Generator<LView | LContainer
     yield child;
     child = child[NEXT];
   }
+
+  if (isLView(parent)) {
+    const host = parent[T_HOST];
+    if (host && isComponentHost(host)) {
+      // `parent[T_HOST]` is the `TElementNode` in the parents's parent view, which
+      // owns the host element of `parent`. So we need to look up the grandparent
+      // to access it.
+      const grandparent = isLContainer(parent[PARENT]) ? parent[PARENT][PARENT]! : parent[PARENT]!;
+      yield* walkProjectedChildren(grandparent, host as TElementNode);
+    }
+  }
+}
+
+function* walkProjectedChildren(
+  lView: LView,
+  componentHost: TElementNode,
+): Generator<LView | LContainer, void, void> {
+  if (!componentHost.projection) return;
+
+  for (const projectedNodes of componentHost.projection) {
+    if (Array.isArray(projectedNodes)) {
+      // Projected `RNode` objects are just raw elements and don't contain any `LView` objects.
+      continue;
+    }
+
+    for (const projectedNode of walkProjectedSiblings(projectedNodes)) {
+      const projected = lView[projectedNode.index];
+      if (isLView(projected) || isLContainer(projected)) yield projected;
+    }
+  }
+}
+
+function* walkProjectedSiblings(node: TNode | null): Generator<TNode, void, void> {
+  while (node) {
+    yield node;
+    node = node.projectionNext;
+  }
 }
 
 /** Combine multiple iterables into a single stream with the same ordering. */
diff --git a/packages/core/test/acceptance/authoring/signal_inputs_spec.ts b/packages/core/test/acceptance/authoring/signal_inputs_spec.ts
@@ -33,6 +33,8 @@ import {By} from '@angular/platform-browser';
 import {tickAnimationFrames} from '../../animation_utils/tick_animation_frames';
 import {isNode} from '@angular/private/testing';
 import {Subscription} from 'rxjs';
+import {walkDescendants} from '../../../src/render3/util/view_traversal_utils';
+import {readPatchedLView} from '../../../src/render3/context_discovery';
 
 describe('signal inputs', () => {
   beforeEach(() =>
@@ -373,7 +375,8 @@ describe('signal inputs', () => {
       expect(childCmp.nativeElement.className).not.toContain('fade-in');
     }));
 
-    it('should support content projection', fakeAsync(() => {
+    // TODO: Walk projected content.
+    fit('should support content projection', fakeAsync(() => {
       const animateStyles = `
         .fade-in {
           animation: fade 1ms forwards;
@@ -453,6 +456,8 @@ describe('signal inputs', () => {
       const fixture = TestBed.createComponent(TestComponent);
       const button = fixture.nativeElement.querySelector('button');
 
+      Array.from(walkDescendants(readPatchedLView(fixture.componentInstance)!));
+
       fixture.detectChanges();
       expect(fixture.nativeElement.querySelector('app-content')).toBeNull();
       expect(button).not.toBeNull();
@@ -601,6 +606,7 @@ describe('signal inputs', () => {
         public ngOnDestroy(): void {
           this.closedSubscription?.unsubscribe();
           this.closedSubscription = null;
+          // TODO: Valid?
           this.componentRef?.destroy(); // Explicitly destroy the dynamically created component
         }
 
diff --git a/packages/core/test/acceptance/hmr_spec.ts b/packages/core/test/acceptance/hmr_spec.ts
@@ -23,6 +23,7 @@ import {
   provideZoneChangeDetection,
   QueryList,
   SimpleChanges,
+  StyleRoot,
   Type,
   ViewChild,
   ViewChildren,
@@ -39,14 +40,18 @@ import {clearTranslations, loadTranslations} from '@angular/localize';
 import {computeMsgId} from '@angular/compiler';
 import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
 import {ComponentType} from '../../src/render3';
+import {ɵSharedStylesHost as SharedStylesHost} from '@angular/platform-browser';
 import {isNode} from '@angular/private/testing';
 
 describe('hot module replacement', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [provideZoneChangeDetection()],
     });
+
+    for (const child of document.body.childNodes) child.remove();
   });
+
   it('should recreate a single usage of a basic component', () => {
     let instance!: ChildCmp;
     const initialMetadata: Component = {
@@ -285,11 +290,11 @@ describe('hot module replacement', () => {
     const getShadowRoot = () => fixture.nativeElement.querySelector('child-cmp').shadowRoot;
 
     markNodesAsCreatedInitially(getShadowRoot());
-    expectHTML(getShadowRoot(), `<style>strong {color: red;}</style>Hello <strong>0</strong>`);
+    expectHTML(getShadowRoot(), `Hello <strong>0</strong><style>strong {color: red;}</style>`);
 
     instance.state = 1;
     fixture.detectChanges();
-    expectHTML(getShadowRoot(), `<style>strong {color: red;}</style>Hello <strong>1</strong>`);
+    expectHTML(getShadowRoot(), `Hello <strong>1</strong><style>strong {color: red;}</style>`);
 
     replaceMetadata(ChildCmp, {
       ...initialMetadata,
@@ -307,6 +312,103 @@ describe('hot module replacement', () => {
       getShadowRoot(),
       `<style>strong {background: pink;}</style>Changed <strong>1</strong>!`,
     );
+
+    fixture.destroy();
+    assertNoLeakedStyles(TestBed.inject(SharedStylesHost));
+  });
+
+  // TODO: `NoneEncapsulationDomRenderer.prototype.removeStyles` skips when animations are running, breaks in full test suite in headless mode.
+  // Don't *think* it's related to rAF throttling.
+  it("should replace a component child's styles within shadow DOM encapsulation", async () => {
+    // Domino doesn't support shadow DOM.
+    if (isNode) {
+      return;
+    }
+
+    const initialMetadata: Component = {
+      selector: 'child-cmp',
+      template: 'Hello <strong>World</strong>!',
+      styles: `strong {color: red;}`,
+      encapsulation: ViewEncapsulation.None,
+    };
+
+    @Component(initialMetadata)
+    class ChildCmp {}
+
+    @Component({
+      template: '<child-cmp/>',
+      encapsulation: ViewEncapsulation.ShadowDom,
+      imports: [ChildCmp],
+    })
+    class RootCmp {}
+
+    const fixture = TestBed.createComponent(RootCmp);
+    fixture.detectChanges();
+    const getShadowRoot = () => fixture.nativeElement.shadowRoot;
+
+    expect(getShadowRoot().innerHTML).toContain(`<style>strong {color: red;}</style>`);
+
+    replaceMetadata(ChildCmp, {
+      ...initialMetadata,
+      styles: `strong {background: pink;}`,
+    });
+    fixture.detectChanges();
+
+    expect(getShadowRoot().innerHTML).toContain('<style>strong {background: pink;}</style>');
+    expect(getShadowRoot().innerHTML).not.toContain(`<style>strong {color: red;}</style>`);
+
+    fixture.destroy();
+    assertNoLeakedStyles(TestBed.inject(SharedStylesHost));
+  });
+
+  it('should support components within nested shadow DOM', () => {
+    // Domino doesn't support shadow DOM.
+    if (isNode) {
+      return;
+    }
+
+    @Component({
+      selector: 'child-cmp',
+      template: 'Hello <strong>{{state}}</strong>',
+      styles: `
+        strong {
+          color: red;
+        }
+      `,
+      encapsulation: ViewEncapsulation.ShadowDom,
+    })
+    class ChildCmp {}
+
+    const initialMetadata: Component = {
+      template: '<child-cmp />',
+      styles: `:host {color: red;}`,
+      encapsulation: ViewEncapsulation.ShadowDom,
+      imports: [ChildCmp],
+    };
+
+    @Component(initialMetadata)
+    class RootCmp {}
+
+    const fixture = TestBed.createComponent(RootCmp);
+    fixture.detectChanges();
+
+    // Can't use `fixture.nativeElement` because the host element is recreated
+    // during HMR and `fixture` is not updated.
+    const getShadowRoot = () => document.querySelector('[ng-version]')!.shadowRoot!;
+
+    expect(getShadowRoot().innerHTML).toContain(`<style>:host {color: red;}</style>`);
+
+    replaceMetadata(RootCmp, {
+      ...initialMetadata,
+      styles: `:host {background: pink;}`,
+    });
+    fixture.detectChanges();
+
+    expect(getShadowRoot().innerHTML).toContain('<style>:host {background: pink;}</style>');
+    expect(getShadowRoot().innerHTML).not.toContain(`<style>:host {color: red;}</style>`);
+
+    fixture.destroy();
+    assertNoLeakedStyles(TestBed.inject(SharedStylesHost));
   });
 
   it('should continue binding inputs to a component that is replaced', () => {
@@ -2173,4 +2275,18 @@ describe('hot module replacement', () => {
       }
     }
   }
+
+  function assertNoLeakedStyles(sharedStylesHost: SharedStylesHost): void {
+    const ssh = sharedStylesHost as unknown as Omit<SharedStylesHost, 'inline' | 'external'> & {
+      inline: Map<StyleRoot, unknown>;
+      external: Map<StyleRoot, unknown>;
+    };
+
+    const totalStyles = ssh.inline.size + ssh.external.size;
+    if (totalStyles > 0) {
+      throw new Error(
+        `Expected \`SharedStylesHost\` to have no leaked styles, found: ${totalStyles}.`,
+      );
+    }
+  }
 });
diff --git a/packages/core/test/render3/util/view_traversal_util_spec.ts b/packages/core/test/render3/util/view_traversal_util_spec.ts
diff --git a/packages/platform-browser/test/dom/dom_renderer_spec.ts b/packages/platform-browser/test/dom/dom_renderer_spec.ts

Original file line number	Diff line number	Diff line change
`@@ -250,6 +250,7 @@ export function detachViewFromDOM(tView: TView, lView: LView) {`
`250`	`250`	`* - Destroy only called on movement to sibling or movement to parent (laterally or up)`
`251`	`251`	`*`
`252`	`252`	`* @param rootView The view to destroy`
	`253`	`+ * TODO: Relevant?`
`253`	`254`	`*/`
`254`	`255`	`export function destroyViewTree(rootView: LView): void {`
`255`	`256`	`// If the view has no children, we can clean it up and return early.`