title: How to test image events in Angular
body: <p>Let's say we have a simple component that takes some actions on image event</p>
  
  <pre><code>&lt;img src="{{imageUrl}}" (error)="onImageError($event)" (load)="onImageLoad()" width="{{imageWidth}}"&gt;
  </code></pre>
  
  <p>Now I want to test that this event handlers were triggered.</p>
  
  <p>I tried the most simple approach</p>
  
  <pre><code>const spyError = spyOn(component, 'onImageError').and.callThrough();
  
  fixture.detectChanges();
  
  expect(spyError).toHaveBeenCalled();
  </code></pre>
  
  <p>It didn't work because the event loop is out of the execution stack of JavaSctipy. I tried to resolve it with <code>asyn</code> or <code>fakeAsync</code> but it didn't help.</p>
  
  <p>The only worked solution is to use <code>setTimeout</code> inside the tests, which I don't really like.</p>
  
  <p>So, my questions are</p>
  
  <ol>
  <li><p>Shall we test it at all? It looks like part of Angular/browser functionality. I can call <code>component.onImageError()</code> directly in a test.</p></li>
  <li><p>What is the clean way to test that event handler was called?</p></li>
  </ol>