title: AngularJS: Directive restrict : 'E' prevents element click() event being called in Jasmine unit test
body: <p>Here are a couple of directives, and unit tests.</p>
  
  <p>Here is the first directive:</p>
  
  <pre><code>directive('myTestDirective', function() {
      return {
          link: function(scope, element, attrs) {
              element.on("click", function(e) {
              scope.clicked = true;
              console.log("clicked");
          }
      }
  });
  </code></pre>
  
  <p>And the unit test:</p>
  
  <pre><code>describe('my test directive', function() {
      beforeEach(function() {
          .....
          inject($compile, $rootScope) {
              scope = $rootScope.$new();
              html = '&lt;div my-test-directive&gt;&lt;/div&gt;';
              elem = angular.element(html);
              compiled = $compile(elem);
              compiled(scope);
              scope.$digest();
          }
      });
      it('should set clicked to true when click() is called', function() {
          elem[0].click();
          expect(scope.clicked).toBe(true);
      });
  });
  </code></pre>
  
  <p>When the above unit test is run, the test passes and <code>clicked</code> is logged to the console.</p>
  
  <p>However, consider this directive with <code>restrict: E</code> added:</p>
  
  <pre><code>directive('myDirective', function() {
      return {
          restrict: 'E',
          link: function(scope, element, attrs) {
              element.on("click", function(e) {
              scope.clicked = true;
              console.log("clicked");
          }
      }
  });
  </code></pre>
  
  <p>And the unit test:</p>
  
  <pre><code>describe('my directive', function() {
      beforeEach(function() {
          .....
          inject($compile, $rootScope) {
              scope = $rootScope.$new();
              html = '&lt;my-directive&gt;&lt;/my-directive&gt;';
              elem = angular.element(html);
              compiled = $compile(elem);
              compiled(scope);
              scope.$digest();
          }
      });
      it('should set clicked to true when click() is called', function() {
          elem[0].click();
          expect(scope.clicked).toBe(true);
      });
  });
  </code></pre>
  
  <p>This test fails. <code>clicked</code> is not logged to the console. From debugging I can see that the function bound the <code>click()</code> binding for the directive is not being executed.</p>
  
  <p>How can I continue to use <code>restrict : 'E'</code>, while still retaining the ability to simulate clicks in unit tests?</p>
  
  <p>Update: I have it working, thanks to Michal's plunkr.</p>
  
  <p>I changed the inject() function to be:</p>
  
  <pre><code>inject(function($compile, $rootScope, $document) {
      scope = $rootScope.$new();
      html = '&lt;my-test-directive-element&gt;&lt;/my-test-directive-element&gt;';
      elem = angular.element(html);
      $compile(elem)(scope);
      scope.$digest();
  });
  </code></pre>
  
  <p>After this, both clicking using restrict attribute and restrict element work.</p>
  
  <p>Plukr is here:
  <a href="http://plnkr.co/edit/fgcKrYUEyCJAyqc4jj7P" rel="nofollow">http://plnkr.co/edit/fgcKrYUEyCJAyqc4jj7P</a></p>