Angular 2 - Best way to get a DOM component of a component in a unit test

I have a sample Angular component template as shown below:

<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>

      

        
        
        
      

    

I have to write a unit test to check if Name

and the Notes

correct value in the object matches attachment

.

For this I have to get HTMLElement

from the DOM. I need to know what is best to get HTMLElement

in this case. Should I define a specific Id / Class attribute for each span

, for example:

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

      

        
        
        
      

    

and get HTMLElement

like:

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

      

        
        
        
      

    

or should I just use a JavaScript function (eg, parentNode

, childNodes

, firstChild

, nextSibling

, querySelector

, etc.) to move between nodes.