Using jasmine to test angular directive that uses a controller

Question

I am trying to write a jasmine test that will test if an angular directive I've written is working.

Here is my spec file:

    describe('blurb directive', function () {
    var scope, httpMock, element, controller;

    beforeEach(module('mdotTamcCouncil'));
    beforeEach(module('mdotTamcCouncil.core'));
    beforeEach(module('blurb'));

    beforeEach(inject(function (_$httpBackend_, $rootScope, $compile) {
        element = angular.element('<mcgi-blurb text-key="mainPageIntro"></mcgi-blurb>');

        var httpResponse = '<textarea name="content" ng-model="content"></textarea>';

        scope = $rootScope.$new();
        httpMock = _$httpBackend_;

        httpMock.whenGET('components/blurb/blurb.html').respond(httpResponse);
        element = $compile(element)(scope);
        scope.$digest();
    }));

    it('should have some content', function () {
        expect(scope.content).toBeDefined();
    });
});

The value "scope.content" is always undefined and when I look at the scope object it seems to be a generic scope object that doesn't have my custom attributes on it.

Here are the other related files:

blurb-directive.js

(function () {
    'use strict';
    angular.module('blurb')
        .directive('mcgiBlurb', blurb);

    function blurb() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: jsGlobals.componentsFolder + '/blurb/blurb.html',
            controller: 'BlurbController',
            controllerAs: 'blurb',
            bindToController: false,
            scope: {
                textKey: "@"
            }

        };

    };
})();

blurb-controller.js

(function () {

    angular.module('blurb')
            .controller('BlurbController', ['$scope', 'blurbsFactory', 'userFactory', function ($scope, blurbsFactory, userFactory) {
                $scope.content = "";
                $scope.blurbs = {};
                $scope.currentUser = {};
                this.editMode = false;


                userFactory().success(function (data) {
                    $scope.currentUser = data;
                });

                blurbsFactory().success(function (data) {
                    $scope.blurbs = data;
                    $scope.content = $scope.blurbs[$scope.textKey];
                });

                this.enterEditMode = function () {
                    this.editMode = true;
                };

                this.saveEdits = function () {
                    this.editMode = false;
                    $scope.blurbs[$scope.textKey] = $scope.content;
                };
            }]);

})();

What am I doing wrong?

Nikos Paraskevopoulos · Accepted Answer · 2015-04-03 18:46:35Z

2

The directive has isolated scope, so the scope passed to its controller and link function (if there was one), is the isolated one, different than your scope.

You may have luck getting the scope of the directive using element.isolateScope(); you may not, because of the replace: true - try to make sure. You may also access the controller instance using element.controller('mcgiBlurb').

edited Apr 3, 2015 at 18:46

answered Apr 3, 2015 at 17:57

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

4 Comments

Amanda Kitson Over a year ago

I tried setting scope=element.isolateScope() but that is undefined. Also, element.controller() appears to be undefined as well. Ideas?

Nikos Paraskevopoulos Over a year ago

I guess it is because of the replace: true. Could you try using false and also try calling isolatedScope() and scope() on the child element of <mcgi-blurb> - it should be the <textarea>? Also, launch Karma in continous mode and try debugging - Batarang or angscope may come in handy.

Nikos Paraskevopoulos Over a year ago

By the way, it should be .controller('mcgiBlurb')!

Amanda Kitson Over a year ago

I figured out it's a combination of what you suggested and the fact that I was using "templateUrl" in my directive. I changed it from using "templateUrl" to "template" and using isolateScope and it now displays the default value that I'm trying to check. I guess I have to get my karma setup to handle templates.

Collectives™ on Stack Overflow

Using jasmine to test angular directive that uses a controller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related