Add Angular explorer integration tests (a2ui-project#1380)

This commit adds a new suite of integration tests for the Angular explorer sample app, exercising the full pipeline from a JSON A2UI payload to the rendered DOM.

Author: josemontespg

.github/workflows/ng_build_and_test.yml

@@ -28,7 +28,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        task: [test, restaurant, rizzcharts, orchestrator]
+        task: [test, restaurant, rizzcharts, orchestrator, explorer]
 
     steps:
       - uses: actions/checkout@v6
@@ -58,6 +58,9 @@ jobs:
             test)
               cd ./renderers/angular && npm run test:ci
               ;;
+            explorer)
+              cd ./renderers/angular && npx ng test a2ui_explorer --watch=false --browsers=ChromeHeadless
+              ;;
             restaurant)
               cd ./samples/client/angular && npm run build restaurant
               ;;

renderers/angular/a2ui_explorer/src/app/app.spec.ts

@@ -14,13 +14,15 @@
  * limitations under the License.
  */
 
-import {TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 import {App} from './app';
+import {provideMarkdownRenderer} from '../../../src/v0_9/core/markdown';
 
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [provideMarkdownRenderer()],
     }).compileComponents();
   });
 

renderers/angular/a2ui_explorer/src/app/tests/01_flight-status.spec.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {ComponentFixture} from '@angular/core/testing';
+import {DemoComponent} from '../demo.component';
+import {getCanvas, loadExample} from './test_utils';
+
+describe('Example: Flight Status', () => {
+  let fixture: ComponentFixture<DemoComponent>;
+  let textContent: string;
+
+  beforeEach(async () => {
+    fixture = await loadExample('Flight Status');
+    textContent = getCanvas().textContent;
+  });
+
+  it('should render flight details', async () => {
+    expect(textContent).toContain('OS 87');
+    expect(textContent).toContain('Vienna');
+    expect(textContent).toContain('→');
+    expect(textContent).toContain('New York');
+  });
+
+  it('should render labels', async () => {
+    expect(textContent).toContain('Departs');
+    expect(textContent).toContain('Arrives');
+    expect(textContent).toContain('Status');
+    expect(textContent).toContain('On Time');
+  });
+
+  it('should render icon', async () => {
+    const iconInnerEl = fixture.nativeElement.querySelector('.a2ui-icon');
+    expect(iconInnerEl).toBeTruthy();
+    expect(iconInnerEl.textContent.trim()).toBe('send');
+  });
+});

renderers/angular/a2ui_explorer/src/app/tests/02_email-compose.spec.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {ComponentFixture} from '@angular/core/testing';
+import {DemoComponent} from '../demo.component';
+import {getCanvas, loadExample, wait} from './test_utils';
+
+describe('Example: Email Compose', () => {
+  let fixture: ComponentFixture<DemoComponent>;
+  let component: DemoComponent;
+  let textContent: string;
+
+  beforeEach(async () => {
+    fixture = await loadExample('Email Compose');
+    component = fixture.componentInstance;
+    textContent = getCanvas().textContent;
+  });
+
+  it('should render text content', async () => {
+    expect(textContent).toContain(`FROM`);
+    expect(textContent).toContain(`TO`);
+    expect(textContent).toContain(`SUBJECT`);
+    expect(textContent).toContain(`Send email`);
+    expect(textContent).toContain(`Discard`);
+    expect(textContent).toContain(`alex@acme.com`);
+    expect(textContent).toContain(`jordan@acme.com`);
+    expect(textContent).toContain(`Q4 Revenue Forecast`);
+    expect(textContent).toContain(`Hi Jordan,`);
+    expect(textContent).toContain(
+      `Following up on our call. Please review the attached Q4 forecast and let me know if you have questions before the board meeting.`,
+    );
+    expect(textContent).toContain(`Best,`);
+    expect(textContent).toContain(`Alex`);
+  });
+
+  it('should handle Send button click', async () => {
+    const buttons = [
+      ...fixture.nativeElement.querySelectorAll('.a2ui-button'),
+    ] as HTMLButtonElement[];
+    const sendBtn = buttons.find(b => b.textContent.includes('Send'))!;
+    expect(sendBtn).withContext('Should find Send button').toBeTruthy();
+
+    sendBtn.click();
+    fixture.detectChanges();
+    await wait(50);
+    fixture.detectChanges();
+
+    expect(component.eventsLog.length).toBe(1);
+    expect(component.eventsLog[0].action.name).toBe('send');
+  });
+
+  it('should handle Discard button click', async () => {
+    const buttons = [
+      ...fixture.nativeElement.querySelectorAll('.a2ui-button'),
+    ] as HTMLButtonElement[];
+    const discardBtn = buttons.find(b => b.textContent.includes('Discard'))!;
+    expect(discardBtn).withContext('Should find Discard button').toBeTruthy();
+
+    discardBtn.click();
+    fixture.detectChanges();
+    await wait(50);
+    fixture.detectChanges();
+
+    expect(component.eventsLog.length).toBe(1);
+    expect(component.eventsLog[0].action.name).toBe('discard');
+  });
+});

renderers/angular/a2ui_explorer/src/app/tests/03_calendar-day.spec.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {getCanvas, loadExample} from './test_utils';
+
+describe('Example: Calendar Day', () => {
+  let textContent: string;
+
+  beforeEach(async () => {
+    await loadExample('Calendar Day');
+    textContent = getCanvas().textContent;
+  });
+
+  it('should render text content', async () => {
+    expect(textContent).toContain('Lunch');
+    expect(textContent).toContain('12:00 - 12:45 PM');
+    expect(textContent).toContain('Q1 roadmap review');
+    expect(textContent).toContain('1:00 - 2:00 PM');
+    expect(textContent).toContain('Team standup');
+    expect(textContent).toContain('3:30 - 4:00 PM');
+    expect(textContent).toContain('Add to calendar');
+    expect(textContent).toContain('Discard');
+  });
+
+  it('should render date and day name', async () => {
+    const hasDayNumber = textContent.includes('28') || textContent.includes('27');
+    expect(hasDayNumber).withContext('Should render day number').toBeTruthy();
+
+    // Check for day name (approximate)
+    const hasDayName =
+      textContent.includes('Sunday') ||
+      textContent.includes('Monday') ||
+      textContent.includes('Tuesday') ||
+      textContent.includes('Wednesday') ||
+      textContent.includes('Thursday') ||
+      textContent.includes('Friday') ||
+      textContent.includes('Saturday');
+    expect(hasDayName).withContext('Should render day name').toBeTruthy();
+  });
+});

renderers/angular/a2ui_explorer/src/app/tests/04_weather-current.spec.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {getCanvas, loadExample} from './test_utils';
+
+describe('Example: Weather Current', () => {
+  let textContent: string;
+
+  beforeEach(async () => {
+    await loadExample('Weather Current');
+    textContent = getCanvas().textContent;
+  });
+
+  it('should render main content', async () => {
+    expect(textContent).toContain('Austin, TX');
+    expect(textContent).toContain('Clear skies with light breeze');
+    expect(textContent).toContain('72°');
+    expect(textContent).toContain('58°');
+  });
+
+  it('should render icons', async () => {
+    expect(textContent).toContain('☀️');
+    expect(textContent).toContain('⛅');
+  });
+
+  it('should render forecast temperatures', async () => {
+    expect(textContent).toContain('74°');
+    expect(textContent).toContain('76°');
+    expect(textContent).toContain('71°');
+    expect(textContent).toContain('73°');
+    expect(textContent).toContain('75°');
+  });
+
+  it('should render day names for forecast', async () => {
+    const hasDayName =
+      textContent.includes('Tue') ||
+      textContent.includes('Wed') ||
+      textContent.includes('Thu') ||
+      textContent.includes('Fri') ||
+      textContent.includes('Sat');
+    expect(hasDayName).withContext('Should render day names for forecast').toBeTruthy();
+  });
+});

renderers/angular/a2ui_explorer/src/app/tests/05_product-card.spec.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {ComponentFixture} from '@angular/core/testing';
+import {DemoComponent} from '../demo.component';
+import {getCanvas, loadExample, wait} from './test_utils';
+
+describe('Example: Product Card', () => {
+  let fixture: ComponentFixture<DemoComponent>;
+  let component: DemoComponent;
+  let textContent: string;
+
+  beforeEach(async () => {
+    fixture = await loadExample('Product Card');
+    component = fixture.componentInstance;
+    textContent = getCanvas().textContent;
+  });
+
+  it('should render text content', async () => {
+    expect(textContent).toContain('Wireless Headphones Pro');
+    expect(textContent).toContain('★★★★★');
+    expect(textContent).toContain('2,847');
+    expect(textContent).toContain('reviews');
+    expect(textContent).toContain('Add to Cart');
+  });
+
+  it('should render formatted currency', async () => {
+    expect(textContent).toContain('199.99');
+    expect(textContent).toContain('249.99');
+  });
+
+  it('should render image', async () => {
+    const img = fixture.nativeElement.querySelector('img');
+    expect(img).toBeTruthy();
+    expect(img.getAttribute('src')).toBe(
+      'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&h=200&fit=crop',
+    );
+  });
+
+  it('should handle button click', async () => {
+    const button = fixture.nativeElement.querySelector('.a2ui-button');
+    expect(button).toBeTruthy();
+
+    button.click();
+    fixture.detectChanges();
+
+    // Wait for event to be recorded in eventsLog
+    await wait(50);
+    fixture.detectChanges();
+
+    expect(component.eventsLog.length).toBe(1);
+    expect(component.eventsLog[0].action.name).toBe('addToCart');
+  });
+});

renderers/angular/a2ui_explorer/src/app/tests/06_music-player.spec.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {ComponentFixture} from '@angular/core/testing';
+import {DemoComponent} from '../demo.component';
+import {getCanvas, loadExample} from './test_utils';
+
+describe('Example: Music Player', () => {
+  let fixture: ComponentFixture<DemoComponent>;
+  let textContent: string;
+
+  beforeEach(async () => {
+    fixture = await loadExample('Music Player');
+    textContent = getCanvas().textContent;
+  });
+
+  it('should render text content', async () => {
+    expect(textContent).toContain('Blinding Lights');
+    expect(textContent).toContain('The Weeknd');
+    expect(textContent).toContain('1:48');
+    expect(textContent).toContain('4:22');
+  });
+
+  it('should render image', async () => {
+    const img = fixture.nativeElement.querySelector('img');
+    expect(img).toBeTruthy();
+    expect(img.getAttribute('src')).toBe(
+      'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop',
+    );
+  });
+
+  it('should render icons', async () => {
+    expect(textContent).toContain('skip_previous');
+    expect(textContent).toContain('skip_next');
+    expect(textContent).toContain('pause');
+  });
+});