title: How can I simulate a click event in my AngularJS directive test?
body: <p>I've tried following the format of the <a href="https://github.com/vojtajina/ng-directive-testing/blob/master/test/tabsSpec.js">ng-directive-testing</a> repo for a directive I've written. The directive basically renders an overlay when the user clicks on an element. Here's the directive (simplified):</p>
  
  <pre class="lang-js prettyprint-override"><code>mod.directive('uiCopyLinkDialog', function(){
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
              var $elm = angular.element(element);
              element.bind('click', function(event) {
                  $elm.addClass('test');
              });
          }
      };
  });
  </code></pre>
  
  <p>The test I'm writing looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('pre-compiled link', function () {
  
      beforeEach(mocks.inject(function($compile, $rootScope) {
          scope = $rootScope;
          element = angular.element('&lt;span class="foo" ui-copy-link-dialog="url"&gt;&lt;/span&gt;');
          $compile(element)(scope);
          scope.$digest();
      }));
  
      it("should change the class when clicked", function () {
          element.click(); // this returns "'undefined' is not a function"
          element[0].click(); // so does this
          $(elm).click(); // this uses jquery and doesn't *seem* to fail
          waits(500); // hack to see if it was a race condition
          expect(elm.className).toContain('test'); // always fails
      });
  
  });
  </code></pre>
  
  <p>You can see in the test that I try several ways to trigger the <code>click()</code> event on the link, with most of them giving an <code>undefined</code> error. </p>
  
  <p>Can anyone tell me what I'm doing wrong here? Reading the examples this sounds like it's the correct syntax but my test runner (Karma via Grunt) doesn't want to play ball.</p>