Тест Angular Hybrid App "Не удается прочитать свойство 'nativeElement' из null"

Question

У меня есть простой тест:

it ('should be able to navigate to add program', fakeAsync(() => {
  let href = fixture.debugElement.query(By.css('.add-program-btn'));
  let link = href.nativeElement.getAttribute('href');
  expect(link).toEqual('/program/new');
}));

И постоянно получаю сообщение об ошибке:

TypeError: Cannot read property 'nativeElement' of null

Я пытался использовать tick() как 20000 и добавлять fixture.detectChanges(), но ничего не работает. Другой тест, который проверяет, была ли нажата кнопка и вызвана функция, имеет ту же ошибку. Это то, что он не может найти элемент?

Все, что использует этот тест, написано на Angular, поэтому я не думаю, что это потому, что это гибридное приложение.

Заранее спасибо.

Answer 1

Это происходит, когда в шаблоне используется *ngIf, а его выражение принимает ложное значение. Вы должны установить соответствующие входные данные для компонента, чтобы *ngIf мог получить значение true;

Вот пример кода:

it ('should be able to navigate to add program', async(() => {
  const component = fixture.componentInstance;

  // Set particular input so that ngIf makes your href visible to true
  component.inputName = true;

  // run change detection, updated input value should get used
  fixture.detectChanges();

  // in some cases you may want for things to stabilize
  await fixture.whenStable();

  // For debugging prupose, you may want to log innerHTML
  console.log(fixture.debugElement.nativeElement.innerHTML)

  // Rest of the test
  let href = fixture.debugElement.query(By.css('.add-program-btn'));
  let link = href.nativeElement.getAttribute('href');

  expect(link).toEqual('/program/new');
}));