javascript / expert
Snippet
Erstellung benutzerdefinierter ComponentHarness-Abstraktionen für isolierte UI-Tests
Implementierung eines Angular Component Test Harness unter Verwendung von ComponentHarness und HarnessPredicate aus @angular/cdk/testing zur Erstellung robuster Page-Object-Abstraktionen für Integrationstests.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';export class CustomButtonHarness extends ComponentHarness {static hostSelector = 'app-custom-button';static with(options: { text?: string }): HarnessPredicate<CustomButtonHarness> {return new HarnessPredicate(CustomButtonHarness, options).addOption('text', options.text, (harness, text) =>HarnessPredicate.stringMatches(harness.getText(), text));}async getText(): Promise<string> {const host = await this.host();return host.text();}}
angular
Erklärung
1
export class CustomButtonHarness extends ComponentHarness
Erweitert die CDK ComponentHarness-Basisklasse zur Kapselung von UI-Abfrage-Logik für Komponententests.
2
static hostSelector = 'app-custom-button';
Definiert den CSS-Selektor, den das Harness-Framework zur Lokalisierung der Komponente im DOM nutzt.
3
static with(options: { text?: string }): HarnessPredicate<CustomButtonHarness>
Konfiguriert dynamische Prädikate, mit denen Tests Komponenteninstanzen nach Eigenschaften wie Textinhalt filtern können.
4
const host = await this.host();
Ruft asynchron das TestElement-Wrapper-Objekt ab, das den Host-DOM-Knoten repräsentiert.