Невозможно проверить данные в таблице данных материалов Angular: TypeError: невозможно прочитать свойство 'nativeElement' со значением null

Я пишу модульные тестовые примеры для таблицы материалов 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");
});

person Pritam Bohra    schedule 23.06.2020    source источник


Ответы (1)


Я получил ответ.

Мы не можем использовать fixture.debugElement.query для таблицы данных угловых материалов, вместо этого он работает с fixture.debugElement.nativeElement.querySelector.

Это предлагается в https://medium.com/@penghuili/angular-unit-test-cant-query-material-table-e2c25abc4937

person Pritam Bohra    schedule 24.06.2020