javascript - 处理 angularjs 测试中的依赖关系

Question

这是为了工作(我已获得许可)，因此我无法发布确切的代码。

所以我必须测试一个大模块的 Controller 。该模块有一个很大的配置功能，有一堆 Controller 用于不同页面的逻辑。

对于实际的应用程序，它加载了 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]) {
   ...
}]);

Controller (单独的文件):

'use strict';

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

如你所见，我正处于依赖 hell 之中。我在 Angular 站点上进行了示例测试，主要问题是依赖项和 myApp 对 Controller 不可见。 “ReferenceError:在 Controller /服务中找不到变量:myApp”

如果有人有更好的测试方法，我会洗耳恭听。

Answer 1

这与依赖 hell 无关，也与测试无关。

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

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

(function () {

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

})();

<小时/>

(function () {

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

})();