build: add explicit change detection to tests (#33010)

In the next pre-release version of Angular, components that don't specify a `changeDetection` will become `OnPush` by default. These changes add `ChangeDetectionStrategy.Eager` to all test components, because a lot of them will start to fail with the new behavior.

Author: crisbeto

src/aria/accordion/accordion.spec.ts

@@ -1,4 +1,4 @@
-import {Component, DebugElement, signal} from '@angular/core';
+import {Component, DebugElement, signal, ChangeDetectionStrategy} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {provideFakeDirectionality, runAccessibilityChecks} from '@angular/cdk/testing/private';
@@ -404,6 +404,7 @@ describe('AccordionGroup', () => {
     </div>
   `,
   imports: [AccordionGroup, AccordionTrigger, AccordionPanel, AccordionContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class AccordionGroupExample {
   items = signal([

src/aria/combobox/combobox.spec.ts

@@ -1,4 +1,4 @@
-import {Component, computed, DebugElement, signal} from '@angular/core';
+import {Component, computed, DebugElement, signal, ChangeDetectionStrategy} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {Combobox, ComboboxInput, ComboboxPopup, ComboboxPopupContainer} from '../combobox';
@@ -1126,6 +1126,7 @@ describe('Combobox', () => {
 </div>
   `,
   imports: [Combobox, ComboboxInput, ComboboxPopup, ComboboxPopupContainer, Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class ComboboxListboxExample {
   readonly = signal(false);
@@ -1196,6 +1197,7 @@ class ComboboxListboxExample {
     TreeItemGroup,
     NgTemplateOutlet,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class ComboboxTreeExample {
   readonly = signal(false);

src/aria/grid/grid.spec.ts

@@ -1,4 +1,4 @@
-import {Component, DebugElement, signal} from '@angular/core';
+import {Component, DebugElement, signal, ChangeDetectionStrategy} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {Grid} from './grid';
@@ -1056,6 +1056,7 @@ describe('Grid directives', () => {
     </table>
   `,
   imports: [Grid, GridRow, GridCell, GridCellWidget],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class GridTestComponent {
   readonly disabled = signal(false);

src/aria/listbox/listbox.spec.ts

@@ -1,4 +1,4 @@
-import {Component, DebugElement, signal} from '@angular/core';
+import {Component, DebugElement, signal, ChangeDetectionStrategy} from '@angular/core';
 import {Listbox} from './listbox';
 import {Option} from './option';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
@@ -799,6 +799,7 @@ interface TestOption {
     </ul>
   `,
   imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class ListboxExample {
   options = signal<TestOption[]>([
@@ -830,5 +831,6 @@ class ListboxExample {
     </ul>
   `,
   imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class DefaultListboxExample {}

src/aria/menu/menu.spec.ts

@@ -1,4 +1,4 @@
-import {Component, DebugElement} from '@angular/core';
+import {Component, DebugElement, ChangeDetectionStrategy} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {provideFakeDirectionality} from '@angular/cdk/testing/private';
@@ -989,6 +989,7 @@ describe('Menu Bar Pattern', () => {
 </div>
   `,
   imports: [Menu, MenuItem, MenuContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class StandaloneMenuExample {
   itemSelected(value: string) {}
@@ -1017,6 +1018,7 @@ class StandaloneMenuExample {
 </div>
   `,
   imports: [Menu, MenuItem, MenuTrigger, MenuContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class MenuTriggerExample {
   itemSelected(value: string) {}
@@ -1056,5 +1058,6 @@ class MenuTriggerExample {
 </div>
   `,
   imports: [Menu, MenuBar, MenuItem, MenuContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class MenuBarExample {}

src/aria/private/deferred-content/deferred-content.spec.ts

@@ -1,4 +1,12 @@
-import {Component, DebugElement, Directive, effect, inject, signal} from '@angular/core';
+import {
+  Component,
+  DebugElement,
+  Directive,
+  effect,
+  inject,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {DeferredContent, DeferredContentAware} from './deferred-content';
 import {By} from '@angular/platform-browser';
@@ -83,6 +91,7 @@ class CollapsibleContent {}
     </div>
     `,
   imports: [Collapsible, CollapsibleContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class TestComponent {
   preserveContent = signal(false);

src/aria/tabs/tabs.spec.ts

@@ -1,4 +1,4 @@
-import {Component, DebugElement, signal} from '@angular/core';
+import {Component, DebugElement, signal, ChangeDetectionStrategy} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {Direction} from '@angular/cdk/bidi';
@@ -733,6 +733,7 @@ describe('Tabs', () => {
     </div>
   `,
   imports: [Tabs, TabList, Tab, TabPanel, TabContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class TestTabsComponent {
   tabsData = signal<TestTabDefinition[]>([

src/aria/toolbar/toolbar.spec.ts

@@ -1,4 +1,11 @@
-import {Component, DebugElement, Directive, inject, signal} from '@angular/core';
+import {
+  Component,
+  DebugElement,
+  Directive,
+  inject,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {provideFakeDirectionality, runAccessibilityChecks} from '@angular/cdk/testing/private';
@@ -673,6 +680,7 @@ describe('Toolbar', () => {
     </div>
   `,
   imports: [Toolbar, ToolbarWidget, ToolbarWidgetGroup],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class ToolbarExample {
   orientation = signal<'vertical' | 'horizontal'>('horizontal');
@@ -713,5 +721,6 @@ export class SimpleToolbarButton {
     </div>
   `,
   imports: [Toolbar, SimpleToolbarButton],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class WrappedToolbarExample {}

src/aria/tree/tree.spec.ts

@@ -1,4 +1,4 @@
-import {Component, signal} from '@angular/core';
+import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
 import {NgTemplateOutlet} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -1579,6 +1579,7 @@ interface TestTreeNode<V = string> {
     </ng-template>
   `,
   imports: [Tree, TreeItem, TreeItemGroup, NgTemplateOutlet],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class TestTreeComponent {
   nodes = signal<TestTreeNode[]>([

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -10,6 +10,7 @@ import {
   ElementRef,
   ViewChild,
   inject,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
 import {FormsModule, NgForm} from '@angular/forms';
@@ -858,6 +859,7 @@ abstract class BaseTestComponent {
   </table>
   `,
   imports: [CdkPopoverEditModule, FormsModule, CdkTableModule, BidiModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class VanillaTableOutOfCell extends BaseTestComponent {
   elements!: ChemicalElement[];
@@ -919,6 +921,7 @@ class VanillaTableOutOfCell extends BaseTestComponent {
   </table>
   `,
   imports: [CdkPopoverEditModule, FormsModule, CdkTableModule, BidiModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class VanillaTableInCell extends BaseTestComponent {
   elements!: ChemicalElement[];
@@ -1004,6 +1007,7 @@ class ElementDataSource extends DataSource<PeriodicElement> {
   </div>
   `,
   imports: [CdkPopoverEditModule, FormsModule, CdkTableModule, BidiModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class CdkFlexTableInCell extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];
@@ -1078,6 +1082,7 @@ class CdkFlexTableInCell extends BaseTestComponent {
   <div>
   `,
   imports: [CdkPopoverEditModule, FormsModule, CdkTableModule, BidiModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class CdkTableInCell extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];
@@ -1159,6 +1164,7 @@ class CdkTableInCell extends BaseTestComponent {
   <div>
   `,
   imports: [CdkPopoverEditModule, FormsModule, CdkTableModule, BidiModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class CdkTableWithSkipRows extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];