AngularJs Unit Testing isolated scope Directive

Question

I want to test the following directive "spinInput" which requires ngModel, but I can't access the directive's scope. All I get is an empty scope. Angularjs 1.3.13 is used.

Directive:

angular.module('charts.spinInput',[]).directive('spinInput', function() {
return {
    restrict: 'E',
    replace: true,
    require:'ngModel',
    scope: {
      min:"@"
    },
    controller:function($scope)
    {
        $scope.test=12;

      $scope.calcAngle=function(point)
        {
            var xDif=point.x-50;
            var yDif=point.y-50;

            return (Math.atan2(yDif, xDif) * 180 / Math.PI);

        };

},

    templateUrl: 'charts/directive/spinInput/spinInput.html',
    link:function(scope, element, attr,ngModel) {
       ...
    }

    };
});

Unit Test: throws following error: TypeError: 'undefined' is not an object (evaluating 'innerScope.min')

 describe('spinInput', function() {

 beforeEach(module('charts'));

    var $httpBackend;
    var element;
    var outerScope;
    var innerScope;




    beforeEach(inject(function($rootScope, $compile  , $injector) {
        element = angular.element('<spin-input min="12"></spin-input>');
        $httpBackend = $injector.get('$httpBackend');
        $httpBackend.whenGET('charts/directive/spinInput/spinInput.html').respond(200, '');
        outerScope = $rootScope.$new();
        $compile(element)(outerScope);

        innerScope = element.isolateScope();

        outerScope.$digest();
    }));


    it('scope.min should be defined', function() {
        expect(innerScope.min).toBeDefined();
    });


});

Nicholas Murray · Accepted Answer · 2015-02-25 16:09:46Z

5

The way you are constructing your test seems to be causing issues.

I have been able to successfully test the isolated scope as per below.

You can view the test running on this jsfiddle (with templates code commented out).

describe('Directive: spinInput', function() {

var scope, compile, validHTML, templateHtml;;


validHTML = '<spin-input min="12"></spin-input>';

beforeEach(module('myApp'));

beforeEach(inject(function($compile, $rootScope, $templateCache){

    templateHtml = $templateCache.get('charts/directive/spinInput/spinInput.html');
    if(!templateHtml) {
            templateHtml = $.ajax('charts/directive/spinInput/spinInput.html', {async: false}).responseText;
            $templateCache.put('charts/directive/spinInput/spinInput.html', templateHtml)
    }


    scope = $rootScope.$new();
    compile = $compile;
}));

function create() {
    var elem, compiledElem;
    elem = angular.element(validHTML);
    compiledElem = compile(elem)(scope);
    scope.$digest();

    return compiledElem;    
}


it('scope.min should be defined', function() {
    var el = create();
    expect(el.isolateScope().min).toBeDefined();
});

it('scope.min should equal 12', function() {    
    var el = create();
    expect(el.isolateScope().min).toEqual('12'); 
});

});

answered Feb 25, 2015 at 16:09

Nicholas Murray

13.5k14 gold badges69 silver badges85 bronze badges

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

1 Comment

cirtrus Over a year ago

the problem was the ng-model directive

Csaba Vályi · Accepted Answer · 2015-02-20 22:03:48Z

2

Try putting the outerScope.$digest() before element.isolateScope()

answered Feb 20, 2015 at 22:03

Csaba Vályi

211 bronze badge

Collectives™ on Stack Overflow

AngularJs Unit Testing isolated scope Directive

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related