title: Angular 2 - Best way to get component's DOM Element in a unit test
body: <p>I've a sample Angular component template like below:</p>
  
  <pre><code>&lt;div style="border-bottom: 1px solid lightgray;"&gt;
    &lt;br&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-2 text-center"&gt;
        &lt;a (click)="downloadFile()" class="download-file"&gt;&lt;i class="fa fa-download fa-fw"&gt;&lt;/i&gt;&amp;nbsp;Download&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-1 text-center"&gt;
        &lt;i [ngClass]="getFileIconClass"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="col-md-9"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-1"&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;span&gt;{{attachment.fileName}}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-1"&gt;&lt;strong&gt;Notes&lt;/strong&gt;&lt;/div&gt;
          &lt;div class="col-md-11"&gt;
            &lt;span&gt;{{attachment.notes}}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've to write a unit test to check if the <code>Name</code> and <code>Notes</code> contain correct value passed in the <code>attachment</code> object.</p>
  
  <p>For this purpose I've to get the <code>HTMLElement</code>s from the DOM. I need to know what is the best practice to get <code>HTMLElement</code> in this case. Should I define a specific Id/Class attribute for each <code>span</code> like:</p>
  
  <pre><code>...
  &lt;span class="fileName"&gt;{{attachment.fileName}}&lt;/span&gt;
  ...
  &lt;span class="notes"&gt;{{attachment.notes}}&lt;/span&gt;
  ...
  </code></pre>
  
  <p>and get <code>HTMLElement</code> like:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>or should I just use JavaScript functions (like <code>parentNode</code>, <code>childNodes</code>, <code>firstChild</code>, <code>nextSibling</code>, <code>querySelector</code> etc) to navigate between nodes.</p>