angular - Angular 混合应用程序测试“无法读取 null 的属性‘nativeElement’”

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()with like 20000，并添加fixture.detectChanges()但没有任何效果。另一项检查是否单击按钮和调用的函数的测试具有相同的错误。是不是找不到元素？

这个测试使用的所有东西都在 Angular 中，所以我不认为这是因为它是一个混合应用程序。

提前致谢。

Answer 1

当*ngIf在模板中使用并且它的表达式计算为假值时会发生这种情况。您应该为组件设置适当的输入，以便*ngIf评估为真；

这是一些示例代码：

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');
}));