CODEWITHSUNDEEP
angularjsunit-testingjasmine
Adam Modlin
Adam Modlin

Reputation: 3024

How can I test a $scope.$on event in a Jasmine test?

I am unit testing a controller and I want to test an event handler. Say my controller looks like:

myModule.controller('MasterController', ['$scope', function($scope){
    $scope.$on('$locationChangeSuccess', function() {
        $scope.success = true;
    });
}]);

Would I broadcast that in my Jasmine test? Would I emit it? Is there an accepted standard?

Upvotes: 10

Views: 14328

Answers (2)

Adam Modlin
Adam Modlin

Reputation: 3024

The solution I came up with is as follows:

describe('MasterController', function() {
    var $scope, $rootScope, controller, CreateTarget;

    beforeEach(function() {
        inject(function($injector) {
            $rootScope = $injector.get('$rootScope');
            $scope = $rootScope.$new();

            var $controller = $injector.get('$controller');

            CreateTarget = function() {
                $controller('MasterController', {$scope: $scope});
            }
        });
    });

    describe('$locationChangeSuccess', function() {
        it('should set $scope.success to true', function() {
            controller = CreateTarget();
            $rootScope.$broadcast('$locationChangeSuccess');
            expect($scope.success).toBe(true);
        });
    });
});

Upvotes: 17

glepretre
glepretre

Reputation: 8167

I don't think there is "an accepted standard" but according to $location source code the event is broadcasted, so I would mock this behavior and test it this way:

'use strict';

describe('MasterController', function() {
  var MasterController,
      $rootScope,
      $scope;

  beforeEach(module('myModule'));

  beforeEach(inject(function($rootScope, $injector, $controller) {
    $rootScope = $rootScope;
    $scope = $rootScope.$new();
    MasterController = $controller('MasterController', {
      '$scope': $scope
    });
    $scope.$digest();
  }));

  describe('$locationChangeSuccess event listener', function() {
    it('should set $scope.success to true', function() {
      var newUrl = 'http://foourl.com';
      var oldUrl = 'http://barurl.com'

      $scope.$apply(function() {
        $rootScope.$broadcast('$locationChangeSuccess', newUrl, oldUrl);
      });

      expect($scope.success).toBe(true);
    });
  });
});

Upvotes: 4

Related Questions