I am writing unit test cases for Angular material table. Here's the template code snippet:
<table mat-table [dataSource]="dataSource" matSort>
<!-- Edit/Delete -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef>
<div class="mat-table-header">Action</div>
</th>
<td mat-cell *matCellDef="let type">
<div class="row-action">
<button class="btn--delete" mat-icon-button aria-label="delete button" (click)="openDeleteDialog(type)">
<span class="icon-delete"></span>
</button>
<button class="btn--edit" mat-icon-button aria-label="edit button"
(click)="openAddOrEditDialog(category.TYPE, type)">
<span class="icon-edit"></span>
</button>
</div>
</td>
</ng-container>
<!-- Type Name -->
<ng-container matColumnDef="avtName">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">Type</th>
<td mat-cell *matCellDef="let type">{{ type.avtName }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let type; columns: displayedColumns"></tr>
</table>
I am testing the openAddOrEditDialog which opens a MatDialog. I have inserted 2 records into the data table. When I try to test the clicking of the edit button by using fixture.debugElement.query(By.css(".btn--edit")), I always get null, meaning the records didn't get rendered in the data table, but, when I query the table using fixture.debugElement.query(By.css("table")), I can see the records in the console.log(fixture.debugElement.query(By.css("table"))).
Where am I going wrong?
Here's my test case:
it(`some description`, () => {
const spy = jest.spyOn(notificationService, "notifySuccess");
const editBtn: HTMLElement = fixture.debugElement.query(By.css(".btn--edit"))
.nativeElement;
editBtn.click();
expect(spy).toBeCalledWith("Type was successfully updated");
});
