Я пишу модульные тестовые примеры для таблицы материалов Angular. Вот фрагмент кода шаблона:
<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>
Я тестирую openAddOrEditDialog
, который открывает файл MatDialog
. Я вставил 2 записи в таблицу данных. Когда я пытаюсь проверить нажатие кнопки редактирования с помощью fixture.debugElement.query(By.css(".btn--edit"))
, я всегда получаю null
, что означает, что записи не отображаются в таблице данных, но когда я запрашиваю таблицу с помощью fixture.debugElement.query(By.css("table"))
, я вижу записи в таблице данных. console.log(fixture.debugElement.query(By.css("table")))
.
Где я ошибаюсь?
Вот мой тестовый пример:
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");
});