Fix test imports, add !, and restore OnPush change detection

renderers/angular/src/v0_8/components/audio.spec.ts

@@ -18,7 +18,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {AudioPlayer} from './audio';
 import type {AudioPlayerNode} from '../types';
 import {Theme} from '../rendering/theming';
-import {ChangeDetectionStrategy} from '@angular/core';
 import {MessageProcessor} from '../data/processor';
 import {Catalog} from '../rendering/catalog';
 
@@ -53,11 +52,7 @@ describe('AudioPlayer Component', () => {
         {provide: Theme, useValue: mockTheme},
         {provide: Catalog, useValue: {}},
       ],
-    })
-      .overrideComponent(AudioPlayer, {
-        set: {changeDetection: ChangeDetectionStrategy.Default},
-      })
-      .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(AudioPlayer);
     component = fixture.componentInstance;

renderers/angular/src/v0_8/components/button.ts

@@ -22,7 +22,7 @@ import {Renderer} from '../rendering/renderer';
 @Component({
   selector: 'a2ui-button',
   imports: [Renderer],
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <button
       [class]="theme.components.Button"

renderers/angular/src/v0_8/components/card.spec.ts

@@ -20,7 +20,7 @@ import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
 import type {CardNode} from '../types';
-import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -65,7 +65,6 @@ describe('Card Component', () => {
     })
       .overrideComponent(Card, {
         set: {
-          changeDetection: ChangeDetectionStrategy.Default,
           imports: [MockRenderer],
         },
       })

renderers/angular/src/v0_8/components/column.spec.ts

@@ -20,7 +20,7 @@ import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
 import type {ColumnNode} from '../types';
-import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -64,7 +64,6 @@ describe('Column Component', () => {
     })
       .overrideComponent(Column, {
         set: {
-          changeDetection: ChangeDetectionStrategy.Default,
           imports: [MockRenderer],
         },
       })

renderers/angular/src/v0_8/components/column.ts

@@ -22,7 +22,7 @@ import {Renderer} from '../rendering/renderer';
 @Component({
   selector: 'a2ui-column',
   imports: [Renderer],
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styles: `
     :host {
       display: flex;

renderers/angular/src/v0_8/components/datetime-input.spec.ts

@@ -18,7 +18,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {DateTimeInput} from './datetime-input';
 import type {A2UIClientEventMessage, DateTimeInputNode} from '../types';
 import {Theme} from '../rendering/theming';
-import {ChangeDetectionStrategy} from '@angular/core';
 import {MessageProcessor} from '../data/processor';
 import {Catalog} from '../rendering/catalog';
 
@@ -57,11 +56,7 @@ describe('DateTimeInput Component', () => {
         {provide: Theme, useValue: mockTheme},
         {provide: Catalog, useValue: {}},
       ],
-    })
-      .overrideComponent(DateTimeInput, {
-        set: {changeDetection: ChangeDetectionStrategy.Default},
-      })
-      .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(DateTimeInput);
     component = fixture.componentInstance;

renderers/angular/src/v0_8/components/icon.ts

@@ -24,7 +24,7 @@ import type {IconNode, StringValue} from '../types';
     'aria-hidden': 'true',
     tabindex: '-1',
   },
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styles: `
     :host {
       display: block;

renderers/angular/src/v0_8/components/image.ts

@@ -22,7 +22,7 @@ import {DynamicComponent} from '../rendering/dynamic-component';
 
 @Component({
   selector: 'a2ui-image',
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styles: `
     :host {
       display: block;

renderers/angular/src/v0_8/components/list.spec.ts

@@ -20,7 +20,7 @@ import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
 import type {ListNode} from '../types';
-import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 import {By} from '@angular/platform-browser';
 
 @Directive({
@@ -65,7 +65,6 @@ describe('List Component', () => {
     })
       .overrideComponent(List, {
         set: {
-          changeDetection: ChangeDetectionStrategy.Default,
           imports: [MockRenderer],
         },
       })

renderers/angular/src/v0_8/components/list.ts

@@ -22,7 +22,7 @@ import {Renderer} from '../rendering/renderer';
 @Component({
   selector: 'a2ui-list',
   imports: [Renderer],
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[attr.direction]': 'direction()',
   },

renderers/angular/src/v0_8/components/modal.spec.ts

@@ -20,7 +20,7 @@ import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
 import type {AnyComponentNode} from '../types';
-import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 import {By} from '@angular/platform-browser';
 
 @Directive({
@@ -72,7 +72,6 @@ describe('Modal Component', () => {
     })
       .overrideComponent(Modal, {
         set: {
-          changeDetection: ChangeDetectionStrategy.Default,
           imports: [MockRenderer],
         },
       })

renderers/angular/src/v0_8/components/multiple-choice.spec.ts

@@ -20,7 +20,6 @@ import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
 import {By} from '@angular/platform-browser';
-import {ChangeDetectionStrategy} from '@angular/core';
 
 describe('MultipleChoice Component', () => {
   let component: MultipleChoice;
@@ -57,13 +56,7 @@ describe('MultipleChoice Component', () => {
         {provide: Theme, useValue: mockTheme},
         {provide: Catalog, useValue: {}},
       ],
-    })
-      .overrideComponent(MultipleChoice, {
-        set: {
-          changeDetection: ChangeDetectionStrategy.Default,
-        },
-      })
-      .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(MultipleChoice);
     component = fixture.componentInstance;

renderers/angular/src/v0_8/components/row.spec.ts

@@ -20,7 +20,7 @@ import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
 import type {RowNode} from '../types';
-import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -64,7 +64,6 @@ describe('Row Component', () => {
     })
       .overrideComponent(Row, {
         set: {
-          changeDetection: ChangeDetectionStrategy.Default,
           imports: [MockRenderer],
         },
       })

renderers/angular/src/v0_8/components/row.ts

@@ -22,7 +22,7 @@ import type {AnyComponentNode, ResolvedRow, RowNode} from '../types';
 @Component({
   selector: 'a2ui-row',
   imports: [Renderer],
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[attr.alignment]': 'alignment()',
     '[attr.distribution]': 'distribution()',

renderers/angular/src/v0_8/components/slider.spec.ts

@@ -20,7 +20,6 @@ import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
 import {By} from '@angular/platform-browser';
-import {ChangeDetectionStrategy} from '@angular/core';
 
 describe('Slider Component', () => {
   let component: Slider;
@@ -52,13 +51,7 @@ describe('Slider Component', () => {
         {provide: Theme, useValue: mockTheme},
         {provide: Catalog, useValue: {}},
       ],
-    })
-      .overrideComponent(Slider, {
-        set: {
-          changeDetection: ChangeDetectionStrategy.Default,
-        },
-      })
-      .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(Slider);
     component = fixture.componentInstance;

renderers/angular/src/v0_8/components/surface.spec.ts

@@ -18,7 +18,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Surface} from './surface';
 import {MessageProcessor} from '../data/processor';
 import type {AnyComponentNode, Surface as SurfaceType} from '../types';
-import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -61,7 +61,6 @@ describe('Surface Component', () => {
     })
       .overrideComponent(Surface, {
         set: {
-          changeDetection: ChangeDetectionStrategy.Default,
           imports: [MockRenderer],
         },
       })

renderers/angular/src/v0_8/components/tabs.spec.ts

@@ -19,7 +19,7 @@ import {Tabs} from './tabs';
 import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
-import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 import {By} from '@angular/platform-browser';
 
 @Directive({
@@ -77,7 +77,6 @@ describe('Tabs Component', () => {
     })
       .overrideComponent(Tabs, {
         set: {
-          changeDetection: ChangeDetectionStrategy.Default,
           imports: [MockRenderer],
         },
       })

renderers/angular/src/v0_8/components/text-field.spec.ts

@@ -20,7 +20,6 @@ import {MessageProcessor} from '../data/processor';
 import {Theme} from '../rendering/theming';
 import {Catalog} from '../rendering/catalog';
 import {By} from '@angular/platform-browser';
-import {ChangeDetectionStrategy} from '@angular/core';
 
 describe('TextField Component', () => {
   let component: TextField;
@@ -52,13 +51,7 @@ describe('TextField Component', () => {
         {provide: Theme, useValue: mockTheme},
         {provide: Catalog, useValue: {}},
       ],
-    })
-      .overrideComponent(TextField, {
-        set: {
-          changeDetection: ChangeDetectionStrategy.Default,
-        },
-      })
-      .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(TextField);
     component = fixture.componentInstance;

renderers/angular/src/v0_8/components/text.spec.ts

@@ -54,7 +54,7 @@ describe('Text Component', () => {
         {provide: MarkdownRenderer, useValue: mockMarkdownRenderer},
       ],
     })
-      // Text component uses ChangeDetectionStrategy.Eager originally!
+      // Text component uses ChangeDetectionStrategy.OnPush originally!
       .compileComponents();
 
     fixture = TestBed.createComponent(Text);

renderers/angular/src/v0_8/components/text.ts

@@ -41,7 +41,7 @@ interface HintedStyles {
 
 @Component({
   selector: 'a2ui-text',
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <section
       [class]="classes()"

renderers/angular/src/v0_8/components/video.spec.ts

@@ -18,7 +18,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Video} from './video';
 import type {VideoNode} from '../types';
 import {Theme} from '../rendering/theming';
-import {ChangeDetectionStrategy} from '@angular/core';
 import {MessageProcessor} from '../data/processor';
 import {Catalog} from '../rendering/catalog';
 
@@ -54,11 +53,7 @@ describe('Video Component', () => {
         {provide: Theme, useValue: mockTheme},
         {provide: Catalog, useValue: {}},
       ],
-    })
-      .overrideComponent(Video, {
-        set: {changeDetection: ChangeDetectionStrategy.Default},
-      })
-      .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(Video);
     component = fixture.componentInstance;

renderers/angular/src/v0_8/components/video.ts

@@ -20,7 +20,7 @@ import type {StringValue, VideoNode} from '../types';
 
 @Component({
   selector: 'a2ui-video',
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     @let resolvedUrl = this.resolvedUrl();
 

renderers/web_core/src/v0_8/data/guards.test.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import assert from 'node:assert';
+import * as assert from 'node:assert';
 import {describe, it} from 'node:test';
 import * as guards from './guards.js';
 

renderers/web_core/src/v0_8/data/model-processor.test.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import assert from 'node:assert';
+import * as assert from 'node:assert';
 import {describe, it, beforeEach} from 'node:test';
 import {A2uiMessageProcessor} from './model-processor.js';
 import {TextNode, RowNode} from '../types/types.js';
@@ -38,7 +38,7 @@ describe('A2uiMessageProcessor', () => {
     ]);
 
     const surfaces = processor.getSurfaces();
-    const surface = surfaces.get('s1');
+    const surface = surfaces.get('s1')!;
     assert.ok(surface);
     assert.strictEqual(surface.rootComponentId, 'root');
     assert.deepStrictEqual(surface.styles, {font: 'Arial'});
@@ -69,10 +69,10 @@ describe('A2uiMessageProcessor', () => {
       },
     ]);
 
-    const surface = processor.getSurfaces().get('s1');
+    const surface = processor.getSurfaces().get('s1')!;
     assert.ok(surface);
     assert.ok(surface.componentTree);
-    const root = surface.componentTree as TextNode;
+    const root = surface.componentTree! as TextNode;
     assert.strictEqual(root.id, 'root');
     assert.strictEqual(root.type, 'Text');
     // The property preserves the literal wrapper

samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.ts

@@ -36,7 +36,7 @@ import {CanvasService} from './services/canvas-service';
   templateUrl: './a2a-chat-canvas.html',
   styleUrl: './a2a-chat-canvas.scss',
   imports: [Canvas, Chat],
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class A2aChatCanvas {
   readonly emptyHistoryTemplate = input<TemplateRef<unknown>>();

samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.ts

@@ -28,7 +28,7 @@ import {ChangeDetectionStrategy, Component, inject, input, resource} from '@angu
   templateUrl: './a2a-renderer.html',
   styleUrl: './a2a-renderer.scss',
   imports: [NgComponentOutlet],
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class A2aRenderer {
   /** The UiMessageContent to be rendered. */

samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.ts

@@ -32,7 +32,7 @@ import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angu
   templateUrl: './a2ui-data-part.html',
   styleUrl: './a2ui-data-part.scss',
   imports: [Surface],
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class A2uiDataPart implements RendererComponent {
   /** The UiMessageContent containing the A2A data part with the embedded A2UI message. */