AngularJS ui-router: Test ui-sref

Question

I'm trying to test some views, that are using <a ui-sref='someState'>link</a> to link to other states in my application. In my tests I'm triggering a click on this elements like this:

element.find('a').click()

How do I test, if the state is switched to someState? It would be easy, when using $state in my controller like this:

// in my view
<a ng-click="goTo('someState')">link</a>

// in my controller
$scope.goTo = function(s) {
  $state.go(s)
};

// in my tests
spyOn($state, 'go');
element.find('a').click()
expect($state.go).toHaveBeenCalled()

But when I use ui-sref I don't know what object to spy on. How can I verify, that my application is in the right state?

23tux · Accepted Answer · 2014-08-26 10:25:55Z

18

I found it myself. After having a look into the angular ui router source code, I found this line inside the ui-sref directive:

// angular-ui-router.js#2939
element.bind("click", function(e) {
  var button = e.which || e.button;
  if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
    // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
    $timeout(function() {
      $state.go(ref.state, params, options);
    });
    e.preventDefault();
  }
});

When the element receives a click, the $state.go is wrapped in a $timout callback. So, in your tests, you have to inject the $timeout module. Then just do a $timeout.flush() like this:

element.find('a').click();
$timeout.flush();
expect($state.is('someState')).toBe(true);

answered Aug 26, 2014 at 10:25

23tux

14.8k16 gold badges98 silver badges195 bronze badges

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

1 Comment

robbie613 Over a year ago

Wow, didn't expect this. $timeout.flush() fixes this for the test but you have to remember to do it all the time.

Jscti · Accepted Answer · 2014-08-26 09:43:59Z

1

You can use :

[...]
element.find('a').click()
expect($state.is('someState')).toBe(true)

Hope this helps

answered Aug 26, 2014 at 9:43

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

1 Comment

23tux Over a year ago

Thanks for your answer. But this doesn't seem to work, when I look into $state.current the state doesn't switch. Any other ideas?

firebait · Accepted Answer · 2016-02-11 02:25:13Z

0

I think you need to use $rootScope.$apply() in order to have the state change.

answered Feb 11, 2016 at 2:25

firebait

5431 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

AngularJS ui-router: Test ui-sref

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related