I need to test click event on mat-table row. Below is my mat-table code
<table
mat-table
[dataSource]="dataSource"
matSort
matSortActive="formCode"
matSortDirection="asc"
>
<caption></caption>
<ng-container matColumnDef="isChecked">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="code">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Référence</th>
<td
mat-cell
*matCellDef="let element"
class="clickable-link"
(click)="openSummary(element.code)"
>
{{ element.code }}
</td>
</ng-container>
</table>
I try to find a row by css and I do something like this:
ngMocks.click('.clickable-link')
; or ngMocks.click('mat-checkbox')
but it return undefined I already try fixture.debugElement.query(By.css('mat-checkbox'))
but nothing changed. This my spec.ts
file:
it('should open summary',async ()=>{
filesService.getFormByCode.and.returnValue(of(formList));
ngMocks.click('.clickable-link');
fixture.detectChanges();
expect(filesService.getFormByCode).toHaveBeenCalled();
})
How can I access click event on the table's row ?
When using mockbuilder, did you
.keep(MatTableModule)
?If you don't, it's probably getting mocked, which means your table probably isn't getting rendered.