How do I test $scope.$on in AngularJS

Question

How do I test that the scope is populated after the broadcast? I've searched and found a few QA's here in stackexchange, but none answered my problem. The code is working alright, just don't know how to test it. May I add that I'm a novice to testing, and especially with Jasmine.

So, here's the code:

Service CrappySvc:

update: function() {
    $rootScope.$broadcast('updatecrappy', Crappy.query());
}

Controller GetCrappyCtrl:

  $scope.$on('updatecrappy', function(event, crap) {
    $scope.crap = crap;
  });

Jasmine:

beforeEach(inject(function($rootScope, $httpBackend, $controller, Crappy) {
  rootScope = $rootScope;
  scope = $rootScope.$new();
  Crappy = mockCrappy;

      ...
  spyOn(rootScope, '$broadcast');
      ...

  ctrl = $controller('GetCrappyCtrl', {
  $scope : scope,
  Crappy : mockCrappy
});

}));

it('$scope.$on should have been triggered', function() {          
  rootScope.$broadcast('updatecrappy', [{id : 2, name : 'crappy'}]);
  expect(rootScope.$broadcast).toHaveBeenCalledWith('updscenes', [{id : 2, name : 'crappy'}]);

});

Stone

I found this helpful too: stackoverflow.com/questions/15272414/… — Ben
– Ben, Commented Aug 16, 2014 at 1:47

ivarni · Accepted Answer · 2015-09-03 04:45:36Z

36

You need to tell Jasmine to let the spy call the actual $broadcast function

spyOn($rootScope, '$broadcast').andCallThrough();

If you don't use andCallThrough() the spy does nothing.

Jasmine Docs

EDIT

With Jasmine 2, the syntax would be

spyOn($rootScope, '$broadcast').and.callThrough();

edited Sep 3, 2015 at 4:45

answered Oct 18, 2013 at 5:57

ivarni

17.9k17 gold badges79 silver badges94 bronze badges

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

6 Comments

Jeff Voss Over a year ago

can we elaborate on what this is actually doing?

ivarni Over a year ago

@whitebox That's the thing, it's not really doing much. By default, Jasmine's spies will replace the original function that is being spied on. Calling and.callThrough() will add to the default behaviour and cause the spy to also call the original function that was being spied on. And that's really all that it does.

Ryan M Over a year ago

you don't need the and.callThrough() in this case if you are just asserting the broadcast was called

Winnemucca Over a year ago

does mocha have anything like .callThrough

ivarni Over a year ago

As far as I know mocha does not come with its own spy-functionality so that would depend on which library you use for mocking.

|

Igy · Accepted Answer · 2016-09-06 16:53:26Z

0

If want to fake the returnValue from $scope.$broadcast() you can do something like these two cases:

Case 1:

scope.$broadcast('TEST_CHANGED', {test: 'test1'});
spyOn(scope, '$broadcast').and.callThrough();
expect(something).toEqual('something');

Case 2:

scope.$broadcast('TEST_CHANGED', {test: 'test2'});
spyOn(scope, '$broadcast').and.callThrough();
expect(something2).toEqual('something2');

edited Sep 6, 2016 at 16:53

Igy

43.8k8 gold badges93 silver badges115 bronze badges

answered Sep 6, 2016 at 16:16

KATHERINE

1191 silver badge8 bronze badges

Comments

vipul patel · Accepted Answer · 2016-10-04 00:18:15Z

0

As far as "toHavebeenCalled" concerned, there is no need of "andCallThrough()". Simple spy would work. In your case your arguments are different.

You are broadcasting like, rootScope.$broadcast('updatecrappy', [{id : 2, name : 'crappy'}]);

But you expect :

expect(rootScope.$broadcast).toHaveBeenCalledWith('updscenes', [{id : 2, name : 'crappy'}]);

look at argument " updarecrappy" but in tohavebeencalled it is "updscenes".

answered Oct 4, 2016 at 0:18

vipul patel

7504 silver badges10 bronze badges

Comments

pixlboy · Accepted Answer · 2017-07-12 09:22:32Z

0

Look at the sample code below, it works well for me.

Emitting sample event 'onTimeChanged' from $rootScope. My controller has a listener 'onTimeChanged' and I am calling a method timeChanged() inside it.

describe('onTimeChanged()', function() {
    it('should call another method or controller', function() {
        spyOn(searchCtrl, 'timeChanged');
        $rootScope.$emit('onTimeChanged');
        expect(searchCtrl.timeChanged).toHaveBeenCalled();
    });
});

Note that I did not spy on method '$emit' of rootScope.

answered Jul 12, 2017 at 9:22

pixlboy

1,50213 silver badges30 bronze badges

Collectives™ on Stack Overflow

How do I test $scope.$on in AngularJS

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related