I'm new to Angular and i'm trying to learn how to write tests. I don't understand how to mock and test methods from components.
My HTML is the following: (You have a table with all your certificates. By using the "bewerken" button you can add new certificates. A form will appear that you can fill in then add the certificates to the table)
<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" formControlName="institute">
<p *ngIf="institute?.invalid && (institute?.dirty || institute?.touched)"
>
Dit veld is verplicht
</p>
<label for="name">Naam</label>
<input id="name" type="text" formControlName="name">
<p *ngIf="name?.invalid && (name?.dirty || name?.touched)"
>
Dit veld is verplicht
</p>
<label for="description">Omschrijving</label>
<input id="description" type="text" formControlName="description">
<p *ngIf="description?.invalid && (description?.dirty || description?.touched)"
>
Dit veld is verplicht
</p>
<label for="achievementDate">Datum behaald</label>
<input id="achievementDate" type="date" formControlName="achievementDate"/>
<p *ngIf="achievementDate?.invalid && (achievementDate?.dirty || achievementDate?.touched)"
>
Dit veld is verplicht
</p>
<label for="expirationDate">Datum verloop</label>
<input id="expirationDate" type="date" formControlName="expirationDate"/>
<p *ngIf="expirationDate?.invalid && (expirationDate?.dirty || expirationDate?.touched)"
>
Dit veld is verplicht
</p>
<p *ngIf="invalidDates" >De datum van verloop mag zich niet voor de datum van behaald
bevinden.</p>
<label for="url">Url</label>
<input id="url" type="url" formControlName="url">
<button id="submitButton" type="submit" [disabled]="!certificateForm.valid">Voeg toe</button>
</form>
</div>
<div id="certificatesTabelBox" *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)" *ngIf="edit">
<mat-icon aria-hidden="false" aria-label="delete icon" >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>
My certificates.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}));
}
}
My current testfile I am trying to write:
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);
});
});
I would love to test the onSubmit, validateDateRange, saveCertificates & removeDegree. Thanks for helping and have a lovely weekend!
CodePudding user response：
Below mentioned is a great resource for getting to know about angular testing: you will find step by step understanding of testing in angular. Testing Angular Components
CodePudding user response：
An issue I see is that in the ngOnInit, you're subscribing to the store but you're not unsubscribing ever. This will lead to a leak where at one point in time this component is not even on the screen (it is destroyed) but that subscription will still be running.
Do this to fix it:
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();
}
What I have shown is the most beginner way on unsubscribing. There are more sophisticated ways of unsubscribing as well: https://medium.com/angular-in-depth/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0.
As for the test, I will give you an example for how to test the 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 invalid 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();
});
That's an example for the onSubmit. That should hopefully get you started for saveCertificates, and removeDegree and the rest.