66

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.

Improve this question
1
  • 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. Commented Aug 20, 2015 at 14:58

5 Answers 5

Reset to default
75

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

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").
The controller has no name. It's just part of the directive definition. el.controller() works.
@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!
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')"
I had to pass the directive name into controller method in Angular 1.3. Was giving me undefined without it.
|
58

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.

Improve this answer

8 Comments

Thanks for your answer! Hadn't thought about that!
Good question and good anwser. For me the 1st approach is perfect.
With regard to option 2; How would I access the closured controller definition in the testSpec?
@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.
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
|
10

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

Improve this answer

1 Comment

Using $httpBackend.flush() is the key. Saved my day!
5

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, ask for the directive you created using "name + Directive" (ex. "tabsDirective"):

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');
Improve this answer

3 Comments

@pkozlowski.opensource am I missing something with this approach?
I tried this approach to access controller, which is working fine. But I am stuck in this way to how to pass directive attribute. I have a directive like this -> <simple-drop-down-type-selector ref-object-uri='url'></simple-drop-down-type-selector> I want to access ref-object-uri parameter in unit test.
My answer is only about testing the controller function. Your example "html" that corresponds to a directive under the hood will need to get $compileed in order to test the passing of attribute parameters thereby
0

Use IIFE, which is a common technique to avoid global namespace conflict & it also save tricky inline gymnastics, plus provide freedom in your scope.

 (function(){

  angular.module('app').directive('myDirective', function(){
     return {
       .............
       controller : MyDirectiveController,
       .............
     }
  });

  MyDirectiveController.$inject = ['$scope'];

  function MyDirectiveController ($scope) {

  }

})();
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.