Unit test Angular directive within directive - unit-testing

Question

I'm having a real hard time running a karma unit test over an angularjs directive. Here's my setup:
var scope, ele;
var template = '<div data-my-directive data="data" config="config"></div>';
beforeEach(function () {
// Load directive's module
module('dashboard');
module('templates-dev');
// Load mock services/data (overriding real implementation)
module(function($provide) {
$provide.value("MockWidgetData", new MockWidgetData());
});
// Construct services/data to be available
// inside each testing block.
inject(function($rootScope, $compile, MockWidgetData) {
// Create a fresh scope
scope = $rootScope.$new();
ele = angular.element(template);
// Fill that scope with mock data
scope.config = MockWidgetData.config;
scope.data = MockWidgetData.data;
// Compile the element and attach our scope
$compile(ele)(scope);
// Digest the scope to trigger a scope update
// and attach our directive's link function
scope.$digest();
});
});
My directive passes 'data' and 'config' objects to its children, which happen to be other directives. The directive itself uses a templateUrl, which is why I provide the module(templates-dev): an html2js pre-compiled, angular-modularized, $templateCache'd version of my templates. Here's a sample of my directive's templateUrl:
<div id="container">
<button id="my-btn" ng-click="doSomething('parameter')"></button>
<div other-dir data="data" config="config"></div>
</div>
Here's a sample of my directive:
angular.module('dashboard').directive('myDirective', function() {
return {
restrict: 'A',
templateUrl: 'my-dir-template.html',
scope: { //
data: '=',
config: '='
},
replace: true,
link: function(scope, element, attrs) {
scope.someFunc() = { ... },
scope.someFunc1() = { ... },
});
Problem:
After $compile(ele)(scope), a .log() of the element shows the entire
DOM, including all sorts of angular.js directives and other strange
information. I would expect to see my directive's test template
mashed together with the above templateUrl.
A .log() of the scope shows the complete data and config objects, with their expected values. It also shows the functions available inside of my directive's link function, as one would expect. However, inside my test blocks, it's as if the scope object is emptied... I cannot access any of my directive's functions (they all return undefined).
I am able to capture some elements of my directive's html via ele.find("#my-btn").eq(0), but none of the normal functions work (.click(), etc.).
What am I doing wrong? Is there something wrong with the compile process? Am I structuring the test wrong? Should I try to remove the link function and replace it with a Controller? My scopes just aren't lining up, and I've been failing at this for two days now... kind of annoying.
After closer inspection... It looks like I can scope.$digest() before $compile(ele)(scope), which will correctly propagate "data" and "config" objects to the child scope. However, my scope then loses access to the functions defined in my directive's link.

Answer 1

You should call scope.$digest() after $compile(ele)(scope). Digest is necessary to proceed compilation of directive. Your directive has an isolated scope, that's why you can't access it functions. To get them you should try this:
var elScope = element.isolateScope();
here you'l got your elScope.someFunc();
Check this example of unit testing directives:
http://best-web-creation.com/articles/view/id/angular-js-unit-test-directive?lang=en