title: Angular unit test image load with Jasmine
body: <p>In my angular project I have a directive that display a default icon before the real avatar was loaded.</p>
  
  <pre><code>function avatarDirective(API) {
  
      var DEFAULT_AVATAR = 'img/default-avatar.png';
  
      return {
        restrict    : 'A',
        scope       : {
          avatarUrl: '='
        },
        link: linkFunc
      };
  
  
      function linkFunc($scope, $element) {
        $element.attr('src', DEFAULT_AVATAR);
  
        $scope.$watch(function() {
          return $scope.avatarUrl;
        }, _setAvatar);
  
  
        function _setAvatar() {
          if ($scope.avatarUrl) {
  
            var avatar = new Image();
            avatar.onload = function() {
              $element.attr('src', API.BASE_URL + $scope.avatarUrl);
            }
            avatar.src = API.BASE_URL + $scope.avatarUrl;
          }
        }
      }
  
    }
  </code></pre>
  
  <p>This code works correctly without problem.
  But I'm unable to test it with Karma. Indeed the load function is never trigger. Here is my test below.</p>
  
  <pre><code>it('should set the default avatar if avatar-url is empty', function(done) {
      element = angular.element('&lt;img class="img-circle" dod-avatar avatar-url="avatar"/&gt;');
      element = $compile(element)($scope);
      $scope.avatar = 'img/new-avatar.png';
      $scope.$digest();
  
      expect(element.attr('src')).toContain('img/new-avatar.png'); // FAILED
  
    });
  </code></pre>
  
  <p>Thank you</p>