使用Karma Jasmine進行Angular JS測試

Question

我有這樣的示例路線 ：

  angular
        .module('appRouter',['ui.router'])
        .config(function($stateProvider,$urlRouterProvider){
            $stateProvider
                .....
                .....
                .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;
                            });
                        }
                    }
                });

            .....

它只是一個測試URL，我可以在線獲取示例JSON數據

https://jsonplaceholder.typicode.com/posts/1

我想測試一下狀態。

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

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

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

                $httpBackend.whenGET('https://jsonplaceholder.typicode.com/posts/1').respond(function(){
        return [
            200,{
                "userId": 1,
                "id": 1,
                "title": "...",
                "body": "..."
        }]
    });

    $httpBackend.expectGET('https://jsonplaceholder.typicode.com/posts/1');

    $injector.invoke(resolveFn);

    $httpBackend.flush();

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

    console.log(angular.mock.dump($scope));

    expect($scope.resolveData).toEqual({
         "userId": 1,
         "id": 1,
         "title": "...",
         "body": "..."
     });

但這失敗了。 話

1) should resolve "resolveData"
     UI Routerer Config For Account
     Expected undefined to equal Object({ userId: 1, id: 1, title: '...', body: '...' }).
    at Object.<anonymous> (test/controllers/main-controller-spec.js:114:36)

我究竟做錯了什么 ？

UPDATE

console.log(angular.mock.dump($scope)); 給出以下內容

請幫忙。

Answer 1

原始錯誤：

should resolve "resolveData"
UI Routerer Config For Account
TypeError: Cannot read property 'get' of undefined
  at resolveData (app/appRouter.js:25:41)
  at Object.<anonymous> (test/controllers/main-controller-spec.js:97:9)

我究竟做錯了什么？

您在單元測試中調用resolveFn() 。 該函數被定義為需要$http服務，並且該調用不傳遞$http服務（如提到的fingerpich ）。

要更正此問題，請允許angular使用$injector.invoke(resolveFn)來處理依賴項注入。

用插頭看這個動作。 請注意，測試確實因其他原因而失敗。 但是，（如果我理解正確的規則）這是一個不同的問題應該回答一個不同的問題（如果你需要更多的幫助）。

旁注：當在瀏覽器中打開站點（而不是單元測試）時，我希望它能夠正常工作，因為angular會將$http依賴項注入分配給resolveData的函數中。

看看也引用了fingerpich提到的博客的答案 。

這是我在學習單元測試AngularJS時發現的一個博客。

Answer 2

should resolve "resolveData"
UI Routerer Config For Account
TypeError: Cannot read property 'get' of undefined
 at resolveData (app/appRouter.js:25:41)
 at Object.<anonymous> (test/controllers/main-controller-spec.js:97:9)

要解決這個問題，你應該將$http傳遞給resolveData函數。

resolveFn($http); 

但最好寫這樣的測試此