Error with unit testing

[davitykale-zz]

I'm working on an Angular app that uses Angular UI-Router for routing and maintaining state. I am having a hard time getting my unit test to even compile. I've checked out the other GitHub issues relating to ui-router and unit testing, and nothing seems to help. It seems that no matter what I do, I keep getting the following error:

Error: State '' is not navigable

I have the following states set up in my app, as well as the following redirects:

app.config(function($stateProvider, $urlRouterProvider) {

var paramList = '?beds&lat&lon&zoom';

$urlRouterProvider
    .when('', '/')
    .when('/', '/search')
    .when('/search', '/search/list')
    .otherwise('');

$stateProvider
    .state('search', {
        abstract: true,
        url: '/search',
        templateUrl: 'views/search.html',
        controller: 'SearchCtrl'
     })
        .state('search.list', {
            url: '/list' + paramList,
            templateUrl: 'views/search-list.html'
         })
        .state('search.map', {
            url: '/map' + paramList,
            templateUrl: 'views/search-map.html'
        })
    .state('search.listing', {
        url: '/listing/:id' + paramList,
        templateUrl: 'views/search-listing.html'
    })
    .state('favorites', {
        url: '/favorites',
        templateUrl: 'views/favorites.html'
    })
});

I've eaten up an entire day trying to get a single test to work, but no matter what approach I take, I always end up at this same error. I have an e2e test running just fine.

[gavinmcdermott]

Thanks for posting @davitykale. I've had similar problems after switching to UI-Router with respect to unit testing my controllers.

[timkindberg]

First thing I thought is that it's trying to navigate to the search state during all of your when calls. Your search state is abstract though, aka non-navigable. Trying re-routing the "/" directly to "/search/list".

[davitykale-zz]

@timkindberg tried that - the same issue happened

[nateabele]

@davitykale Do you think you could get the test up and running in a plunkr? I'll take a look at it.

[timkindberg]

Also try removing the URL from the search state, just curious.

[davitykale-zz]

The test seems to work if I encapsulate the beforeEach method in a $timeout. Stumbled upon this by checking $state.current.name in a method that is watching for the $stateChangeStart broadcast. It seems like, upon hitting the index url, the app redirects to '/search/list', and then an error occurs if I check $state.current.name at this moment...maybe because I have a state defined for '/search/list' and a bunch of parameters and not just '/search/list'...thoughts? Should state exist for '/search/list', even if no parameters are provided?

[davitykale-zz]

Tried setting the url for the search.listing state to just /search/list, but the same error occurs (State '' is not navigable) when the browser navigates to /search/list. Is this just a weird timing issue or am I fundamentally structuring something incorrectly?

[timkindberg]

Your code looks pretty typical to me... I don't see anything wrong with it. Can you show us the stack trace from dev tools when the code pauses on the error?

[laurelnaiad]

I have no idea if it's related to unit tests, but

    .when('', '/')
    .when('/', '/search')
    .when('/search', '/search/list')
    .otherwise('');

If I hit an undefined url, wouldn't I be redirected to "", then "/", then "/search" and then "search/list"? I'm a bit confused about your intentions...

If you want all of those to point to /search/list, you might write:

    .when('', '/search/list')
    .when('/', '/search/list')
    .when('/search', '/search/list')
    .otherwise('/search/list');

Perhaps I'm just misunderstanding what those redirects are supposed to do, though.

[laurelnaiad]

I'm also drawing a mind blank as to what happens when you navigate to a url that's set for an abstract state when no child of that state is defined with a url of "".

[davitykale-zz]

@stu-salsbury the intention is to drop the user in the "index" route and let the app handle whatever logic it needs to. obviously right now the code is sort of unnecessarily lengthy, but I'm envisioning a situation where the index route might redirect to search or a different route, and then search may redirect to map or list depending on where the user was last. hopefully that makes sense...this is just a small demo app to get me thinking about building out the larger scale app in the future. I tried to just have the code handle just the '/' route, but for some reason it seems that $urlRouterProvider requires me to also address the situation of this mystery '' route,

[laurelnaiad]

Maybe I'm misunderstanding but it seems like you're dropping the user into a path of 3 sequential redirects to get them where you want them to be (assuming they don't hit the otherwise route, in which case its 4 redirects in a row). Theoretically that shouldn't cause a problem other than some extra work for the browser. However, I'm still not clear on what happens when you visit an abstract route that doesn't have a child with an empty URL (state 'search')... I just don't know enough about how that part of the logic works.

Can you try this set of redirects?

    .when('', '/search/list')
    .when('/', '/search/list')
    .otherwise('/search/list');

That should be functionally equivalent to what you have, except it will never visit an abstract state's url. Once you've done that, I wonder what you'll see when you do visit /search in the browser.

Again, I'm not really sure how this is playing out, but those redirects in sequence and that one of them passes through an absract state's URL make me wonder.

[davitykale-zz]

@stu-salsbury I tried those set of redirects, and the problem still persists. When I go to /search, the app redirects to /search/list, which I assume is because it falls in the .otherwise category.

For context, when I run the following code:

app.run(function($rootScope, $state, $location) {
    $rootScope.$on('$stateChangeStart', function() {
        console.log($location.url());
        console.log($state.href($state.current.name));
    }
}

...I get the following error when the app loads (in case you're still interested, @timkindberg):

I should mention that the app still functions fine after this initial console error, but the unit test won't work without a $timeout. Just want to make sure I'm not doing anything seriously wrong that will come back to haunt me later on in development. Do you see this as doing something fundamentally wrong?

[laurelnaiad]

If you set that up in the run function then you'll get that because you're coming from nowhere. If you set up the listener after run has run and the location is set and you're in a state, you wouldn't have that problem.

The alternative you probably want is to just account for the possibility that $state.current.name is an empty string (because the app hasn't finished "run")... it looks like you get an empty string for current.name. $state.href should probably say that the state doesn't exist instead of saying it isn't navigable, but you can work around that if you just test whether or not you have a state name before trying to call $state.href.

[gavinmcdermott]

Thanks @stu-salsbury. This is helpful for me as well -- much appreciated. In looking at the initial question, however, I'm still wondering why this error arises in the unit testing with this setup (@davitykale mentioned that they passed when wrapped in a $timeout as well).