在angularjs测试中处理依赖项

问题描述

这是工作(我有权限)，所以我无法发布确切的代码.

This is for work (I have permission) so I can't post exact code.

因此，我必须测试大型模块的控制器.该模块具有大型配置功能，带有一堆用于处理不同页面逻辑的控制器.

So I have to test controllers of a large module. The module has a large config function with a bunch of controllers for the logic of the different pages.

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

For the actual application it's loaded with bower, which is irritating since I'm testing with Karma-Browserify and npm. So the the dependencies are a mess. I basically have to import everything that was loaded from bower.json to package.json.

这是我的karma.conf.js:

This is my 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.否则将无法正常工作

So the code below this is my test.js (removing some company-specific names). Also I need to put angular.mock. or it won't work

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]) {
   ...
}]);

控制器(单独的文件):

The controller (separate fie):

'use strict';

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

如您所见，我处于依赖地狱.我在有角度的站点上运行了示例测试，主要问题是依赖项和myApp对控制器不可见. 控制器/服务中的"ReferenceError:找不到变量:myApp"

As you can see I'm in dependency hell. I got the example test on the angular site to work, the main problem is with the dependencies and myApp not being visible to the controller. "ReferenceError: Can't find variable: myApp" in controllers/services

如果有人有更好的测试方法，我将不知所措.

If anyone has a better way of going about testing I'm all ears.

推荐答案

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

This is not about dependency hell, not about testing also.

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

The code seems to rely on myApp global variable, this is strictly opposite to what Angular modules are for.

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

myApp should be a local variable that is defined dynamically in each function scope

(function () {

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

})();

---

(function () {

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

})();

这篇关于在angularjs测试中处理依赖项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！