Как выполнить модульное тестирование кнопки внутри ngfor

Question

У меня есть кнопка внутри тега навигации, которая отображается циклом по списку

<nav *ngFor="let test of getTests(); let last = last">
    <button (click)="clickFunction() ></button>
</nav>

Как получить событие нажатия кнопки во время модульного тестирования?

Этоне работает:

let button = fixture.debugElement.query(By.css('button'));
button.nativeElement.click();

Это дает мне ошибку, говоря, что button является нулевым.

Answer 1

Убедитесь, что getTests() возвращает данные и <button> находится в DOM в том месте, где вы ожидаете, поместив туда оператор debugger.Вам может потребоваться вызвать fixture.detectChanges();, если произойдут какие-то изменения условий, которые заставят getTests() вернуть данные, а DOM будет обновлен с помощью обнаружения изменений.

Я бы также использовал const buttons = fixture.debugElement.queryAll(By.css('button'));, а затем индексировал бы в buttonsв зависимости от обстоятельств, чтобы вы могли различить определенную кнопку среди нескольких.Установка идентифицирующих и динамически генерируемых class или id на кнопках также может быть полезна при различении динамических элементов в *ngFor.

Я также считаю, что обычно проще использовать buttons[0].triggerEventHandler('click', null) вместопроходя через nativeElement, и я использую nativeElement только тогда, когда в debugElement нет более удобного метода.Но вы можете использовать nativeElement, если захотите.