javascript / intermediate
Snippet
Überprüfen von Komponentenaufrufen und DOM-Ereignissen mit Jasmine Spies
Das Testen von Angular-Komponenten umfasst das Erstellen einer Testumgebung (TestBed), das Abfragen von DOM-Elementen über DebugElements und das Überwachen von Methodenaufrufen mit Jasmine-Spies. So wird sichergestellt, dass Benutzerinteraktionen im Template zuverlässig die entsprechenden TypeScript-Methoden aufrufen.
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
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 trigger increment method upon button click', () => {spyOn(component, 'increment');const buttonElement = fixture.debugElement.query(By.css('button.increment-btn'));buttonElement.triggerEventHandler('click', null);expect(component.increment).toHaveBeenCalledTimes(1);});});
angular
Erklärung
1
await TestBed.configureTestingModule({ imports: [CounterComponent] }).compileComponents();
Initialisiert die Angular-Testmodulumgebung und kompiliert die Vorlagen der Standalone-Komponente.
2
spyOn(component, 'increment');
Setzt einen Jasmine-Spy auf die increment-Methode der Komponente, um Aufrufanzahl und Argumente zu verfolgen.
3
const buttonElement = fixture.debugElement.query(By.css('button.increment-btn'));
Findet das Ziel-Button-Element im DOM mithilfe des By.css-Selektors von Angular.
4
buttonElement.triggerEventHandler('click', null);
Simuliert das Auslösen eines nativen Klick-Events auf dem abgefragten DOM-Element.