处理 angularjs 测试中的依赖关系

Question

这是为了工作（我有权限），所以我不能发布确切的代码。

所以我必须测试一个大型模块的控制器。该模块有一个大型配置功能，其中包含用于不同页面逻辑的一堆控制器。

对于实际应用程序，它加载了 bower，这很烦人，因为我正在使用 Karma-Browserify 和 npm 进行测试。所以依赖是一团糟。我基本上必须将从 bower.json 加载的所有内容导入 package.json。

这是我的 karma.conf.js：

module.exports = function(config) {
  config.set({
    basePath: 'resources',
    browserify: {
      debug: true,
      transform: [ 'browserify-shim' ]
    },
    browsers: [ 'PhantomJS' ],
    captureTimeout: 60000,
    client: {
      mocha: {}
    },
    files: [
      'tests/assist/test.js',
      'assets/scripts/libs/logger.min.js'
    ],
    frameworks: [ 'browserify', 'phantomjs-shim', 'mocha', 'chai' ],
    port: 8080,
    preprocessors: {
      'tests/assist/controller.js': [ 'browserify' ]
    },
    reporters: [ 'mocha', 'coverage' ],
    singleRun: true
  });
};

所以下面的代码是我的 test.js（删除了一些公司特定的名称）。我还需要放 angular.mock。否则就不行了

require('angular');
require('angular-mocks');

//Main module needs these
jQuery = require('jquery');
require('angular-bootstrap');
require('angular-recaptcha');
require('angular-ui-router');
require('ngstorage');
require(**The path to the main module**);
require(**The path to a service it uses**);
require(**The path to a service it uses**);
require(**The path to a service it uses**);

describe('Blah', function () {
  beforeEach(angular.mock.module('myApp'));

  var $controller;

  beforeEach(angular.mock.inject(function(_$controller_) {
    $controller = _$controller_;
  }));

  describe('blahblah', function () {
    it('sets loading to true', function () {
      var $scope = {};
      var controller = $controller('controller', {$scope: $scope});
      assert($scope.showLoading === true);
    });
  });
});

主模块：

(function() {
    'use strict';
})();


// Jquery noconflict
jQuery.noConflict();

var myApp = angular.module('myApp', ['ui.router', 'ngStorage', 'vcRecaptcha', 'ui.bootstrap']);

myApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    ...
}])
.run([blah bunch of dependencies]) {
   ...
}]);

控制器（单独的文件）：

'use strict';

myApp.controller('controller', ['$scope', '$http', '$localStorage', 'service1', 'service2', 'service3',
    function ($scope, $http, $localStorage, service1, service2, service3) {
   ..
    }
...

如您所见，我处于依赖地狱中。我在角度站点上进行了示例测试，主要问题是依赖项和 myApp 对控制器不可见。 “ReferenceError: Can't find variable: myApp”在控制器/服务中

如果有人有更好的测试方法，我会全力以赴。

Answer 1

这与依赖地狱无关，也与测试无关。

代码似乎依赖于myApp 全局变量，这与Angular 模块的用途完全相反。

myApp应该是在每个函数作用域中动态定义的局部变量

(function () {

var myApp = angular.module('myApp', [...]);
...

})();

---

(function () {

var myApp = angular.module('myApp');
myApp.controller('controller', ...)
...

})();