16

I'm trying to spy on an $emit from a directive, but somehow I cannot get the spy to 'hear' the $emit.

This is the code in my directives' controller:

$scope.$on('send', function () {
    console.log('called');
    $scope.$emit('resultSend', {'ok': true, 'data': ''});
});

This is my unit test:

var $rootScope, $compile, elm, element;

beforeEach(inject(function ($injector) {
    $rootScope = $injector.get('$rootScope');
    $compile = $injector.get('$compile');
    elm = angular.element('<test></test>');
    element = $compile(elm)($rootScope);
}));


it('should listen for the send broadcast and emit the resultSend', function () {
    spyOn($rootScope, '$emit');
    $rootScope.$broadcast('send');
    expect($rootScope.$emit).toHaveBeenCalledWith('resultSend');
});

The console.log output ('called') is printed out by Karma, so I guess the unit test broadcast event does work.

Does this have to do with $emit not broadcasting down but up, and if so, how do I catch it, and if not, how else do I handle this case?

yankee
  • 38,872
  • 15
  • 103
  • 162
Maarten
  • 4,643
  • 7
  • 37
  • 51

2 Answers2

18

According to the docs here, you are correct in your understanding of the difference between $emit and $broadcast. However, I think the problem is in your use of $scope and $rootScope. Your $rootScope will be at the top level of your scope hierarchy. I'm guessing (just by looking at your snippets without being able to see all the code) that your $scope in your controller is a nested controller, meaning that $scope in your controller is a child of the app's $rootScope.

Because of that, when your unit test spys on the $rootScope.$emit function, it is not actually spying on your controller's $scope.$emit() call. Those two "scopes" are different, not the same thing. So, you need to mock the $scope that you provide for the controller and then do a spyOn on that.

For example, in your beforeEach:

var ctrl, scope;

beforeEach(function() {
    module('<INSERT YOUR CONTROLLERS MODULE NAME HERE>'); 
    inject(function($rootScope, $controller) {
        scope = $rootScope.$new();
        ctrl = $controller('<CTRL NAME HERE>', {$scope: scope});
    });
});

This code will actually create a "mock" scope variable and will provide that object to your controller, which you can then do spies and other things with. Such as:

spyOn(scope, '$emit');
// do whatever triggers the "$emit" call
expect(scope.$emit).toHaveBeenCalledWith('resultSend');

I'm pretty sure that should fix your problem. Let me know if that needs more explanation.

tennisgent
  • 14,165
  • 9
  • 50
  • 48
  • what is the controller in this case? – 9blue Aug 05 '14 at 19:58
  • Hey thanks for the info, i'm using jasmine to test Vue2 and I did the same, a component emits a 'component' close, so i wanted to know how to test the emit (there's probably a better way but this did it) const Constructor = Vue.extend(Component); vm = new Constructor({ propsData }).$mount(); spyOn(vm, '$emit'); // do whatever triggers the "$emit" call expect(vm.$emit).toHaveBeenCalledWith('onComponentClose'); thanks! – Gerardo Rosciano Apr 17 '17 at 12:52
3

If your directive has a controller, you could, and should, test that separately from the directive. That's the whole point of an MVC architecture, you can test the C seperately from the V. ;)

That said, it would be a plain-Jane controller test spec.

Another tip: You should do all of your set up in your beforeEach() block (i.e. spies and whatever) and then do the assertions in your it() blocks.

Finally: Make sure that the spy you're setting up, is on the scope you're passing into the controller you're testing.

Ben Lesh
  • 107,825
  • 47
  • 247
  • 232