Unit Test AngularJS Direktiven

Question

Wie kann ich meine Direktive testen?

Was ich habe, ist

angular.module('MyModule'). 
    directive('range', function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      scope: { 
       bindLow: '=', 
       bindHigh: '=', 
       min: '@', 
       max: '@' 
      }, 
     template: '<div><select ng-options="n for n in [min, max] | range" ng-model="bindLow"></select><select ng-options="n for n in [min, max] | range" ng-model="bindHigh"></select></div>' 
    }; 
}) 

In meiner Einheit Test, den ich mit einem sehr einfachen Test

describe('Range control', function() { 
    var elm, scope; 

    beforeEach(inject(function(_$compile_, _$rootScope) { 
     elm = angular.element('<range min="1" max="20" bind-low="low" bind-high="high"></range>'); 

     var scope = _$rootScope_; 
     scope.low = 1; 
     scope.high = 20; 
     _$compile_(elm)(scope); 
     scope.$digest(); 
    })); 

    it('should render two select elements', function() { 
     var selects = elm.find('select'); 

     expect(selects.length).toBe(2); 
    }); 
}); 

Dies gilt allerdings nicht gestartet werden soll arbeiten, wie die Richtlinie über das App-Modul registriert ist und ich möchte das Modul nicht einschließen, weil das meinen ganzen config und run Code laufen lässt. Dies würde den Zweck der Erprobung der Richtlinie als separate Einheit zunichte machen.

Soll ich alle meine Direktiven in ein separates Modul legen und genau das laden? Oder gibt es eine andere clevere Art, das zu lösen?

Answer 1

EDIT: Ich sehe die Frage hat sich seit meiner letzten Antwort geändert.

Sie müssen Ihre Anweisung in ein unabhängiges Modul einfügen.

Zum Beispiel:

angular.module('MyModule.directives'); 

Um zu testen, nur das Modul, das Sie das Modul explizit wie dies im Test laden können:

beforeEach(module('MyModule.directives')); 

Dies wird das Modul und alle seine Abhängigkeiten laden.

Denken Sie daran, die Richtlinie Modul als dependancy in Ihrer MyModule Definition in Ihrer Anwendung angeben:

angular.module('MyModule', ['MyModule.directives', ...]); 

Answer 2

Das Winkel-Saatgutprojekt https://github.com/angular/angular-seed die Meinung zu haben scheint, dass diese Richtlinien in ihrem eigenen gehen Modul, das dann eine Abhängigkeit des Basis-App-Moduls ist.

So gehen die Richtlinien in einem Modul namens "myApp.directives":

angular.module('myApp.directives', []). 
    directive('appVersion', ['version', function(version) { 
    return function(scope, elm, attrs) { 
     elm.text(version); 
    }; 
    }]); 

Und dann die Basis App-Modul der Richtlinie Modul als depenency

// Declare app level module which depends on filters, and services 
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1}); 
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2}); 
    $routeProvider.otherwise({redirectTo: '/view1'}); 
    }]); 

So dann ihr Testbeispiel hinzufügen hängt nur von der Richtlinie Modul

describe('directives', function() { 
    beforeEach(module('myApp.directives')); 
etc... 

Ich habe nicht wirklich versucht, dies mit Ihrem oder meinem c Ode noch, aber es sieht so aus, als ob Sie meist nach den gängigsten Praxisrichtlinien suchten.

Answer 3

Sie sollten alle Ihre Anweisungen im Modul "youch.adirectives" deklarieren und dieses Modul in Ihre Anweisungstests aufnehmen.

In Ihrem app.js

angular.module('myApp', ['myApp.controllers', 'myApp.directives', 'myApp.services', 'myApp.filters']).config(...) 

In Ihren Richtlinien.js

angular.module('myApp.directives', []) .directive(.....) 

Schließlich Ihr directivesSpec.js

describe('directives specs', function() { 
    beforeEach(module('myApp.directives')); 

    describe('range', function() { 
    ... 
    }); 
});