AngularJS: Direktive einschränken: 'E' verhindert Element Klick() Event wird im Jasmine Unit Test aufgerufen

Question

Hier sind ein paar Direktiven und Unit Tests. Hier

ist die erste Richtlinie:

directive('myTestDirective', function() { 
    return { 
     link: function(scope, element, attrs) { 
      element.on("click", function(e) { 
      scope.clicked = true; 
      console.log("clicked"); 
     } 
    } 
}); 

Und die Unit-Test:

describe('my test directive', function() { 
    beforeEach(function() { 
     ..... 
     inject($compile, $rootScope) { 
      scope = $rootScope.$new(); 
      html = '<div my-test-directive></div>'; 
      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); 
    }); 
}); 

Wenn die obige Einheit Test durchgeführt wird, ist die Prüfung bestanden und clicked an der Konsole angemeldet ist.

jedoch betrachten diese Richtlinie mit restrict: E hinzugefügt:

directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      element.on("click", function(e) { 
      scope.clicked = true; 
      console.log("clicked"); 
     } 
    } 
}); 

und die Einheit Test:

describe('my directive', function() { 
    beforeEach(function() { 
     ..... 
     inject($compile, $rootScope) { 
      scope = $rootScope.$new(); 
      html = '<my-directive></my-directive>'; 
      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); 
    }); 
}); 

Dieser Test schlägt fehl. clicked wird nicht in der Konsole protokolliert. Aus dem Debugging kann ich sehen, dass die Funktion click() Binding für die Direktive nicht ausgeführt wird.

Wie kann ich weiterhin restrict : 'E' verwenden, während ich die Fähigkeit zur Simulation von Klicks in Komponententests beibehalten kann?

Update: Ich habe es funktioniert, dank Michals Plunkr.

änderte ich die inject() Funktion zu sein:

inject(function($compile, $rootScope, $document) { 
    scope = $rootScope.$new(); 
    html = '<my-test-directive-element></my-test-directive-element>'; 
    elem = angular.element(html); 
    $compile(elem)(scope); 
    scope.$digest(); 
}); 

Danach wird unter Verwendung von sowohl Klick Attribut beschränken und Element Arbeit beschränken.

Plukr ist hier: http://plnkr.co/edit/fgcKrYUEyCJAyqc4jj7P

Answer 1

Mit jqLite auf (‚Klick‘) ist nicht sehr Angular-ish und ich glaube nicht, dass durch Angular Digest Zyklus verarbeitet werden würde (also alles, was man möchte hinzufügen, zu Ihrer Der Bereich innerhalb dieses Callbacks wird nur dann in Ihrem DOM gerendert, wenn Sie dies manuell tun. Sie sollten mit dem lieber in deinem ng-Klick-Richtlinie eingebaut, so dass der HTML-Code wird:

<my-directive ng-click="onClick()"></my-directive> 

und Ihre Richtlinie:

directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    link: function(scope, element, attrs) { 
     scope.onClick = function() { 
     scope.clicked = true; 
     console.log("clicked"); 
     } 
    } 
    } 
});