Unit testing AngularJS directives
angularjs, angularjs-directive, unit-testing
Solution
EDIT: I see the question has changed since my last answer.
You need to put your directive in an independant module.
For example:
angular.module('MyModule.directives');
To test only that module you may load that module explicitly in the test like this:
beforeEach(module('MyModule.directives'));
This will load that module and all its dependancies.
Remember to state the directive module as a dependancy in your MyModule definition in your app:
angular.module('MyModule', ['MyModule.directives', ...]);
Problem
How can I unit test my directive? What I have is ``` 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 my unit test I want to start with a very simple 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); }); }); ``` This doesn't work though as the directive is registered on the app module and I don't want to include the module as that will make all of my `config` and `run`code run. That would defeat the purpose of testing the directive as a separate unit. Am I supposed to put all my directives in a separate module and load just that? Or is there any other clever way of solving this?