refactor(cdk/tree): make tests compiled, gets rid of one detectChanges

Author: BobobUnicorn

src/cdk/tree/BUILD.bazel

@@ -26,10 +26,10 @@ ng_module(
     ],
 )
 
-ng_test_library(
+ng_module(
     name = "unit_test_sources",
     srcs = glob(
-        ["**/*.spec.ts"],
+        ["**/tree-using-legacy-key-manager.spec.ts"],
         exclude = ["**/*.e2e.spec.ts"],
     ),
     deps = [
@@ -40,7 +40,10 @@ ng_test_library(
         "//src/cdk/keycodes",
         "//src/cdk/testing/testbed",
         "@npm//rxjs",
+        "@npm//@angular/core",
+        "@npm//@types/jasmine",
     ],
+    testonly = True,
 )
 
 ng_web_test_suite(

src/cdk/tree/tree-using-legacy-key-manager.spec.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {Component, viewChildren, viewChild, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {of} from 'rxjs';
 import {CdkTreeModule} from './tree-module';
@@ -7,21 +7,19 @@ import {NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER} from '@angular/cdk/a11y';
 describe('CdkTree when provided LegacyTreeKeyManager', () => {
   let fixture: ComponentFixture<SimpleCdkTreeApp>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [CdkTreeModule],
-      declarations: [SimpleCdkTreeApp],
+      imports: [SimpleCdkTreeApp],
       providers: [NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER],
     });
 
+    await TestBed.compileComponents();
     fixture = TestBed.createComponent(SimpleCdkTreeApp);
-    fixture.detectChanges();
-    fixture.detectChanges();
   });
 
   describe('with default node options', () => {
     it('renders nodes with tabindex attribute of -1', () => {
-      const treeItems = fixture.componentInstance.treeNodes;
+      const treeItems = fixture.componentInstance.treeNodes();
 
       expect(treeItems.map(x => `${x.nativeElement.getAttribute('tabindex')}`).join(', '))
         .withContext('tabindex of tree nodes')
@@ -31,14 +29,14 @@ describe('CdkTree when provided LegacyTreeKeyManager', () => {
 
   describe('when focusing the second node', () => {
     beforeEach(() => {
-      const treeItems = fixture.componentInstance.treeNodes;
+      const treeItems = fixture.componentInstance.treeNodes();
 
-      treeItems.get(1)!.nativeElement.focus();
+      treeItems[1]!.nativeElement.focus();
       fixture.detectChanges();
     });
 
     it('does not change tabindex of nodes', () => {
-      const treeItems = fixture.componentInstance.treeNodes;
+      const treeItems = fixture.componentInstance.treeNodes();
 
       expect(treeItems.map(x => `${x.nativeElement.getAttribute('tabindex')}`).join(', '))
         .withContext('tabindex of tree nodes')
@@ -48,9 +46,9 @@ describe('CdkTree when provided LegacyTreeKeyManager', () => {
 
   describe('when clicking the second node', () => {
     beforeEach(() => {
-      const treeItems = fixture.componentInstance.treeNodes;
+      const treeItems = fixture.componentInstance.treeNodes();
 
-      treeItems.get(1)!.nativeElement.click();
+      treeItems[1]!.nativeElement.click();
       fixture.detectChanges();
     });
 
@@ -59,7 +57,7 @@ describe('CdkTree when provided LegacyTreeKeyManager', () => {
     });
 
     it('does not change tabindex of nodes', () => {
-      const treeItems = fixture.componentInstance.treeNodes;
+      const treeItems = fixture.componentInstance.treeNodes();
 
       expect(treeItems.map(x => `${x.nativeElement.getAttribute('tabindex')}`).join(', '))
         .withContext('tabindex of tree nodes')
@@ -75,19 +73,20 @@ class MinimalTestData {
 
 @Component({
   template: `
-    <cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
+    <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
       <cdk-tree-node #node *cdkTreeNodeDef="let node">
         {{node.name}}
       </cdk-tree-node>
     </cdk-tree>
   `,
+  standalone: true,
+  imports: [CdkTreeModule],
 })
 class SimpleCdkTreeApp {
   isExpandable = (node: MinimalTestData) => node.children.length > 0;
   getChildren = (node: MinimalTestData) => node.children;
 
   dataSource = of([new MinimalTestData('apple'), new MinimalTestData('banana')]);
 
-  @ViewChild('tree', {read: ElementRef}) tree: ElementRef<HTMLElement>;
-  @ViewChildren('node') treeNodes: QueryList<ElementRef<HTMLElement>>;
+  readonly treeNodes = viewChildren<ElementRef<HTMLElement>>('node');
 }

src/cdk/tree/tree.ts

@@ -225,7 +225,6 @@ export class CdkTree<T, K = T>
   })
   _nodeDefs: QueryList<CdkTreeNodeDef<T>>;
 
-  // signals?
   private readonly _data = signal<readonly T[]>([]);
   private readonly _selection = signal<readonly K[]>([]);