Angular如何测试组件方法？
Posted
技术标签:
【中文标题】Angular如何测试组件方法？【英文标题】：Angular how to test component methods? 【发布时间】：2022-01-15 07:15:49 【问题描述】：我是 Angular 的新手，我正在尝试学习如何编写测试。我不明白如何从组件中模拟和测试方法。
我的 html 如下：（您有一个包含所有证书的表格。通过使用“bewerken”按钮，您可以添加新证书。将出现一个表格，您可以填写然后将证书添加到表格中）
<h1>Certificaten</h1>
<button id="editButton" *ngIf="!edit" (click)="edit = !this.edit">Bewerken</button>
<button id="saveButton" *ngIf="edit" (click)="saveCertificates()">Opslaan</button>
<div id="certificatesFormBox" *ngIf="edit">
<h2>Voeg opleidingen toe</h2>
<form id="addCertificateForm" [formGroup]="certificateForm" (ngSubmit)="onSubmit()">
<label for="institute">Instituut</label>
<input id="institute" type="text" class="form-control" formControlName="institute">
<p *ngIf="institute?.invalid && (institute?.dirty || institute?.touched)"
class="alert alert-danger">
Dit veld is verplicht
</p>
<label for="name">Naam</label>
<input id="name" type="text" class="form-control" formControlName="name">
<p *ngIf="name?.invalid && (name?.dirty || name?.touched)"
class="alert alert-danger">
Dit veld is verplicht
</p>
<label for="description">Omschrijving</label>
<input id="description" type="text" class="form-control" formControlName="description">
<p *ngIf="description?.invalid && (description?.dirty || description?.touched)"
class="alert alert-danger">
Dit veld is verplicht
</p>
<label for="achievementDate">Datum behaald</label>
<input id="achievementDate" type="date" class="form-control" formControlName="achievementDate"/>
<p *ngIf="achievementDate?.invalid && (achievementDate?.dirty || achievementDate?.touched)"
class="alert alert-danger">
Dit veld is verplicht
</p>
<label for="expirationDate">Datum verloop</label>
<input id="expirationDate" type="date" class="form-control" formControlName="expirationDate"/>
<p *ngIf="expirationDate?.invalid && (expirationDate?.dirty || expirationDate?.touched)"
class="alert alert-danger">
Dit veld is verplicht
</p>
<p *ngIf="invalidDates" class="alert alert-danger">De datum van verloop mag zich niet voor de datum van behaald
bevinden.</p>
<label for="url">Url</label>
<input id="url" type="url" class="form-control" formControlName="url">
<button id="submitButton" type="submit" [disabled]="!certificateForm.valid">Voeg toe</button>
</form>
</div>
<div id="certificatesTabelBox" class="mat-elevation-z8" *ngIf="certificates$ | async as certificateList">
<h2>Mijn Certificaten</h2>
<table mat-table [dataSource]="certificateList">
<ng-container matColumnDef="institute">
<th mat-header-cell *matHeaderCellDef>Instituut</th>
<td mat-cell *matCellDef="let certificate"> certificate.institute </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let certificate"> certificate.name </td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let certificate"> certificate.description </td>
</ng-container>
<ng-container matColumnDef="achievementDate">
<th mat-header-cell *matHeaderCellDef>AchievementDate</th>
<td mat-cell *matCellDef="let certificate"> certificate.achievementDate </td>
</ng-container>
<ng-container matColumnDef="expirationDate">
<th mat-header-cell *matHeaderCellDef>ExpirationDate</th>
<td mat-cell *matCellDef="let certificate"> certificate.expirationDate </td>
</ng-container>
<ng-container matColumnDef="url">
<th mat-header-cell *matHeaderCellDef>Url</th>
<td mat-cell *matCellDef="let certificate"> certificate.url </td>
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let certificate; index as i">
<a (click)="removeDegree(i)" class="link-dark rounded btn rounded custom-style" *ngIf="edit">
<mat-icon aria-hidden="false" aria-label="delete icon" class="icon-style">delete</mat-icon>
</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
我的证书.component.ts
import Component, OnInit from '@angular/core';
import MatTableDataSource from "@angular/material/table";
import Certificate from "../../../models";
import Observable from "rxjs";
import FormBuilder, Validators from "@angular/forms";
import Store from "@ngrx/store";
import State from 'src/app/state/app.state';
import getUser from "../../../state/user/user.reducer";
import getCertificates from "../../../state/education/education.reducer";
import EducationPageActions from "../../../state/education/actions";
@Component(
selector: 'app-my-certificates',
templateUrl: './my-certificates.component.html',
styleUrls: ['./my-certificates.component.css']
)
export class MyCertificatesComponent implements OnInit
certificateForm = this.fb.group(
institute: ['', Validators.required],
name: ['', Validators.required],
description: ['', Validators.required],
achievementDate: ['', Validators.required],
expirationDate: ['', Validators.required],
url: [''],
)
edit: boolean = false;
invalidDates: boolean = false;
displayedColumns: string[] = ['institute', 'name', 'description', 'achievementDate', 'expirationDate', 'url', 'delete'];
userId: string = "";
dataSource!: MatTableDataSource<Certificate>;
certificates!: Certificate[];
certificates$: Observable<Certificate[]> | undefined;
constructor(private fb: FormBuilder, private store: Store<State>)
ngOnInit(): void
this.store.select(getUser).subscribe(
user => this.userId = user.id; this.store.dispatch(EducationPageActions.loadCertificates(id: this.userId)); );
this.certificates$ = this.store.select(getCertificates);
onSubmit()
this.invalidDates = this.validateDateRange();
if (this.invalidDates)
return;
let newCertificate = new Certificate(this.certificateForm.value.institute, this.certificateForm.value.name, this.certificateForm.value.description, this.certificateForm.value.achievementDate, this.certificateForm.value.expirationDate, this.certificateForm.value.url);
this.store.dispatch(EducationPageActions.addCertificate(certificate: newCertificate))
this.certificateForm.reset();
get institute()
return this.certificateForm.get('institute');
get name()
return this.certificateForm.get('name');
get description()
return this.certificateForm.get('description');
get achievementDate()
return this.certificateForm.get('achievementDate');
get expirationDate()
return this.certificateForm.get('expirationDate');
get url()
return this.certificateForm.get('url');
validateDateRange()
return this.certificateForm.get('achievementDate')?.value > this.certificateForm.get('expirationDate')?.value;
saveCertificates()
this.edit = !this.edit;
this.certificates$?.subscribe((certificates) =>
this.certificates = certificates;
);
this.store.dispatch(EducationPageActions.saveCertificates(certificates: this.certificates));
removeDegree(index: number)
this.store.dispatch(EducationPageActions.removeCertificate(index));
我正在尝试编写的当前测试文件：
import ComponentFixture, TestBed from '@angular/core/testing';
import MyCertificatesComponent from './my-certificates.component';
import FormsModule, ReactiveFormsModule from "@angular/forms";
import StoreModule from "@ngrx/store";
import educationReducer from "../../../state/education/education.reducer";
import userReducer from "../../../state/user/user.reducer";
import MatTableModule from "@angular/material/table";
describe('MyCertificatesComponent', () =>
let component: MyCertificatesComponent;
let fixture: ComponentFixture<MyCertificatesComponent>;
beforeEach(async () =>
await TestBed.configureTestingModule(
imports: [FormsModule, ReactiveFormsModule,
StoreModule.forRoot(education: educationReducer, user: userReducer, ),
MatTableModule],
declarations: [ MyCertificatesComponent ]
)
.compileComponents();
);
beforeEach(() =>
fixture = TestBed.createComponent(MyCertificatesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
);
it('should create', () =>
expect(component).toBeTruthy();
);
/* Html testen*/
it('Should contain h1 with "Certificaten"', () =>
const h1 = fixture.debugElement.nativeElement.querySelector('h1');
expect(h1.textContent).toContain('Certificaten');
);
it('Should contain h2 with "Mijn Certificaten"', () =>
const h2 = fixture.debugElement.nativeElement.querySelector('h2');
expect(h2.textContent).toContain('Mijn Certificaten');
);
it('Should click button and reveal form', () =>
const button = fixture.debugElement.nativeElement.querySelector('#editButton');
button.click();
expect(component.edit).toBeTruthy();
);
it('Should have 6 form inputs after edit button click', () =>
const button = fixture.debugElement.nativeElement.querySelector('#editButton');
button.click();
fixture.detectChanges();
const formElement = fixture.debugElement.nativeElement.querySelector('#addCertificateForm')
const inputElements = formElement.querySelectorAll('input');
expect(inputElements.length).toBe(6);
);
it('Should have 6 form labels after edit button click', () =>
const button = fixture.debugElement.nativeElement.querySelector('#editButton');
button.click();
fixture.detectChanges();
const formElement = fixture.debugElement.nativeElement.querySelector('#addCertificateForm')
const inputElements = formElement.querySelectorAll('label');
expect(inputElements.length).toBe(6);
);
it('Should be false if button is not clicked', () =>
expect(component.edit).toBeFalse();
);
/*Initial value testing*/
it('Check initial add certificate form values', () =>
const addCertificateFormGroup = component.certificateForm;
const addCertificatesFormValues =
institute: '',
name: '',
description: '',
achievementDate: '',
expirationDate: '',
url: ''
;
expect(addCertificateFormGroup.value).toEqual(addCertificatesFormValues);
)
/*Testing methods*/
it('should handle onSubmit correctly', () =>
const addCertificateFormGroup = component.certificateForm;
const addCertificatesFormValues =
institute: 'PXL',
name: 'Professionele Bachelor in Informatica',
description: 'FullStack Development',
achievementDate: '23/06/2021',
expirationDate: '23/06/2030',
url: ''
;
addCertificateFormGroup.setValue(addCertificatesFormValues);
component.onSubmit();
expect(component.certificates[0].name).toEqual(addCertificatesFormValues.name);
);
);
我很想测试 onSubmit、validateDateRange、saveCertificates 和 removeDegree。感谢您的帮助，祝您周末愉快！
【问题讨论】：
【参考方案1】：我看到的一个问题是，在ngOnInit 中，您订阅了商店，但您从未取消订阅。这将导致泄漏，有时该组件甚至不在屏幕上（它已被销毁），但订阅仍将运行。
这样做来修复它：
export class MyCertificatesComponent implements OnInit, OnDestroy
...
private storeSubscription: Subscription;
ngOnInit(): void
this.storeSubscription = this.store.select(getUser).subscribe(
user => this.userId = user.id; this.store.dispatch(EducationPageActions.loadCertificates(id: this.userId)); );
this.certificates$ = this.store.select(getCertificates);
ngOnDestroy(): void
this.storeSubcription.unsubscribe();
我所展示的是最初级的退订方式。还有更复杂的退订方式：https://medium.com/angular-in-depth/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0。
至于测试，我举个例子告诉你如何测试onSubmit。
it('does not dispatch addCertificate and reset the form if the dates are invalid', () =>
const store = TestBed.inject(Store);
const dispatchSpy = spyOn(store, 'dispatch').and.callThrough();
const formResetSpy = spyOn(component.certificateForm, 'reset').and.callThrough();
// set invalid date
component.achievementDate.setValue('01/01/2020');
component.expirationDate.setValue('01/01/2019');
// call onSubmit
component.onSubmit();
// expect these not to be called
expect(dispatchSpy).not.toHaveBeenCalled();
expect(formResetSpy).not.toHaveBeenCalled();
);
it('does dispatch addCertificate and reset the form if the dates are valid', () =>
const store = TestBed.inject(Store);
const dispatchSpy = spyOn(store, 'dispatch').and.callThrough();
const formResetSpy = spyOn(component.certificateForm, 'reset').and.callThrough();
// set valid date
component.achievementDate.setValue('01/01/2020');
component.expirationDate.setValue('01/01/2021');
// call onSubmit
component.onSubmit();
// expect these to be called
expect(dispatchSpy).toHaveBeenCalled();
expect(formResetSpy).toHaveBeenCalled();
);
这是onSubmit 的示例。这有望让您开始使用 saveCertificates 和 removeDegree 以及其余部分。
【讨论】：
嘿，阿里，您上面的回答非常完美，帮助我测试了所有组件！我也尝试过测试我的服务，但遇到了一些问题：link以上是关于Angular如何测试组件方法？的主要内容，如果未能解决你的问题，请参考以下文章
如何在多个 Angular 2 项目之间共享一个 Angular 2 组件？