Unit test angular directive that uses ngModel

Question

I am trying to unit test a directive that uses ngModel and having difficulties. It seems that the link function of my directive is never being called...

Here is my directive code:

coreModule.directive('coreUnit', ['$timeout', function ($timeout) {
    return {
        restrict: 'E',
        require: '?ngModel',
        template: "{{output}}",
        link: function (scope, elem, attrs, ngModelCtrl) {
            ngModelCtrl.$render = function () {
                render(ngModelCtrl.$modelValue);
            };
            console.log("called");
            function render(unit) {
                if (unit) {
                    var output = '(' +
                        unit.numerator +
                        (unit.denominator == '' ? '' : '/') +
                        unit.denominator +
                        (unit.rate == 'NONE' || unit.rate == '' ? '' : '/' + unit.rate) +
                        ')';
                    scope.output = output == '()' ? '' : output;
                }
            }
        }
    }
}]);

Here is my test spec:

describe('core', function () {
    describe('coreUnitDirective', function () {
        beforeEach(module('core'));

        var scope,
            elem;

        var tpl = '<core-unit ng-model="myUnit"></core-unit>';

        beforeEach(inject(function ($rootScope, $compile) {
            scope = $rootScope.$new();
            scope.myUnit = {};
            elem = $compile(tpl)(scope);
            scope.$digest();
        }));

        it('the unit should be empty', function () {
            expect(elem.html()).toBe('');
        });

        it('should show (boe)', function () {
            scope.myUnit = {
                numerator: 'boe',
                denominator: "",
                rate: ""
            };
            scope.$digest();
            expect(elem.html()).toContain('(boe)');
        });
    });
});

The console log output "called" is never occurring and obviously the elem in my test spec is never updating.

What am I doing wrong??

Answer 1

Turns out that I wasn't including the directive in my karma.config file :S. Adding it in resolved all of my issues.

Answer 2

You can try out two things.

First, instead of using just a string tpl, try angular.element().

var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');

Second, place the tpl in the beforeEach block. So the result should look like this:

beforeEach(inject(function ($rootScope, $compile) {
    var tpl = angular.element('<core-unit ng-model="myUnit"></core-unit>');
    scope = $rootScope.$new();
    scope.myUnit = {};
    elem = $compile(tpl)(scope);
    scope.$digest();
}));