Angular Модульный тест: Нажатие кнопки - SPE C НЕ ЖЕЛАЕТ

Question

Я запускаю Angular Юнит-тест с Карма Жасмин. Его тестирование кнопки ввода. Мы получаем записку ниже с двумя тестами, один обычный и один с asyn c.

Кто-нибудь знает, как исправить этот юнит-тест? Другие тесты в компоненте успешно выполняются.

HTML:

<div *ngIf="enableButtonFlag">
    <button class="email-edit-button" mat-icon-button (click)="editSharedFormControl('emailAddress')">
        <mat-icon>edit</mat-icon>
    </button>
</div>

Попытка теста 1:

it('click emailAddress Edit button should allow form control enabled', ()=> {

fixture.whenStable().then(() => {
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  tick();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
  });
});

Результат: тест не завершился неудачей или не прошел:

SPE C НЕТ НИКАКИХ ОЖИДАНИЙ Нажмите кнопку Изменить адрес электронной почты, чтобы включить управление формой

Тест Попытка 2: с Asyn c

it('click emailAddress Edit button should allow form control enabled', async (()  => {

fixture.whenStable().then(() => {
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  tick();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
  }); 
}));

Ошибка: Ошибка: Не выполнено (в обещании): Ошибка типа: Невозможно прочитать свойство 'nativeElement' с нулевым значением Ошибка типа: Ошибка чтения свойства 'nativeElement 'of null

Ресурсы:

Spe c не имеет никаких ожиданий - Жасмин тестирует функцию обратного вызова

Spe c не имеет ошибки консоли ожидания, хотя ожидание присутствует

Answer 1

Для теста № 1 и теста № 2:

• Обязательно удалите ngIf в вашем html или установите соответствующее значение
• fixture.whenStable возвращает обещание, когда все ожидающие обещания выполнены. Это не нужно в обоих случаях.
• Концепция tick существует только тогда, когда тесты выполняются в режиме fakeAsync. Его здесь нет, поэтому он ничего не делает.

Попробуйте:

it('should display emailEdit button', () => {
  // make the requirements to make sure .email-edit-button will be present in the view
  // in essence, it is not blocked by an *ngIf
  fixture.detectChanges();
  const button = fixture.debugElement.query(By.css('.email-edit-button'));
  console.log(button); // see what this logs, make sure it is truthy and a button
  expect(button).not.toBeNull();
});

it('click emailAddress Edit button should allow form control enabled', ()  => {
  // make the requirements to make sure .email-edit-button will be present in the view
  // in essence, it is not blocked by an *ngIf 
  fixture.detectChanges();
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
});

Если вы выполните первый тестовый проход (it should display emailEdit button), второй тест должен быть разблокирован с Cannot read property 'nativeElement' of null