Angular JS/Karma Unit Testing with Angular UI-Router

Question

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. 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.

SonOfNun · Accepted Answer · 2013-07-30 00:05:57Z

1

ui-router adds an internal state for '' automatically, so that is the error you are getting. I recommend adding a '/' url for a base state and change the 'otherwise' invocation to redirect to '/' instead of ''. The internal '' state is being attempted because of your .otherwise('') call. So perhaps try this:

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

answered Jul 30, 2013 at 0:05

SonOfNun

9577 silver badges11 bronze badges

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

Comments

xrd · Accepted Answer · 2013-07-16 06:11:37Z

0

At first glance I would say it looks like the $stateProvider is telling you you need to put an empty state in there. Add this to the list of states.

state( '', { ... } )

answered Jul 16, 2013 at 6:11

xrd

4,0917 gold badges35 silver badges41 bronze badges

1 Comment

davitykale Over a year ago

I tried this, and the error I get now is Uncaught Error: State ''' is already defined from app.

Collectives™ on Stack Overflow

Angular JS/Karma Unit Testing with Angular UI-Router

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related