javascript - $event.stopPropogation is not a function error in Angularjs Unit Test - Stack Overflow

I am trying to unit test a function that is bound to the ngClick directive. It looks something like this for now as we've just started on this project and before I get to far I want some test coverage:

vm.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            vm.opened = true;   
        };

I unit test like this:

describe('Unit: simpleSearchController', function(){
//include main module
beforeEach(module('myApp'));
var ctrl, scope, event ;
// inject the $controller and $rootScope services
// in the beforeEach block
beforeEach(inject(function($controller, $rootScope){
    // Create a new scope that's a child of the $rootScope
    scope = $rootScope.$new();
    // Create the controller and alias access using controllerAs
    ctrl = $controller('simpleSearchController as vm', {
        $scope: scope
    });
}));
// unit tests
it('should set vm.opened to true', function(){
    event = scope.$broadcast("click");
    expect(event).toBeDefined();
    scope.vm.open(event);
    expect(event.defaultPrevented).toBeTruthy();
    expect(scope.vm.opened).toBeTruthy();
});
});

When Karma runs the test I get this error:

TypeError: $event.stopPropagation is not a function. 

Any ideas?

I am trying to unit test a function that is bound to the ngClick directive. It looks something like this for now as we've just started on this project and before I get to far I want some test coverage:

vm.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            vm.opened = true;   
        };

I unit test like this:

describe('Unit: simpleSearchController', function(){
//include main module
beforeEach(module('myApp'));
var ctrl, scope, event ;
// inject the $controller and $rootScope services
// in the beforeEach block
beforeEach(inject(function($controller, $rootScope){
    // Create a new scope that's a child of the $rootScope
    scope = $rootScope.$new();
    // Create the controller and alias access using controllerAs
    ctrl = $controller('simpleSearchController as vm', {
        $scope: scope
    });
}));
// unit tests
it('should set vm.opened to true', function(){
    event = scope.$broadcast("click");
    expect(event).toBeDefined();
    scope.vm.open(event);
    expect(event.defaultPrevented).toBeTruthy();
    expect(scope.vm.opened).toBeTruthy();
});
});

When Karma runs the test I get this error:

TypeError: $event.stopPropagation is not a function. 

Any ideas?

• javascript
• angularjs
• unit-testing
• jasmine

Share Improve this question Follow edited Oct 22, 2014 at 16:49 PSL 124k2121 gold badges256256 silver badges243243 bronze badges asked Oct 22, 2014 at 16:23 user1060248user1060248 3

• Did you try $($event).stopPropagation();? – algorhythm Commented Oct 22, 2014 at 16:27
• 2 When you broadcast an event there is no stopping propagation right? broadcast goes down, stopPropagation is for emit. Did you try using $emit. or just create a mock event object and just spy on the methods. You do not really need to test expect(event.defaultPrevented).toBeTruthy(); it is already tested as a part of angular core. – PSL Commented Oct 22, 2014 at 16:34
• you are correct @PSL, please add as an answer and I'll accept – user1060248 Commented Oct 22, 2014 at 16:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Your issue is that there is no stopPropagation method on the $broadcasted event. broadcast propagates down and stopPropagation (available in $emit) is used to prevent further propagation upwards. So you have 2 options.

Either use $emit

  it('should set vm.opened to true', function(){
        event = scope.$emit("click");
        expect(event).toBeDefined();
        scope.vm.open(event);
        expect(event.defaultPrevented).toBeTruthy();
        expect(scope.vm.opened).toBeTruthy();
  });

Or just create a mock object for event.

  it('should set vm.opened to true', function(){
            event = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
            scope.vm.open(event);
            expect(event.preventDefault).toHaveBeenCalled();
            expect(scope.vm.opened).toBeTruthy();
      });

Also note that you really do not need to test expect(event.defaultPrevented).toBeTruthy(); or expect(event).toBeDefined(); because this is core angular functionality when preventDefault is called and it has already been tested.

In lieu of using stopPropagation() you can use return false. stopPropagation is a jQuery method so it should be used on jQuery objects.

This should get the same desired effect:

vm.open = function($event) {            
        vm.opened = true;   
        return false
    };