javascript / intermediate
Snippet
Simulation von Button-Klick-Ereignissen in Unit-Tests mit ComponentFixture
Angular-Unit-Tests nutzen ComponentFixture und DebugElement zur Interaktion mit dem gerenderten DOM. Das By.css-Prädikat lokalisiert Zielelemente, während triggerEventHandler simulierte Ereignisse auslöst, um das Komponentenverhalten und Zustandsänderungen sauber zu testen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { ComponentFixture, TestBed } from '@angular/core/testing';import { By } from '@angular/platform-browser';import { CounterComponent } from './counter.component';describe('CounterComponent', () => {let fixture: ComponentFixture<CounterComponent>;let component: CounterComponent;beforeEach(async () => {await TestBed.configureTestingModule({imports: [CounterComponent]}).compileComponents();fixture = TestBed.createComponent(CounterComponent);component = fixture.componentInstance;fixture.detectChanges();});it('should increment count when button is clicked', () => {const buttonDebugEl = fixture.debugElement.query(By.css('button.increment'));buttonDebugEl.triggerEventHandler('click', null);fixture.detectChanges();expect(component.count()).toBe(1);});});
angular
Erklärung
1
const buttonDebugEl = fixture.debugElement.query(By.css('button.increment'));
Durchsucht den Debug-DOM-Baum der Fixture nach einem Button mit der spezifischen CSS-Klasse.
2
buttonDebugEl.triggerEventHandler('click', null);
Löst ein synthetisches Klick-Ereignis über Angulars Event-Listener-Schicht aus, ohne nativen DOM-Zugriff zu erfordern.
3
fixture.detectChanges();
Löst die Change Detection aus, um Bindungen und Signal-Auswertungen nach der Ereignisausführung zu aktualisieren.