Cognitronic
Cognitronic

Reputation: 1436

How to unit test onEnter and resolve of ui-router state

I'm trying to test an Angular UI Bootstrap modal that is being called from the onEnter of the following state:

.state("profile.index.edit.services", {
        url: "/edit/services/:serviceCode",
        parent:"profile.index",
        onEnter: ['$stateParams', '$state', '$modal',function($stateParams, $state, $modal) {
            $modal.open({
                templateUrl: 'profile/edit-services-modal.html',
                controller: 'ProfileEditServicesController',
                resolve: {
                    profileData: function(CacheService){
                        return CacheService.getItem(CacheService.Items.Profile.loadedProfile);
                    },
                    allServicesList: function(ProfileService){
                        return ProfileService.getAllServicesList($stateParams.serviceCode,$stateParams.orgId);
                    },
                    serviceCode: function() {
                        return $stateParams.serviceCode;
                    }
                }                   
            }).result.then(function(result) {
                if (result) {
                    return $state.transitionTo("profile.index", { orgId: $stateParams.orgId });
                }
                else { // cancel
                    return $state.transitionTo("profile.index", { orgId: $stateParams.orgId }); // don't reload
                }
            }, function () {
                // executes on close/cancel/ESC
                return $state.transitionTo("profile.index", { orgId: $stateParams.orgId });
            });
        }]
    })  

I've been banging my ahead against this trying many different things to set the test up, but can't seem to figure it out. Any plunkers or suggestions are greatly appreciated!!!!

By the way, the state above is a descendant of these states, which I've been able to write tests for that pass:

.state('profile.index', {
        url: '/:orgId',
        views: {
            'profile-index@profile': {
                templateUrl: 'profile/view-profile.html',
                controller: 'ProfileController'
            },
            'header@': {
                templateUrl: 'common/layout/header.html',
                controller: 'HeaderController'
            },
            'footer@':{
                templateUrl: 'common/layout/footer.html',
                controller: 'FooterController'
            }
        },
        resolve: {
            profileData: function(ProfileService, $stateParams){
                return ProfileService.getProfile($stateParams.orgId, true);
            }
        }
    })
    .state('profile.index.edit', {
        url: '',
        abstract: true
    })

Upvotes: 0

Views: 494

Answers (1)

Doug Chamberlain
Doug Chamberlain

Reputation: 11341

did you ever figure this out? you should have passed a named controller, that way you could test that controller (since it would just be a function) directly instead of relying on onEnter being fired.

Upvotes: 1

Related Questions