Ui Router Extras Breaks My Unit Tests With Unexpected Results Error?

QUESTION: - Why are my tests failing when ui-router-extras (not normal ui-router) is install? - How can I use ui-router-extras and still have my tests pass? If you want to install

Solution 1:

This might be a result of some component having a dependency on $state in which case $state will be instantiated and default route will be executed. This is why a template of one of your controllers main.html is being fetched.

To bypass this, replace go() and transitionTo() of $state methods with dummies:

beforeEach( inject( function ( _$state_ ) {
        state = _$state_;
        spyOn( state, 'go' );
        spyOn( state, 'transitionTo' );
    } ) );

Solution 2:

Here's an alternate solution that doesn't nuke ui-router's transitionTo function.

---

First, the failing scenario can be reproduced by following these steps:

npm install yo generator-angular-fullstack;
yo angular-fullstack

Inject $state service by adding this line to client/app/app.js:

angular.module("yoAppName").run(function($state) {});

At this point, invoking grunt karma reports the Unexpected request: GET app/main/main.html because UI-Router is bootstrapped and tries to load the default route, which requests the route's template.

---

To address this, tell UI-Router to delay synchronizing the URL to the state, so we don't load the default route. In the controller spec, add $urlRouterProvider.deferIntercept(); to your test init code:

beforeEach(module('uiRouterExtrasKarmaBugApp'));
// Add the following linebeforeEach(module(function($urlRouterProvider) { $urlRouterProvider.deferIntercept(); }));

Solution 3:

1) Your test is failing because ui-router-extras is making an unexpected http GET request to app/main/main.html therefore test fails.

2) Actually there are a lot of suggestions in the issue that you linked to. I assume extra call is made to load the template for the default route, ie. otherwise. So overriding it might fix the problem:

beforeEach(module(function ($urlRouterProvider) {
    $urlRouterProvider.otherwise(function(){returnfalse;});
}));

Solution 4:

There are two solutions actually... Right after the module declaration.

1. you can add:

   beforeEach(module('stateMock'));

2. or you can manually, defer the intercept:

   beforeEach(module(function($urlRouterProvider) { $urlRouterProvider.deferIntercept(); }));