Test a signal component in production-like zoneless mode

Test the signal-driven product list with zoneless change detection. Set its required input through Angular, type into the real search field, select a row, replace the parent input, and verify the DOM after whenStable. Do not add repeated detectChanges calls to make plain-field mutations visible.

set products -> all rows render
dispatch input "mo" -> filtered rows render after stability
click Mouse -> aria-pressed true
replace products without Mouse -> no stale selected row

• Enable zoneless change detection in TestBed.
• Use componentRef.setInput for the required input.
• Use real DOM input and click events.
• Await fixture.whenStable() after Angular notifications.
• Assert visible behavior and accessibility state.

1. Create the fixture with provideZonelessChangeDetection.
2. Set the products input through the component reference and await rendering.
3. Change the input element value and dispatch an input event.
4. Click a result button and inspect its pressed state.
5. Replace the products input and prove removed state no longer appears.

import {provideZonelessChangeDetection} from '@angular/core';
import {TestBed} from '@angular/core/testing';

it('filters and reconciles selection in zoneless mode', async () => {
  TestBed.configureTestingModule({
    imports: [ProductList],
    providers: [provideZonelessChangeDetection()],
  });
  const fixture = TestBed.createComponent(ProductList);
  fixture.componentRef.setInput('products', [
    {id: 'k', name: 'Keyboard'},
    {id: 'm', name: 'Mouse'},
    {id: 'd', name: 'Monitor'},
  ]);
  await fixture.whenStable();

  const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
  input.value = 'mo';
  input.dispatchEvent(new Event('input'));
  await fixture.whenStable();

  const mouse = [...fixture.nativeElement.querySelectorAll('button')]
    .find((button: HTMLButtonElement) => button.textContent?.includes('Mouse'))!;
  mouse.click();
  await fixture.whenStable();
  expect(mouse.getAttribute('aria-pressed')).toBe('true');

  fixture.componentRef.setInput('products', [{id: 'd', name: 'Monitor'}]);
  await fixture.whenStable();
  expect(fixture.componentInstance.selectedProduct()).toBeNull();
});

The test creates one fixture and performs O(n) DOM queries over a small controlled list.

• The required input must be set before the first completed render that reads it.
• Changing input.value without dispatching an input event does not notify Angular.
• A stored element reference can become detached after input replacement.
• Existing Zone-based suites may retain intentional detectChanges usage during gradual migration.

• Remove the input event dispatch and prove the test catches the stale view.
• Use new objects with the same IDs and verify the visible row remains correct.
• Filter to no results and assert the empty state.
• Verify no arbitrary timeout is required.

• Directly mutating a component field bypasses the public Angular contract.
• Calling detectChanges after every line can hide missing notifications.
• Setting an input element value without an event leaves the component unaware.
• Asserting only computed state misses a broken template.