javascript / intermediate
Snippet
Überprüfen benutzerdefinierter Komponenten-Output-Event-Emitter in Angular-Komponententests
Beim Unit-Testing von Angular-Komponenten muss häufig überprüft werden, ob Benutzerinteraktionen im DOM die entsprechenden @Output()-EventEmitter-Ereignisse auslösen. Indem man den EventEmitter direkt im Test abonniert und über fixture.debugElement synthetische Events auslöst, lassen sich die emittierten Werte erfassen und sowohl Nutzdaten als auch Aufrufhäufigkeiten validieren.
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
27
28
import { ComponentFixture, TestBed } from '@angular/core/testing';import { By } from '@angular/platform-browser';import { CounterComponent } from './counter.component';describe('CounterComponent', () => {let component: CounterComponent;let fixture: ComponentFixture<CounterComponent>;beforeEach(async () => {await TestBed.configureTestingModule({imports: [CounterComponent]}).compileComponents();fixture = TestBed.createComponent(CounterComponent);component = fixture.componentInstance;fixture.detectChanges();});it('should emit the updated count value when the increment button is clicked', () => {const emittedValues: number[] = [];component.countChange.subscribe((val: number) => emittedValues.push(val));const incrementButton = fixture.debugElement.query(By.css('[data-testid="btn-inc"]'));incrementButton.triggerEventHandler('click', null);expect(emittedValues).toEqual([1]);});});
angular
Erklärung
1
fixture = TestBed.createComponent(CounterComponent);
Erstellt eine Test-Fixture-Instanz der Komponente, die sowohl die Klasseninstanz als auch das DOM bereitstellt.
2
component.countChange.subscribe((val: number) => emittedValues.push(val));
Abonniert den Output-Event-Emitter der Komponente direkt, um alle während des Tests emittierten Werte aufzuzeichnen.
3
const incrementButton = fixture.debugElement.query(By.css('[data-testid="btn-inc"]'));
Sucht im Debug-DOM-Baum der Fixture nach dem Element mit dem angegebenen CSS-Testattribut.
4
incrementButton.triggerEventHandler('click', null);
Löst den Click-Event-Handler auf dem Debug-Element aus, ohne native Browser-Event-Zyklen zu benötigen.
5
expect(emittedValues).toEqual([1]);
Prüft, ob das Array der erfassten emittierten Werte mit der erwarteten Statusänderung übereinstimmt.