How can'I test angularJs event '$on'? - angularjs

Question

I'am using angularJs and I want to test $on event in my controller so I try to write test case in this way :
beforeEach(inject(function ($controller,$injector) {
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $controller('MyController', {
$scope: $scope
});
}));
spyOn($rootScope, '$broadcast').and.callThrough();
spyOn($rootScope, '$on').and.callThrough();
it('should set $rootScope.settings.layout.pageBodySolid to false', function() {
controller = CreateTarget();
expect($rootScope.$broadcast).toHaveBeenCalled();
expect($rootScope.settings.layout.pageBodySolid).toBe(false);
});
But I get this error :
Error: spyOn could not find an object to spy upon for $broadcast()
I also try to do test in this way :
beforeEach(inject(function ( $controller,$injector) {
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $controller('MyController', {
$scope: $scope
});
CreateTarget = function() {
$controller('MyController', {$scope: $scope});
}
}));
it('should set $rootScope.settings.layout.pageBodySolid to false', function() {
controller = CreateTarget();
$rootScope.$broadcast('$viewContent');
expect($rootScope.settings.layout.pageBodySolid).toBe(false);
});
This time I get this error
TypeError: Cannot read property 'layout' of undefined
And this is my controller event
$scope.$on('$viewContent', function () {
$rootScope.settings.layout.pageBodySolid = false;
$rootScope.settings.layout.pageSidebarClosed = false;
});
I don't know how can I do this. It's really my first experience with angularJs test I need your help.Thanks in advance.

Answer 1

There's a few issues here:
First, the spyOn. The $scope you pass into your controller is actually a new instance, yet you're spying on the $rootScope object, so they're two totally different instances.
Second, you don't necessarily want to test that $broadcast or $on are called because then you are essentially testing Angular. What you want to test in those cases is your own code and the outcome of the event broadcast.
So, in your case, what you want to test is that 'when the $viewContent event is received, those two properties on $rootScope should be set to false.
Which brings me to my third point: the layout undefined message is because you're trying to set a value on the settings property of $rootScope, but you never initialize that to anything. At the point you're setting it, it is undefined.
TL;DR, this is how you could test this (note: this code may need tweaked. I'm typing this by memory and not actually testing that it works. This is just to give you the idea)
beforeEach(inject(function ($controller, $injector, _$rootScope_) {
$rootScope = _$rootScope;
$scope = $rootScope.$new();
$rootScope.settings = {
layout : {
pageBodySolid : true,
pageSidebarClosed : true
}
};
controller = $controller('MyController', {
$scope: $scope
});
}));
it('should set $rootScope.settings.layout properties to false', function() {
$rootScope.$broadcast('$viewContent');
// Run a digest to notify watchers
$rootScope.$digest();
expect($rootScope.settings.layout.pageBodySolid).toBe(false);
expect($rootScope.settings.layout.pageSidebarClosed).toBe(false);
});