current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 57 down vote favorite
22

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.

share|improve this question
    
May I ask what's the point testing a directives' controller separately from the directive itself? I suspect that if the controllers' code is not tested along the rest of the directive you are doing something wrong. It's a bit like saying I have this class method but I want to test it separately so I'm going to put this on the global scope. I think the accepted answer (pkozlowski) involves bad practice, while James' one is the correct one. – Izhaki Aug 20 '15 at 14:58
up vote 55 down vote accepted

Excellent question!

So, this is a common concern, not only with controllers but also potentially with services that a directive might need to perform its job but don't necessarily want to expose this controller / service to the "external world".

I strongly believe that global data are evil and should be avoided and this applies to directive controllers as well. If we take this assumption we can take several different approaches to define those controllers "locally". While doing so we need to keep in mind that a controller should be still "easily" accessible to unit tests so we can't simply hide it into directive's closure. IMO possibilities are:

1) Firstly, we could simply define directive's controller on a module level, ex::

angular.module('ui.bootstrap.tabs', [])
  .controller('TabsController', ['$scope', '$element', function($scope, $element) {
    ...
  }])
 .directive('tabs', function() {
  return {
    restrict: 'EA',
    transclude: true,
    scope: {},
    controller: 'TabsController',
    templateUrl: 'template/tabs/tabs.html',
    replace: true
  };
})

This is a simple technique that we are using in https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js which is based on Vojta's work.

While this is a very simple technique it should be noted that a controller is still exposed to the whole application which means that other module could potentially override it. In this sense it makes a controller local to AngularJS application (so not polluting a global window scope) but it also global to all AngularJS modules.

2) Use a closure scope and special files setup for testing.

If we want to completely hide a controller function we can wrap code in a closure. This is a technique that AngularJS is using. For example, looking at the NgModelController we can see that it is defined as a "global" function in its own files (and thus easily accessible for testing) but the whole file is wrapped in closure during the build time:

To sum up: the option (2) is "safer" but requires a bit of up-front setup for the build.

share|improve this answer
    
Thanks for your answer! Hadn't thought about that! – Kenneth Lynne Mar 9 '13 at 19:44
    
Good question and good anwser. For me the 1st approach is perfect. – Mark Lagendijk Jul 30 '13 at 14:14
1  
With regard to option 2; How would I access the closured controller definition in the testSpec? – Stevo Oct 17 '13 at 7:20
1  
@Stevo, It only gets closured when built. Before that, it's a global function that's accessible anywhere, you just have to include its file. – M.K. Safi Jan 4 '14 at 14:58
    
Was trying to figure out what you'd call NgModelController in the second scenario. It's a global variable, but only in your local environment. So then it's a local global variable? mindblown – Scott Silvi Mar 26 '14 at 20:14
up vote 58 down vote

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.

share|improve this answer
12  
This is a great answer, but there is a small edit needed: you need to pass in the name of the directive for the call to el.controller(). So in your example above the call would be el.controller("myDirective"). – fiznool Jul 31 '14 at 9:19
    
The controller has no name. It's just part of the directive definition. el.controller() works. – James van Dyke Jul 31 '14 at 20:37
4  
@fiznool is right, at least according to the official angular documentation. Note that this is not the directive's controller name, but the directive name itself! – ArtoAle Sep 16 '14 at 13:38
    
Fair enough. I'll leave it up to the implementor. This method works for me, though. The official documentation mentions that there is a default if no name is given: "By default retrieves controller associated with the ngController directive. If name is provided as camelCase directive name, then the controller for this directive will be retrieved (e.g. 'ngModel')" – James van Dyke Sep 16 '14 at 19:42
6  
I had to pass the directive name into controller method in Angular 1.3. Was giving me undefined without it. – demisx Sep 18 '14 at 19:12
up vote 7 down vote

James's method works for me. One small twist is though, when you have an external template, you would have to call $httpBackend.flush() before $rootScope.$digest() in order to let angular execute your controller.

I guess this should not be an issue, if you are using https://github.com/karma-runner/karma-ng-html2js-preprocessor

share|improve this answer
up vote 2 down vote

Is there something wrong with doing it this way? Seems preferable since you avoid placing your controller in the global name space and are able to test what you want (i.e. the controller) without unnecessarily $compiling html.

Example directive definition:

 .directive('tabs', function() {
  return {
    restrict: 'EA',
    transclude: true,
    scope: {},
    controller: function($scope, $attrs) {
      this.someExposedMethod = function() {};
    },
    templateUrl: 'template/tabs/tabs.html',
    replace: true
  };

Then in your Jasmine test:

var tabsDirective = $injector.get('tabsDirective')[0];
// instantiate and override locals with mocked test data
var tabsDirectiveController = $injector.instantiate(tabsDirective.controller, {
  $scope: {...}
  $attrs: {...}
});

Now you can test controller methods:

expect(typeof tabsDirectiveController.someExposedMethod).toBe('function');
share|improve this answer
1  
@pkozlowski.opensource am I missing something with this approach? – jbmilgrom Aug 5 at 11:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.