How to mock/trigger a $routeChangeSuccess in Angular unit tests?

Given a handler attached to the $routeChangeSuccess event to update the title property on $rootScope:

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
  $rootScope.title = 'My title';
});

in unit tests, I expect that performing a route change would update the title property:

it('should set a title on $routeChangeSuccess', function () {
  $location.path('/contacts');
  $rootScope.$apply();

  expect($rootScope.title).toBe('My title');
});

However, the code in the $routeChangeSuccess handler never executes in tests. It executes fine and updates the title when running the application in the browser.

How can I trigger a $routeChangeSuccess event in tests? Is there a better approach to testing any arbitrary code that is attached to $rootScope.$on('$routeChangeSuccess', ...) or other $routeChange events?

Answers


Try sending out the event yourself.

$rootScope.$broadcast('$routeChangeSuccess', eventData);

A more behaviour driven approach is to do an actual navigation using

$location.url() or $location.path()

In order for this to work you need to do two things in your test:

  1. you need to inject $route (even if you're not using it). This is, because $route adds an internal listener for $locationChangeStart, but it will only do so when $route is requested somewhere (and thus initialized)

  2. you need to provide a dummy routing that you can navigate to:

    beforeEach(module(function($routeProvider) {
         $routeProvider.when('/somePath', { template: ' ' });
    }));
    

Need Your Help

How to change the marker cluster icon image in angular google map?

google-maps markerclusterer angular-google-maps

I have a list of markers in my angular google map. I'm able to create the clusters inside the map. But the issue is, instead of the blue cluster icon, I want to use my own icon.