Unit testing AngularJS Directive doesn't appear to execute Directive's Controller

Question

I've followed a number of guides for unit testing a (simple) custom directive, but am puzzled by the fact that the directive seemingly doesn't get executed (Directive controller never fires). I am calling scope.$digest to execute a digest cycle.

Fiddle :

//--- CODE --------------------------

angular.module("foo", [])
.directive('CreditCardDisplay', function () {
    return {
        restrict: 'E',
        scope: {
            card: '@'
        },
        controllerAs: 'vm',
        bindToController: true,
        controller: function () {
            var mask = null;
            console.log("in CreditCardDisplay, card: " + this.card);
            if (!_.isEmpty(this.card)) {
                var length = this.card.length;

                var card = this.card.slice(-4);

                switch (length) {
                    case 14:
                        mask = "****-******-";
                        break;
                    case 15:
                        mask = "****-******-*";
                        break;
                    case 16:
                        mask = "****-****-****-";
                        break;
                    default:
                        var l1 = Math.floor((length - 4) / 4);
                        var l2 = length - 4 - (l1 * 4);
                        mask = _.repeat("****-", l1) + _.repeat("*", l2) + "-";
                }
            }

            this.mask = mask ? mask + card : card;
        },
        template: '<span>{{vm.mask}}</span>'
    };
});

// ---SPECS-------------------------

describe("directive: gpCreditCardDisplay", function () {
    var element, scope, innerScope, elementCtrl;
    beforeEach(function () {
        module('foo');

        element = angular.element('<credit-card-display card="12345678901234"/>');

        inject(function($rootScope, $compile) {
            scope = $rootScope.$new();
            $compile(element)(scope);
            scope.$digest();
            innerScope = element.isolateScope;
            elementCtrl = innerScope.vm;
        });
    });

    // credit card

    it("when getting a 14 digit credit card number should return correctly formatted", function () {
        expect(element.text()).toContain("****-******-1234");
    });
});

logee · Accepted Answer · 2016-01-13 02:43:22Z

1

See updated jsfiddle

A couple points. Your directive should be named creditCardDisplay instead of CreditCardDisplay. See angular guide on naming

.directive('creditCardDisplay', function () {

If you want to use the controllerAs syntax, you should use the latest angular. I think it was only introduced in version 1.3. Your jsfiddle was using angular 1.2.

Althought irrelevant to this test case, note that element.isolateScope is a function so you should be calling element.isolateScope().

answered Jan 13, 2016 at 2:43

logee

5,0321 gold badge29 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Unit testing AngularJS Directive doesn't appear to execute Directive's Controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related