단위 테스트 - 알 수없는 공급자 : stateParamsProvider <- stateParams

Question

PhraseListCtrl 및 PhraseService의 출력을 검사하는 단위 테스트를 실행하려고합니다.

GET /api/phrase-category/1551742a-5963-4d40-9abb-af7a6fb4ec5d/ 
HTTP 200 OK 
Allow: GET, HEAD, OPTIONS 
Content-Type: application/json 
Vary: Accept 

[ 
    { 
     "phrase_id": "f40e0e47-6457-463b-a5f9-9dc97bd2d0ce", 
     "phrase": "Training {{group}} to develop their {{attribute}} by ensuring they are comfortable with {{factor}}", 
     "category": "Coach" 
    }, 
    { 
     "phrase_id": "66314a72-07ae-445c-97c0-4f659387bbb2", 
     "phrase": "Assisting {{person}} in strength and conditioning work to improve {{factor}}", 
     "category": "Coach" 
    } 
] 

을 나는 다음과 같은 오류 메시지가 Unknown provider: stateParamsProvider <- stateParams가 계속 그러나 다음과 같이 예상 출력입니다. 어떻게 해결합니까?

컨트롤러

function PhraseListCtrl($scope, $stateParams, PhraseService, FilterService) { 

    $scope.categoryId = $stateParams.categoryId; 
    $scope.category = $stateParams.category; 

    PhraseService.getPhraseCategory($scope.categoryId).then(function(dataResponse) { 
     $scope.phraseCategory = dataResponse.data; 

     var replacers = FilterService.getItemFilter(); 

     $scope.phraseCategory.forEach(function(e){ 
      Object.keys(replacers).forEach(function(key){ 
       e['phrase'] = e['phrase'].replace(new RegExp(key, 'g'), replacers[key]); 
      }) 
     }) 
    }) 

} 

서비스

function PhraseService($http) { 

    this.getPhraseCategory = function (categoryId) { 

     return $http({ 
      method: 'GET', 
      url: server + '/api/phrase-category/' + categoryId, 
     }); 

    } 

} 

function FilterService() { 

    this.getItemFilter = function() { 

     var replacers = { 
      '{{group}}' : '<div class="button button-small button-outline button-positive button-side-padding">group</div>', 
      '{{attribute}}' : '<div class="button button-small button-outline button-assertive button-side-padding">attribute</div>', 
      '{{factor}}' : '<div class="button button-small button-outline button-assertive button-side-padding">factor</div>', 
      '{{person}}' : '<div class="button button-small button-outline button-positive button-side-padding">person</div>' 
     } 

     return replacers; 

    } 

} 

단위 테스트

describe('PhraseListCtrl', function() { 

var response; 
response = { 
    status: 200, 
    data: [{ 
    "phrase_id": "1551742a-5963-4d40-9abb-af7a6fb4ec5d", 
    "phrase": "Training {{group}} to develop their {{attribute}} by ensuring they are comfortable with {{factor}}", 
    "category": "Coach" 
    }] 
}; 

var stateParams; 

// Injecting the modules that would then be used in the tests 

beforeEach(module('dingocv.services')); 
beforeEach(module('dingocv.controllers')); 

beforeEach(inject(function($controller, $rootScope, _PhraseService_, _FilterService_, stateParams) { 
    $scope = $rootScope.$new(); 
    PhraseService = _PhraseService_; 
    FilterService = _FilterService_; 
    stateParams = { 
    categoryId: "1551742a-5963-4d40-9abb-af7a6fb4ec5d", 
    category: "Coach" 
    } 

    // Creating a spy for this method so that it doesn't call the original Service method. 

    spyOn(PhraseService, 'getPhraseCategory').and.callFake(function(){ 
    return{ 
     then: function(successCallback){ 
     successCallback(response); 
     } 
    } 
    }); 

    PhraseListCtrl = $controller('PhraseListCtrl', { 
    $scope: $scope 
    }); 
})); 

describe('#initialisation', function() { 
     it('should initialise the controller\'s scope with a list of phrases by category', function(){ 
      expect(PhraseService.getPhraseCategory).toHaveBeenCalled(); 
      expect($scope.phraseCategory).toBeDefined(); 
      expect($scope.phraseCategory.length).toEqual(1); 
    }); 

}); 

오류 출력

Chrome 53.0.2785 (Windows 10 0.0.0) PhraseListCtrl #initialisation should initialise the controller's scope with a list of phrases by category FAILED 
     Error: [$injector:unpr] Unknown provider: stateParamsProvider <- stateParams 
     http://errors.angularjs.org/1.5.3/$injector/unpr?p0=stateParamsProvider%20%3C-%20stateParams 
      at D:/myapp-mobile/www/lib/ionic/js/ionic.bundle.js:13438:12 
      at D:/myapp-mobile/www/lib/ionic/js/ionic.bundle.js:17788:19 
      at Object.getService [as get] (D:/myapp-mobile/www/lib/ionic/js/ionic.bundle.js:17941:39) 
      at D:/myapp-mobile/www/lib/ionic/js/ionic.bundle.js:17793:45 
      at getService (D:/myapp-mobile/www/lib/ionic/js/ionic.bundle.js:17941:39) 
      at injectionArgs (D:/myapp-mobile/www/lib/ionic/js/ionic.bundle.js:17965:58) 
      at Object.invoke (D:/myapp-mobile/www/lib/ionic/js/ionic.bundle.js:17987:18) 
      at Object.workFn (D:/myapp-mobile/www/lib/angular-mocks/angular-mocks.js:3085:20) 
     Error: Declaration Location 
      at window.inject.angular.mock.inject (D:/myapp-mobile/www/lib/angular-mocks/angular-mocks.js:3047:25) 
      at Suite.<anonymous> (unit-tests/phrase-list.controller.tests.js:20:16) 
      at unit-tests/phrase-list.controller.tests.js:1:3 
     ReferenceError: PhraseService is not defined 
      at Object.<anonymous> (unit-tests/phrase-list.controller.tests.js:46:22) 
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (1 FAILED) (0.132 secs/0.016 secs) 
Chrome 53.0.2785 (Windows 10 0.0.0): Executed 2 of 2 (1 FAILED) (0.474 secs/0.147 secs) 
TOTAL: 2 FAILED, 2 SUCCESS 

Answer 1

종속성 주입 문제였습니다. 수정 된 내용 :

describe('PhraseListCtrl', function() { 

    var $controller, $stateParams, $PhraseService, $FilterService; 

    $stateParams = { 
    categoryId: "1551742a-5963-4d40-9abb-af7a6fb4ec5d", 
    category: "Coach" 
    }; 

    var response = { 
    status: 200, 
    data: [{ 
     "phrase_id": "1551742a-5963-4d40-9abb-af7a6fb4ec5d", 
     "phrase": "Training {{group}} to develop their {{attribute}} by ensuring they are comfortable with {{factor}}", 
     "category": "Coach" 
    }] 
    }; 

    beforeEach(module('dingocv.services')); 
    beforeEach(module('dingocv.controllers')); 

    beforeEach(inject(function (_$controller_, _PhraseService_, _FilterService_) { 
    $controller = _$controller_; 
    $PhraseService = _PhraseService_; 
    $FilterService = _FilterService_; 

    spyOn(_PhraseService_, 'getPhraseCategory').and.callFake(function(){ 
     return{ 
     then: function(successCallback){ 
      successCallback(response); 
     } 
     } 
    }); 
    })); 

    describe('$scope.correct', function() { 

    var $scope, controller; 

    beforeEach(function() { 
     $scope = {}; 
     controller = $controller('PhraseListCtrl', {$scope: $scope, $stateParams: $stateParams, PhraseService: $PhraseService, FilterService: $FilterService}); 
    }); 

    it('gary is correct', function() { 
     expect($scope.gary()).toEqual('correct'); 
    }); 

    it('should initialise the controller\'s scope with a list of phrases by category', function(){ 
     expect($PhraseService.getPhraseCategory).toHaveBeenCalled(); 
     expect($scope.phraseCategory).toBeDefined(); 
     expect($scope.phraseCategory.length).toEqual(1); 
     expect($scope.phraseCategory[0].id).toEqual(response.data[0].id); 
     expect($scope.phraseCategory[0].category).toEqual(response.data[0].category); 
    }); 

    }); 

});