title: How to actually trigger a click event and check the outcome in Angular2
body: <p>I want to actually check, that the <em>selected</em> attribute has been rendered with a true instead of an undefined.</p>
  
  <p>My working (manually tested) Component functionality:</p>
  
  <pre><code>export class PlayerSelectorComponent implements OnInit {
  
      players: any = []
  
      ...
  
      toggleSelectPlayer( player: any ) {
          if (player.selected) {
              player.selected = false
          }
          else {
              player.selected = true
          }
      }
  
  }
  </code></pre>
  
  <p>Here is the template:</p>
  
  <pre><code> &lt;ul class="list-group"&gt;
       &lt;player-row *ngFor="let player of players"
                   [player]="player"
                   [selected]="player.selected"
                   (click) = "toggleSelectPlayer(player)"&gt;
       &lt;/player-row&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the test code:</p>
  
  <pre><code>it( 'should render a player as selected after a user clicks on the player row', fakeAsync( () =&gt; {
      let player = fixture.debugElement.query( By.css( '.player-row' ) )
      expect( player.attributes.selected ).toBe( undefined )
      player.triggerEventHandler( 'click', null )
      tick()
      fixture.detectChanges()
      player = fixture.debugElement.query( By.css( '.player-row' ) )
      expect( player.attributes.selected ).toBeTruthy() // Expected undefined to be truthy
  } ) )
  </code></pre>
  
  <p><strong>In the last line of the code, you can see, that my tests do not detect that the player.attributes.selected is actually changed after the click. It remains to be undefined..</strong></p>