Angular UI Router Testing With Resolve

Question

I am quite new to karma and I need desperate help on the same.

I have my routes defined as :

   angular
        .module('appRouter',['ui.router'])
        .config(function($stateProvider,$urlRouterProvider){
            $stateProvider
                .state('settings',{
                    url:'/settings',
                    templateUrl:'templates/settings.html'
                })
                .state('settings.profile',{
                    url:'/profile',
                    templateUrl:'templates/profile.html'
                })
                .state('settings.account',{
                    url:'/account',
                    templateUrl:'templates/account.html',
                    controller:function(resolveData){
                        console.log(resolveData);
                    },
                    resolve:{
                        resolveData : function($http){
                            var root = 'https://jsonplaceholder.typicode.com';
                            return $http.get(root+'/posts/1').then(function(response){

                                return response.data;
                            });
                        }
                    }
                });

            $urlRouterProvider.otherwise('/settings/profile');  

Now to test the basic routing functionality , I tried something like :

describe('UI Routerer Config',function(){
    var $state,$rootScope,$httpBackend,state = "settings.profile";

    beforeEach(function(){
        module('appRouter');
    });

    beforeEach(inject(function(_$rootScope_,_$state_,$templateCache){
        $rootScope = _$rootScope_;
        $state = _$state_;
        $templateCache.put('templates/profile.html','');
    }));

    it('should respond to url',function(){
        expect($state.href(state)).toBeDefined();
        expect($state.href(state)).toEqual('#!/settings/profile');
    });

});

It passed .

But still I cannot test with resolve .

I don't know how to do that ?

Could anyone guide me and explain me how to incorporate the tests for the same.

Please explain the steps as a newbie I find it hard.

UPDATE 2

describe('UI Routerer Config For Account',function(){
    var $state,$rootScope,$injector,$httpBackend,state = "settings.account";

    beforeEach(function(){
        module('appRouter');
    });

    beforeEach(inject(function(_$rootScope_,_$injector_,_$state_,$templateCache){
        $rootScope = _$rootScope_;
        $state = _$state_;
        $injector = _$injector_;
        $templateCache.put('templates/account.html','');
    }));


    it('should respond to url',function(){
        expect($state.href(state)).toBeDefined();
        expect($state.href(state)).toEqual('#!/settings/account');
    });

    it('should resolve "resolveData"',function(){
        const state = $state.get('settings.account');
        const resolveFn = state.resolve.resolveData;

        const responseData = {
            "userId": 1,
            "id": 1,
            "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
            "body": "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
        };

        expect($injector.annotate(resolveFn)).toEqual(['$http']);
        expect(resolveFn($http)).toEqual(responseData);
    });

});

But it failed saying

should resolve "resolveData"
     UI Routerer Config For Account
     ReferenceError: $http is not defined
    at Object.<anonymous> (test/controllers/main-controller-spec.js:97:26)

Answer 1

Hope this helps, and this is roughly from a config.routes I had tested:

inject((_$injector_, _$state_) => {
  $injector = _$injector_;
  $state = _$state_;
});

describe('foo', () => {
  it('should resolve "resolveData"', () => {
    const state = $state.get('settings.account');
    const resolveFn = state.resolve.resolveData;
    expect($injector.annotate(resolveFn)).toEqual(['$http']);

    // It's here that you would mock out response.data and
    // expect the resolveFn($http) to equal it; voila, you've
    // tested that (one) resolve!
    expect(resolveFn($http)).toEqual();
  });
});