Unit Testing $scope.$on AngularJS

Question

Hello Everyone I am struggling at testing a $.on function and I am looking for any suggestions or help on this:

controller

  $scope.$on("sampleFilesSelected", function(event, args) {
                $scope.sampleFiles = args.newSampleFiles;
            });

spec

describe('Testing a $.on', function() {
  var $scope = null;
  var ctrl = null;


  beforeEach(module('test'));

  it('should invoke myEvent when "myEvent" broadcasted', inject(function($rootScope, $controller) {
    $scope = $rootScope.$new();

    ctrl = $controller('MainCtrl', {
      $scope: $scope
    });

    $scope.$broadcast('myEvent');
    expect($scope.sampleFilesSelected).toBe(true);
  }));
});

error

TypeError: Unable to get property 'newSampleFiles' of undefined or null reference
        undefined

mathieu · Accepted Answer · 2016-02-03 14:46:09Z

3

You should pass a value to your event, call a $digest before your assertion :

$scope.$broadcast('myEvent', { 'newSampleFiles' : true } );
$scope.$digest();
expect($scope.sampleFilesSelected).toBe(true);

answered Feb 3, 2016 at 14:46

mathieu

31.3k4 gold badges67 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

danday74 · Accepted Answer · 2016-02-03 14:46:49Z

1

this code ...

$scope.$broadcast('myEvent');

is not passing any args and so args.newSampleFiles throws an error because args is undefined

you need to pass args - how you do that I don't know

However, I would say ... unit testing is used for testing controller code not really for testing event handling. Your example is a bit of an edge case. I would be tempted to test the event handling use E2E testing and protractor.

I would refactor as follows ...

$scope.$on("sampleFilesSelected", function(event, args) {
                $scope.sampleFiles = args.newSampleFiles;
            });

would become ...

$scope.myFunction = function(event, args) {
   $scope.sampleFiles = args.newSampleFiles;
}

$scope.$on("sampleFilesSelected", $scope.myFunction);

and i would unit test $scope.myFunction. And leave the testing of $scope.$on to E2E protractor testing.

Hope that helps

answered Feb 3, 2016 at 14:46

danday74

58k56 gold badges273 silver badges337 bronze badges

2 Comments

user2402107 Over a year ago

I will agree this is a better way to write it.

danday74 Over a year ago

its not meant to be a better way to write it - its to allow it to be unit tested without relying on events firing - the events themselves can be tested in protractor

Simple-Solution · Accepted Answer · 2016-02-03 15:50:04Z

1

You're making three mistakes, first one being is that you're listening/subscribing to a event named sampleFilesSelected in your controller but in your test, you're broadcasting to anyone that's listening to an event called myEvent?

Secondly, once above is fixed, you should run $scope.$digest() cycle after you trigger an event and then you can follow it up with your expect(...).

Third, as mentioned by others, you should pass the data as second arg when $broadcast ...ing!

edited Feb 3, 2016 at 15:50

answered Feb 3, 2016 at 15:09

Simple-Solution

4,30912 gold badges50 silver badges66 bronze badges

Collectives™ on Stack Overflow

Unit Testing $scope.$on AngularJS

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related