Единичное тестирование Директивы AngularJS

Question

Как я могу проверить свою директиву?

Что у меня есть

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

В моем тестовом модуле я хочу начать с очень простого теста

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

Это не работает, хотя, как директива зарегистрирована на модуле приложения и я не хочу включать модуль, так как это сделает все мои коды config и run. Это нарушило бы цель проверки директивы как отдельной единицы.

Должен ли я поместить все мои директивы в отдельный модуль и загрузить именно это? Или есть ли другой умный способ решить это?

Answer 1

EDIT: Я вижу, что вопрос изменился с момента моего последнего ответа.

Вам необходимо поместить свою директиву в независимый модуль.

Например:

angular.module('MyModule.directives'); 

Чтобы проверить только этот модуль, вы можете загрузить модуль явно в тесте, как это:

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

Это будет загрузить модуль и все его зависимости.

Не забудьте указать модуль директивы как зависимости в вашем определении MyModule в вашем приложении:

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

Answer 2

Угловых семена проект https://github.com/angular/angular-seed , кажется, есть мнение, что директивы должны идти в своем собственном модуль, который затем является зависимостью базового модуля приложения.

Так директивы идут в модуле под названием «myApp.directives»:

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

И тогда базовый модуль приложения добавить модуль директивы как 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'}); 
    }]); 

Итак их тестовый пример просто зависит от директивного модуля

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

Я на самом деле не пробовал это с вашим или моим c ode, но похоже, что вы в основном искали наиболее распространенные практические рекомендации.

Answer 3

Вы должны объявить все свои директивы в модуле 'youapp.directives' и включить этот модуль в свои директивные тесты.

В вашем app.js

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

В своих директивах.JS

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

Наконец ваш directivesSpec.js

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

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