Testowanie jednostek Instrukcje AngularJS

Question

W jaki sposób mogę przetestować moją dyrektywę?

Co mam jest

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>' 
    }; 
}) 

W moim badanej jednostki Chcę zacząć od bardzo prostego testu

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); 
    }); 
}); 

to nie działa choć jak dyrektywa jest zarejestrowany w module aplikacji i nie chcę włączać modułu, ponieważ spowoduje to uruchomienie całego kodu config i run. Byłoby to sprzeczne z celem testowania dyrektywy jako odrębnej jednostki.

Czy mam umieścić wszystkie moje dyrektywy w osobnym module i załadować właśnie to? Czy jest jakiś inny sprytny sposób na rozwiązanie tego problemu?

Answer 1

EDYCJA: Widzę, że pytanie zmieniło się od czasu mojej ostatniej odpowiedzi.

Musisz umieścić swoją dyrektywę w niezależnym module.

Na przykład:

angular.module('MyModule.directives'); 

Aby przetestować tylko tego modułu można załadować ten moduł wyraźnie w teście tak:

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

To będzie ładować ten moduł oraz wszystkie jego dependancies.

Pamiętaj, aby podać moduł Dyrektywa o dependancy w definicji mymodule w aplikacji:

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

Answer 2

kątowe nasion projekt https://github.com/angular/angular-seed wydaje się mieć opinię, że dyrektywy powinny iść w ich własnym moduł, który jest wówczas zależny od podstawowego modułu aplikacji.

Więc dyrektyw iść w module o nazwie "myApp.directives":

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

A potem baza moduł App Dodaj moduł dyrektywy jako 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'}); 
    }]); 

Więc ich przykładzie testowym tylko zależy od modułu dyrektywy

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

Tak naprawdę nie próbowałem tego z twoim lub moim c jeszcze nie, ale wygląda na to, że najczęściej szukałeś najczęściej poradnictwa praktycznego.

Answer 3

Należy zadeklarować wszystkie dyrektywy w module "youapp.directives" i włączyć ten moduł do testów dyrektywy.

W swoim app.js

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

W swoich dyrektyw.js

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

końcu twoi directivesSpec.js

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

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