javascript / expert
Snippet
Entkoppelte Integrationstests mit Component Harnesses
Component Harnesses bieten eine Abstraktionsschicht für Tests, die es ermöglicht, über eine stabile API mit Komponenten zu interagieren, anstatt das DOM direkt abzufragen. Dies macht Tests resistent gegen Änderungen in der internen HTML-Struktur oder Updates von Drittanbieter-Bibliotheken.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';import { MatButtonHarness } from '@angular/material/button/testing';it('should click the submit button', async () => {const fixture = TestBed.createComponent(MyComponent);const loader = TestbedHarnessEnvironment.loader(fixture);const button = await loader.getHarness(MatButtonHarness);await button.click();expect(fixture.componentInstance.submitted).toBe(true);});
angular
Erklärung
1
TestbedHarnessEnvironment.loader(fixture)
Erstellt eine HarnessLoader-Instanz, die mit der aktuellen Test-Fixture verknüpft ist.
2
loader.getHarness(MatButtonHarness)
Sucht asynchron nach dem Harness für eine bestimmte Komponente (z. B. einen Angular Material Button).
3
await button.click()
Interagiert mit der Komponente über die High-Level-API des Harnesses und abstrahiert die DOM-Event-Logik.