testing - 将服务注入(inject) Angular 单元测试时出现未知提供程序错误

Question

我是 Angular 的新手，已经查看了 Stack Overflow 上所有类似的相关问题，但没有一个对我有帮助。我相信我已正确设置所有内容，但在尝试将服务注入(inject)单元测试时仍然收到“未知提供程序”错误。我在下面列出了我的代码 - 希望有人能发现明显的错误!

我在单独的 .js 文件中定义我的模块，如下所示:

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

我在这里定义了一个名为 EventingService 的服务(为简洁起见删除了逻辑):

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

这是我使用 EventingService 的 Controller (这在运行时一切正常):

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

这是我的单元测试 - 它是我尝试注入(inject) 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

我已确保我的 jasmine 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 -->

我只是不明白为什么 Angular 会抛出这个错误来提示我的 EventingService。我的 Controller 在运行时运行良好 - 就在我尝试测试它时出现错误，所以我很好奇我是否搞砸了模拟/注入(inject)。

Angular 在测试方面的帮助是垃圾，所以我现在很困惑 - 任何人都可以提供任何帮助或建议，我们将不胜感激。谢谢。

Answer 1

我刚刚遇到这个问题并通过显式切换到使用 $injector 获取服务来解决它:

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

我希望我能告诉你为什么这行得通以及为什么简单

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

没有，但我没有时间调查内部结构。始终最好使用一种编码风格并坚持使用。

这种风格更好，因为您在测试中使用的变量名称是服务的正确名称。但它有点冗长。

还有另一个 Angular 魔术功能，它使用奇怪的变量名称，如 $rootScope，但我不喜欢它的怪异外观。

请注意，大多数时候人们会收到此错误是因为他们没有包含模块:

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