在向角單元測試注入服務時獲取未知提供者錯誤

Question

我對Angular相當陌生，並且已經回顧了Stack Overflow上所有類似的相關問題，但都沒有幫助過我。我相信我已經正確設置了一切，但在嘗試將服務注入到單元測試時仍然出現「未知提供者」錯誤。我在下面列出了我的代碼 - 希望有人可以發現一個明顯的錯誤！

我定義我模塊在一個單獨的的.js文件是這樣的：

angular.module('dashboard.services', []); 
angular.module('dashboard.controllers', []); 

這裏是我定義了一個稱爲EventingService服務（具有爲簡潔移除邏輯）：

angular.module('dashboard.services').factory('EventingService', [function() { 
    //Service logic here 
}]); 

這裏是我使用EventingService的控制器（這一切在運行時都可以正常工作）：

angular.module('dashboard.controllers') 
    .controller('Browse', ['$scope', 'EventingService', function ($scope, eventing) { 
     //Controller logic here 
}]); 

這裏是我的單元測試 - 它在那裏我試圖注入，當我運行單元測試會導致一個錯誤的EventingService行：

describe('Browse Controller Tests.', function() { 
    beforeEach(function() { 
     module('dashboard.services'); 
     module('dashboard.controllers'); 
    }); 

    var controller, scope, eventingService; 

    beforeEach(inject(function ($controller, $rootScope, EventingService) { 
     scope = $rootScope.$new(); 
     eventingService = EventingService 

     controller = $controller('Browse', { 
      $scope: scope, 
      eventing: eventingService 
     }); 
    })); 


    it('Expect True to be True', function() { 
     expect(true).toBe(true); 
    }); 
}); 

當我運行測試我得到這個錯誤：

Error: Unknown provider: EventingServiceProvider <- EventingService

我已確保我的茉莉花specrunner.html文件擁有所有必要的源文件（這是一個Asp.Net MVC項目）：

<!-- Include source files here... --> 
@Scripts.Render("~/bundles/jquery") 
<script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/angular-mocks.js")"></script>     

<script type="text/javascript" src="@Url.Content("~/App/scripts/app.js")"></script>      <!-- Angular modules defined in here --> 
<script type="text/javascript" src="@Url.Content("~/App/scripts/services/eventing.js")"></script>   <!-- My Eventing service defined here --> 


<script type="text/javascript" src="@Url.Content("~/App/scripts/controllers/browse.js")"></script>  <!-- My Browse controller defined here --> 

<!-- Include spec files here... --> 
<script type="text/javascript" src="@Url.Content("~/App/tests/browse.js")"></script>      <!-- The actual unit test here --> 

我不僅僅是C一個不明白爲什麼Angular會拋出這個錯誤，抱怨我的EventingService。我的控制器在運行時工作正常 - 只是當我試圖測試它時，我得到一個錯誤，所以我很好奇我是否已經嘲笑/注入了某些東西。

在測試上的角度幫助是垃圾，所以我目前難住 - 任何人可以給予的幫助或建議將非常感激。謝謝。

Answer 1

如果你的控制器（下dashboard.controllers模塊定義）依賴於某些服務被封閉的不同模塊（dashboard.services）比你需要引用你的模塊簽名的依賴模塊：

angular.module('dashboard.services', []); 
angular.module('dashboard.controllers', ['dashboard.services']); 

Answer 2

你試過定義這就要看你的其它聚合的模塊，像這樣的附加模塊：

angular.module('dashboard', [ 'dashboard.services', 'dashboard.controllers' ]) 

所以，你可以在beforeEach指定中有規定，像這樣兩個子模塊一個模塊：

describe('Browse Controller Tests.', function() { 
    beforeEach(function() { 
     module('dashboard'); 
    }); 

    var controller, scope, eventingService; 

    beforeEach(inject(function ($controller, $rootScope, EventingService) { 
     scope = $rootScope.$new(); 
     eventingService = EventingService 

     controller = $controller('Browse', { 
      $scope: scope, 
      eventing: eventingService 
     }); 
    })); 


    it('Expect True to be True', function() { 
     expect(true).toBe(true); 
    }); 
}); 

Answer 3

我只是碰到了這一點，並通過切換到使用$注射器明確獲得服務解決它：

var EventingService, $rootScope; 
beforeEach(inject(function($injector) { 
    EventingService = $injector.get('EventingService'); 
    $rootScope = $injector.get('$rootScope'); 
})); 

我希望我能告訴你爲什麼這個作品，爲什麼簡單的

beforeEach(inject(function(EventingService) { .... })); 

沒有，但我沒有時間去調查內部。總是最好使用一種編碼風格並堅持下去。

這種風格是更好的是你在測試中使用的變量的名稱是服務的正確名稱。但它有點冗長。

還有另一個角魔術功能，使用奇怪的變量名稱，如$ rootScope但我不喜歡那種哈克的外觀。

注意的是，大多數時候人們，因爲他們不包括模塊收到此錯誤：

beforeEach(module('capsuling')); 
beforeEach(module('capsuling.capsules.services')); 

Answer 4

雖然這個問題是相當老的我失去了顯著時間解決與此類似，即問題：

Error: Unknown provider: SomeServiceProvider <- SomeService 

因此，我要在這裏離開這個問題的另一個可能的原因。希望對某人有幫助。

就我而言，我已經在我的項目兩個模塊完全相同的名稱，但與正在創建不同的相關性，即具有兩個不同的.js文件：

angular.module('moduleName', [dependencies])) 

從角文檔：

Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module

結論：事實證明，在測試中注入的是具有錯誤依賴關係的模塊。從模塊中刪除錯誤地創建的第二個參數解決了問題。