使用 Resolve 进行 Angular UI 路由器测试

Question

我对 karma 很陌生，在这方面我需要绝望的帮助。

我的路线定义为：

   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');  

现在为了测试基本路由功能，我尝试了类似的方法：

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');
    });

});

通过了。

但我仍然无法使用 resolve 进行测试。

我不知道该怎么做？

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

作为新手请解释一下步骤，我觉得很难。

更新 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);
    });

});

但是说失败了

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

希望这会有所帮助，这大致来自我测试过的 config.routes：

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();
  });
});