Angular 2 - 在单元测试中获取组件DOM元素的最佳方法

Question

我有一个示例Angular组件模板，如下所示：

<div style="border-bottom: 1px solid lightgray;">
  <br>
  <div class="row">
    <div class="col-md-2 text-center">
      <a (click)="downloadFile()" class="download-file"><i class="fa fa-download fa-fw"></i>&nbsp;Download</a>
    </div>
    <div class="col-md-1 text-center">
      <i [ngClass]="getFileIconClass"></i>
    </div>
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-1"><strong>Name</strong></div>
        <div class="col-md-3">
          <span>{{attachment.fileName}}</span>
        </div>
      </div>
      <div class="row">
        <div class="col-md-1"><strong>Notes</strong></div>
        <div class="col-md-11">
          <span>{{attachment.notes}}</span>
        </div>
      </div>
    </div>
  </div>
  <br>
</div>

我要编写一个单元测试来检查Name和Notes是否包含attachment对象中传递的正确值。

为此，我要从DOM中获取HTMLElement。我需要知道在这种情况下获得HTMLElement的最佳做法是什么。我应该为每个span定义特定的Id / Class属性，如：

...
<span class="fileName">{{attachment.fileName}}</span>
...
<span class="notes">{{attachment.notes}}</span>
...

并获得HTMLElement之类的：

fileNameEl  = fixture.debugElement.query(By.css('.fileName')); // find span element for fileName
notesEl  = fixture.debugElement.query(By.css('.notes')); // find span element for notes element

或者我应该只使用JavaScript函数（例如parentNode，childNodes，firstChild，nextSibling，querySelector等）来在节点之间导航。