在 Angular 单元测试中从 HTML 获取 routerLink 属性

Question

我关注HTML 属性:

   <ul>   
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [routerLink]="['/home']">Home</a>
      </li>
    </ul>

我现在想获取 href 作为单元测试中的值。到目前为止，我的测试用例中有：

  it('should navigate have login navigation', () => {
     const debugElements = fixture.debugElement.queryAll(By.css('a.nav-link'));
     debugElements.forEach(x  => console.log(x.properties['href']));
  });
});

但那是每次undefined。如何从 rounterLink 指令中获取 href？顺便说一下，我不需要做 fixture.detectChanges(); 因为我没有在这个特定的组件中使用生命周期挂钩。

Answer 1

你实际上必须运行 fixture.detectChanges()。这不仅限于生命周期挂钩，还涉及一般的变化检测（Angular 所做的几乎所有 magic）。

我创建了一个 Stackblitz 证明没有 detectChanges 和运行测试失败。

在 Angular 单元测试中从 HTML 获取 routerLink 属性

Get routerLink properties from HTML in Angular unit test

javascript

unit-testing

jasmine

angular

angular-test