title: Angular mock method on element
body: <p>I am testing a directive, where I use the library <code>Mobiscroll</code>. I know that Mobiscroll also has a angular components but I am using older versions of the Mobiscroll library at the moment, so I am not interested in that. </p>
  
  <p>The problem is, I want to test if a method on the element is called, in this case the mobiscroll method. I have the following code the link method of my directive:</p>
  
  <pre><code>link: function (scope, element, attr) {
     var datepicker = element.find("input");
  
     scope.showDate = function () {           
         datepicker.mobiscroll('show');
     };
  }
  </code></pre>
  
  <p>I want to check in my Jasmine tests, if <code>datepicker.mobiscroll('show')</code> is called. However I cannot set a spy on the element in my tests, because a lookup of the element will not result in the exact same object used in my link method in the directive. For example the following does not work:</p>
  
  <pre><code>    targetElement = $compile(elementBluePrint)($scope);
      rootScope.$apply();
      var target = targetElement.find("input");
      spyOn(target, "mobiscroll").and.callThrough();
  </code></pre>
  
  <p>Because this does not work, how can I spy on the mobiscroll method in my Angular Jasmine tests?</p>