How can I unit test a controller in an AngularJS Directive?

Question

My directive is:

window.map.directive('dosingFrequencies', [
  function() {
    return {
      restrict: 'E',
      scope: true,
      templateUrl: '/views/directives/dosingFrequencies.html',
      controller: function($scope, util) {
console.log('here we go!');

        angular.extend($scope, {
          model: createModel(),

          addFrequency: function(med) {
            med.frequencies.push(createFreqModel());
          },

          removeFrequency: function(med, index) {
            med.frequencies.splice(index, 1);
          },

          showTimeChecked: function(freq) {
            if (freq.showTime) {
              freq.prn = false;
              freq.quantity = '';
              freq.quantityWhole = '';
              freq.quantityFrac = '';
              resetTimeToFirstLast(freq, this.model.facilityTimezone)
            }
            if (!freq.showTime) {
              for (var z = 0; z < freq.doses.length; z++) {
                freq.doses[z].quantity = '';
                freq.doses[z].quantityWhole = '';
                freq.doses[z].quantityFrac = '';
              }
              resetTimeToAllday(freq, this.model.facilityTimezone);
            }
          },

          updateDosingForm: function(med) {
            med.template.dosingForm = doseUnitChoices[med.med.dosingUnit] || ['', ''];
          }
        });

      }
    };
  }
]);

My test is:

fdescribe('MedPickerController', function() {
    var $scope;

    beforeEach(function() {
      module('mapApp');

      var html = '<dosing-frequencies></dosing-frequencies>';

      inject(function($compile, $injector) {
        var $controller, $rootScope, $httpBackend;
        $rootScope = $injector.get('$rootScope');
        $httpBackend = $injector.get('$httpBackend');

        $httpBackend.whenGET('/views/directives/dosingFrequencies.html').respond(200);

        $scope = $rootScope.$new();

        var elem = angular.element(html);
        var compiled = $compile(elem)($scope);

        var controller = elem.controller();

        $scope.$digest();

      });
    });

    it('should extend the scope', function() {
        expect($scope.model).not.toBeUndefined();
    });
});

However, my test fails. The console.log in my controller also doesn't execute. What am I doing incorrect?

Answer 1

Make the controller by itself. Don't make it an anonymous function.

So instead of

{
  // ... some directive options
  controller: function() {
    //  Your controller's logic
  }
}

Do something like this.

{
// ... some directive options
  controller: "MedPickerController"
}

And then define your controller separately just like you would any other controller. You could even put them in the same file, it doesn't matter.

Then at that point you're just writing controller tests. You don't have to be concerned that it's a directive.