title: How do I test angularjs directive to spy on the function call?
body: <p>Code below executes but complains about element.popover not being invoked. I can't seem to figure out what the issue is.</p>
  
  <p>Thanks for help in advance.</p>
  
  <p><strong>directive:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('directives', []).
  
  directive('popOver', function ($http) {
  
      return {
          restrict:'C',
  
          link: function (scope, element, attr) {
              element.bind('mouseover', function (e) {
                  $http.get("someurl" + attr.chatid + ".json").success(function (data) {
                      element.popover({content: data.firstName + " " + data.lastName });
                  });
              });
          }
      }
  })
  </code></pre>
  
  <p><strong>Jasmine test:</strong>
  </p>
  
  <pre><code>'user strict'
  
  describe('directives', function() {
      beforeEach(module('directives'));
      describe('popOver', function() {
      var $scope, compile, location,  $httpBackend, elm;
  
      beforeEach(inject(function($rootScope, $compile, _$httpBackend_) {
          $scope = $rootScope.$new();
          compile = $compile;
          $httpBackend = _$httpBackend_;
          elm = angular.element('&lt;i class="pop-over" data-placement="top" data-chatid="testChatId" &gt; &lt;/i&gt;');
          compile(elm)($scope);
  
      }));
  
      it('should call element.popover()', function() {
          $httpBackend.expectGET('someurl/testChatId.json').
              respond([ {firstName: 'test', lastName: 'user'}]);
  
          spyOn(elm, 'popover').andCallThrough();
  
          elm.trigger('mouseover');
          $httpBackend.flush();
  
          expect(elm.popover).toHaveBeenCalled();
      });
    });
  });
  </code></pre>
  
  <p><strong>Output:</strong></p>
  
  <pre><code>Chrome 26.0 (Mac) directives popOver should call element.popover() FAILED
  Expected spy popover to have been called.
  Error: Expected spy popover to have been called.
  </code></pre>