how to test controller in angular directive - angularjs

Question

I am writing directive and want to add unit tests.
I want to write tests:
it('When directive is created messages variable is defined')
it('When directive is created it contains no messages')
it('When message is called it will add new message to stack')
My directive code is as follows
app.directive("message", function () {
return {
transclude: false,
require: '^ngModel',
templateUrl: 'notificationBar.html',
scope: {
message: '#'
},
controller: function ($scope) {
$scope.messages = [];
$scope.addMessage=function(message){
$scope.messages.push(message);
}
}
}
});
And my tests, but I am not sure why this does not work
describe("messageSpec", function(){
var element;
var $scope;
var ctrl;
beforeEach(module(app));
beforeEach(inject(function($compile, $controller, $rootScope){
var elm = angular.element(' <div data-message data-message="{{ message }}" >');
$scope = $rootScope;
element = $compile(elm)($scope);
$scope.$digest();
ctrl = element.controller("message");
}));
describe("test", function(){
it('When directive is created messages variable is defined', function(){
spyOn(ctrl,messages);
expect(ctrl.messages).toBeDefined();
});
it('When directive is created it contains no messages',function(){
spyOn(ctrl,messages);
expect(ctrl.messages.length).toBe(0);
});
it('When message is called it will add new message to stack', function(){
// todo
});
});
});

Answer 1

These are a couple of things to consider.
There is a syntax error in the controller function at $scope.addMessage(message){.., so I just guess and fix it.
In the controller, messages is put into $scope not the controller instance itself (this) but in testcases you look for messages in the controller instance.
The message directive has an isolated scope, so a $scope that is passed into $compile cannot be tested against either.
As a workaround, you can use angular.element(..).isolateScope() to get the isolated scope for testing.
The working testcases should be like this:
describe("messageSpec", function() {
var element;
var $scope;
var isolateScope;
beforeEach(module("myApp"));
beforeEach(inject(function($compile, $controller, $rootScope) {
var elm = angular.element('<div data-message="{{ message }}">');
$scope = $rootScope;
element = $compile(elm)($scope);
$scope.$digest();
isolateScope = element.isolateScope();
}));
describe("test", function() {
it('When directive is created messages variable is defined', function() {
expect(isolateScope.messages).toBeDefined();
});
it('When directive is created it contains no messages', function() {
expect(isolateScope.messages.length).toBe(0);
});
it('When message is called it will add new message to stack', function() {
// todo
});
});
});
For the full example see: http://plnkr.co/edit/c2yeH3AMSt1Cp7MdF889?p=preview