Testen zonenbewusster asynchroner Effekte in signalbasierten Angular-Komponenten mit fakeAsync

import { Component, signal, effect, computed } from '@angular/core';
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 
@Component({ selector: 'app-debounced-search', template: '' })
class DebouncedSearchComponent {
  readonly query = signal('');
  readonly results = signal<string[]>([]);
  private searchCallCount = 0;
 
  constructor() {
    effect((onCleanup) => {
      const term = this.query();
      const handle = setTimeout(() => {
        this.searchCallCount++;
        this.results.set(term ? [`${term}-1`, `${term}-2`] : []);
      }, 300);
      onCleanup(() => clearTimeout(handle));
    });
  }
}
 
describe('DebouncedSearchComponent', () => {
  it('cancels the pending search when the query changes before the debounce fires', fakeAsync(() => {
    const fixture = TestBed.createComponent(DebouncedSearchComponent);
    const component = fixture.componentInstance;
    fixture.detectChanges();
 
    component.query.set('ang');
    tick(100);
    component.query.set('angular');
    tick(300);
    fixture.detectChanges();
 
    expect(component.results()).toEqual(['angular-1', 'angular-2']);
  }));
});