javascript / intermediate
Snippet
Komponenten-Unit-Testing mit Angular Component Harnesses
Angular CDK Component Harnesses bieten eine Abstraktionsschicht über Komponenten-Interna für Unit-Tests. Anstatt rohe DOM-Elemente über CSS-Selektoren abzufragen, die bei Markup-Änderungen brechen, stellen Harnesses eine offiziell typisierte API bereit, die Benutzerinteraktionen nachahmt und Tests vor DOM-Refaktorisierungen schützt.
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
import { ComponentFixture, TestBed } from '@angular/core/testing';import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';import { MatButtonHarness } from '@angular/material/button/testing';import { SubmitButtonComponent } from './submit-button.component';describe('SubmitButtonComponent', () => {let fixture: ComponentFixture<SubmitButtonComponent>;beforeEach(async () => {await TestBed.configureTestingModule({imports: [SubmitButtonComponent]}).compileComponents();fixture = TestBed.createComponent(SubmitButtonComponent);});it('should disable submit button when processing', async () => {const loader = TestbedHarnessEnvironment.loader(fixture);const buttonHarness = await loader.getHarness(MatButtonHarness.with({ text: 'Submit' }));fixture.componentInstance.isProcessing.set(true);const isDisabled = await buttonHarness.isDisabled();expect(isDisabled).toBe(true);});});
angular
Erklärung
1
const loader = TestbedHarnessEnvironment.loader(fixture);
Initialisiert den Harness-Loader, der an das Testbed-Fixture-Environment gebunden ist.
2
const buttonHarness = await loader.getHarness(MatButtonHarness.with({ text: 'Submit' }));
Sucht das Material-Button-Harness basierend auf Filterkriterien wie dem Beschriftungstext.
3
const isDisabled = await buttonHarness.isDisabled();
Fragt den Deaktivierungsstatus des Buttons asynchron über die Harness-Schnittstelle ab, ohne das DOM direkt zu inspizieren.