Search code examples
angularjsunit-testingangularjs-directivejasminedom-events

How can I test events in angular?


I need to test that events get correctly emitted or broadcast, and trigger events manually.

What's the best way to do this?


Solution

  • If you're just needing some testing on event firing and catching, this is how I do it. For ensuring that a certain event gets fired ($emit-ed or $broadcast-ed), a spy is the way to go. You need a reference to the scope that will be calling the $emit or $broadcast, and then just to do something like this:

    spyOn(scope, "$emit")
    //run code to test
    expect(scope.$emit).toHaveBeenCalledWith("MY_EVENT_ID", other, possible, args);
    

    If you don't need or don't want to worry about the arguments that are passed with the $emit, you can put an $on on the $rootScope and set a flag to know the event was emitted. Something like this:

    var eventEmitted = false;
    $rootScope.$on("MY_EVENT_ID", function() {
       eventEmitted = true;
    });
    //run code to test
    expect(eventEmitted).toBe(true);
    

    For testing functionality that runs when an event is caught ($on), it's a little easier. Just get a $rootScope from the inject function and then send the desired event.

    $rootScope.$broadcast("EVENT_TO_TEST", other, possible, args);
    //expects for event here
    

    Now, I imagine this event handling would be happening in a directive or a controller (or both) For setting up directive tests, see https://github.com/vojtajina/ng-directive-testing. For setting up controller tests, see https://github.com/angular/angular-phonecat/blob/master/test/unit/controllersSpec.js#L27