title: Angular testing click event
body: <p>At the moment I'm trying to learn more about testing in Angular (v2+), but I'm stuck at testing click events in a *ngFor loop.</p>
  
  <p>This is the HTML-code:</p>
  
  <pre><code>&lt;div *ngIf="selectedHero"&gt;...&lt;/div&gt;
  &lt;ul class="heroes"&gt;
    &lt;li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero"&gt;
      &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is the onSelect event:</p>
  
  <pre><code>onSelect(hero:Hero):void{
      this.selectedHero = hero;
  }
  </code></pre>
  
  <p>I have two questions:</p>
  
  <ol>
  <li>How to write a test that checks if the click event works?</li>
  <li>How to write a test that makes the div element visible when the variable selectedHero is set?</li>
  </ol>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Update</strong>
  I wrote the following test to check the click event:</p>
  
  <pre><code>it('should trigger a click event', () =&gt; {
    fixture.detectChanges();
    fixture.whenStable().then(() =&gt; {
      let comp = fixture.componentInstance;
      spyOn(comp, 'onSelect');
  
      let el = fixture.debugElement.query(By.css('li')).nativeElement.click();
      expect(comp.onSelect).toHaveBeenCalled();
    });
  });
  </code></pre>