title: How to mock jQuery Method in Unit-Test for an Angular directive
body: <p>I try to test a simple directive which enables a user to select the whole text after a click onto that given element. But I stuck as i can't figure out how the test the call of <code>element.select()</code>.</p>
  
  <p>Here is a fiddle to work with: <a href="http://jsfiddle.net/m59zocf1/" rel="nofollow">http://jsfiddle.net/m59zocf1/</a></p>
  
  <h2>Directive</h2>
  
  <pre><code>/**
   * @ngdoc directive
   * @name Common.directive:clickSelect
   * @restrict A
   * @element ANY
   */
  angular.module('Common').directive('clickSelect', function () {
      return {
          restrict: 'A',
          link: function (scope, element) {
              element.bind('click', function () {
                  element.select();
              });
          }
      };
  });
  </code></pre>
  
  <h2>Test</h2>
  
  <pre><code>/**
   * @module test.Common
   * @name clickSelect
   */
  describe('Directive: Common.clickSelect', function () {
      var ele, scope;
  
      beforeEach(module('Common'));
      beforeEach(inject(function ($compile, $rootScope) {
          scope = $rootScope.$new();
          ele = angular.element('&lt;div&gt;&lt;input click-select type="text" class="link" readonly /&gt;&lt;/div&gt;');
          $compile(ele)(scope);
          scope.$apply();
      }));
  
      it('should render html', function () {
          expect(ele.length).toBe(1);
      });
  
      it('should select the text after click', function () {
          ele.trigger('click');
          // does not work.
          expect(ele.select).toHaveBeenCalled();
      });
  });
  </code></pre>
  
  <h2>Working test case:</h2>
  
  <pre><code>it('should select the text after click', function () {
      spyOn($.fn, 'select').and.callThrough();
      ele.trigger('click');
      scope.$apply();
      expect($.fn.select).toHaveBeenCalled();
  });
  </code></pre>