rossoneri rossoneri - 3 months ago 27
AngularJS Question

how to get access to controller scope when testing directive with isolate scope

I have directive with isolate scope and controller, Is it right to write unit tests for directive and test some functional in controller scope?

And if it right, how i can get access to controller scope?

angular.module('myApp').directive('myDirecive', function () {
return {
templateUrl: 'template.html',
scope: {
data: '='
},

controller: function ($scope) {
$scope.f= function () {
$scope.value = true;
};
},

link: function ($scope) {
// some logic
});
}
};
})

describe('myDirective', function () {
'use strict';

var element,
$compile,
$rootScope,
$scope;

beforeEach(module('myApp'));

beforeEach(inject(function (_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$scope = $rootScope.$new();

element = compileElement();
}));

function compileElement() {
var element = angular.element('<my-directive></my-directive>');
var compiledElement = $compile(element)($scope);

$scope.$digest();

return compiledElement;
}

it('should execute f', function () {
$scope.f();
expect($scope.val).toBe(true); // there we can access to isolate scope from directive;
});
});

Answer

Controller is given the isolated scope created by the directive. Your $scope, that you pass into compile function, is used as a parent for the directive's isolate scope.

Answering how to test it, you have two options:

  1. Access the isolated scope from the element:

    var isolated = element.isolateScope();

    For that, you need to have $compileProvider.debugInfoEnabled(true);

  2. Access the isolated scope from your scope:

    var isolated = $scope.childHead;

Comments