Question

我正在尝试为现有的中型AngularJS + RequireJS应用程序设置Karma单元测试。我已经碰壁了，我在网上发现的所有内容都针对的是那些没有那么复杂的测试设置的小应用程序。我认为我误解了测试本身运行之前发生的事情的关键部分，如果有人可以帮我指出正确的方向，我将非常感激。

应用程序运行正常，因此RequireJS设置正确。测试似乎正确设置到它加载所需的所有文件（依赖项，应用程序文件，测试），并尝试运行测试。那时的问题是我的应用程序文件没有找到他们需要的所有依赖项。我最终会得到这样的错误：

Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- ClipboardResource <- ClipboardService

ClipboardService是app.clipboard模块的成员，它注入了我实际尝试测试的内容 - 我的MainController。 MainController是app.common模块。为清楚起见，app.clipboard和app.common都需要进入顶级“app”模块。 ClipboardService注入了ClipboardResource，显然ClipboardResource需要$ resource而且它找不到它。这是导致该错误的测试：

define([
    'angular',
    'angular-mocks',
    'mock'
], function(angular, mocks, app) { // these are all defined, I checked!

    describe('Controller: MainController', function() {

        var scope, subject;

        beforeEach(function() {

            module('app.clipboard');
            module('app.common');

            inject(function($rootScope, $controller) {
                scope = $rootScope.$new();
                subject = $controller('MainController', {
                    $scope: scope
                });
            });
        });

        describe('check if controller is on it\'s place', function() {
            it('should have loaded the subject', function() {
                expect(subject).toBeDefined();
            });
        });

        describe('check if scope is also on it\'s place', function() {
            it('should test scope to be defined', function() {
                expect(scope).toBeDefined();
            });
        });

    });
});

Mock正在拉动所有deps并引导应用程序，如下所示：

require([
     /* Angular application deps */
      'jquery', 
      'angular', 
      'angular-animate', 
      'angular-sanitize', 
      'angular-cookies',
      'angular-resource',
      'angular-route',
      'angular-mocks',

      'app.module' // loads all the other modules, including app.clipboard and app.common
], function($, angular) {
              $(function() { 
                /** Only Angular deps and addons get passed into this */
                var app = angular.bootstrap(document, [ 
                  'ngAnimate', 
                  'ngSanitize', 
                  'ngCookies',
                  'ngResource',
                  'ngRoute',
                  'ngMock',
                  'app'
                  ]);
                return app;
              });
});

我怀疑'mock.js'是罪魁祸首，但我不知道为什么。我很困惑为什么：

1）如果我在测试文件的顶部需要'mock'，那么当ClipboardResource尝试注入时，为什么不是ngResource呢？

2）为什么我需要在测试的beforeEach中定义模块？

module('app.clipboard');
module('app.common');

不应该已经被mock.js吸引了，因为它需要app.module来启动所有应用程序文件中的要求过程吗？

我意识到这是相当抽象的 - 我肯定会反对这个应用程序的大小！提前感谢您的帮助。

AngularJS + RequireJS + Karma测试设置

0 个答案: