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。

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

...
<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）在节点之间导航。