I use MatCheckboxModule from Angular Material in my Angular 5 application.
I have a table with multiple lines and a checkbox to select/deselect all lines from the table :
<mat-checkbox [(ngModel)]="selectAll" (change)="toggleAll()">Toggle</mat-checkbox>
The component part is composed of a selectAll boolean property, a selectedData array property and a toggleAll function. This function fills the selectedData array with all the lines if selectAll is true, otherwise, set the selectedData to empty.
Below, a component code extract:
export class BookingComponent implements OnInit {
booking: Booking;
selectedData: Line[];
private _selectAll: boolean;
ngOnInit() {
this._selectAll = false;
this.selectedData = [];
this.getBooking();
}
get selectAll(): boolean {
return this._selectAll;
}
set selectAll(newValue: boolean) {
this._selectAll = newValue;
}
toggleAll() {
for (const line of this.booking.lines) {
this.selectAll ? this.selectedData.push(line) : this.selectedData = [];
}
}
}
This feature works. However, I don"t know how to test a click which will fill the selectedData array then will empty it. Indeed, in my following code, data are always push in my array because the selectAll property is not changed at the second click :
it(`should toggle all lines`, async(() => {
component.ngOnInit();
const checkbox = fixture.debugElement.nativeElement.querySelector('.select-all-container mat-checkbox label');
checkbox.click();
fixture.whenStable().then(() => {
expect(component.selectedData.length).toEqual(component.booking.briefLines.length);
checkbox.click();
fixture.whenStable().then(() => {
expect(component.selectedData.length).toEqual(0);
});
});
}));
Do you have an idea how to solve this issue?
Thank you!
Aucun commentaire:
Enregistrer un commentaire