title: how to test 'ng-click' event in directive with jasmine
body: <p>I want to test the 'ng-click' event in angular with jasmine,But I don't know how </p>
  
  <p>My directive file is like this (headbarDirective.js):</p>
  
  <pre><code> (function () {
          angular.module('app.widgets.homeHeadbar',[])
              .directive('homeHeadbar', homeHeadbar);
  
          function homeHeadbar() {
              return {
                  restrict: 'EAC',
                  replace: true,
                  transclude: false,
                  scope: {
                      name: '@',
                      role: '@',
                  },
                  templateUrl: 'app/widgets/headbar/headbarView.html',
                  link: function(scope, ele, attrs) {
                      if (!scope.name) {
                          scope.logined = false;
                      } else {
                          scope.logined = true;
                      }
                      scope.logout = function() {
                          UserService.logout();
                          $location.path('/login');
                  };
                  }
              };
          }
      })();
  </code></pre>
  
  <p>my template file like this (headbarView.html):</p>
  
  <pre><code> &lt;nav&gt;
    &lt;div&gt;
      &lt;div class="navbar-right" ng-show="logined"&gt;
  
        &lt;div class="dib fr ml20"&gt;
           &lt;div class="user-name cwh"&gt;{{name}}&lt;/div&gt;
           &lt;div class="user-position cgray"&gt;{{role}}&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;a class="logout" href="javascript:;" ng-click="logout()"&gt;Log Out&lt;/a&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and my test file is like this(test.js):</p>
  
  <pre><code>describe('test the headbarDirective',function(){
  
      beforeEach(module('templates','app','app.widgets.homeHeadbar'));
  
      var scope,ele,compile,simpleHtml,UserService,location;
  
      beforeEach(inject(function(_$rootScope_,_$compile_,_UserService_,_$location_){
          compile = _$compile_;
          scope = _$rootScope_.$new();
          location = _$location_;
          UserService = _UserService_;
      }));
  
      it('test the logout click',function(){
          simpleHtml = '&lt;home-headbar name="John" role=2&gt;&lt;/home-headbar&gt;';
          ele = compile(angular.element(simpleHtml))(scope);
          scope.$digest();
  
          spyOn(UserService,'logout').and.callThrough();
  
          $(ele).find('.logout').click();
          scope.$digest();
  
          expect(UserService.logout).toHaveBeenCalled();
      });
  });
  </code></pre>
  
  <p>and the test failed, <strong>console</strong> result like this :</p>
  
  <pre><code>Chrome 43.0.2357 (Windows 7 0.0.0) test the headbarDirective test the logout cli
  ck FAILED
          Expected spy logout to have been called.
              at Object.&lt;anonymous&gt; (C:/Users/IBM_ADMIN/desk/workspace/WaterFundWe
  b/WebContent/test/unit/widgets/headbar/headbarDirective.js:48:30)
  Chrome 43.0.2357 (Windows 7 0.0.0): Executed 11 of 11 (1 FAILED) (0 secs / 0.124
  Chrome 43.0.2357 (Windows 7 0.0.0): Executed 11 of 11 (1 FAILED) (0.125 secs / 0
  .124 secs)
  </code></pre>
  
  <p>means that the logout function hasn't been called.
  is there something wrong with my code ?how could I test the ng-click event?</p>