In Vojta Jina's excellent repository where he demonstrates testing of directives, he defines the directive controller outside of the module wrapper. See here: https://github.com/vojtajina/ng-directive-testing/blob/master/js/tabs.js
Isn't that bad practice and pollute the global namespace?
If one were to have another place where it might be logical to call something TabsController, wouldn't that break stuff?
The tests for the mentioned directive is to be found here: https://github.com/vojtajina/ng-directive-testing/commit/test-controller
Is it possible to test directive controllers separate from the rest of the directive, without placing the controller in a global namespace?
It would be nice to encapsulate the whole directive within the app.directive(...) definition.
I prefer at times to include my controller along with the directive so I need a way to test that.
First the directive
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'EA',
scope: {},
controller: function ($scope) {
$scope.isInitialized = true
},
template: '<div>{{isInitialized}}</div>'
}
})
Then the tests:
describe("myDirective", function() {
var el, scope, controller;
beforeEach inject(function($compile, $rootScope) {
# Instantiate directive.
# gotacha: Controller and link functions will execute.
el = angular.element("<my-directive></my-directive>")
$compile(el)($rootScope.$new())
$rootScope.$digest()
# Grab controller instance
controller = el.controller("myDirective")
# Grab scope. Depends on type of scope.
# See angular.element documentation.
scope = el.isolateScope() || el.scope()
})
it("should do something to the scope", function() {
expect(scope.isInitialized).toBeDefined()
})
})
See angular.element documentation for more ways to get data from an instantiated directive.
Beware that instantiating the directive implies that the controller and all link functions will already have run, so that might affect your tests.