处理angularjs测试中的依赖关系

时间:2016-06-03 15:38:19

标签: javascript angularjs node.js browserify karma-mocha

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

所以我必须测试一个大模块的控制器。该模块具有大型配置功能,带有一组控制器,用于不同页面的逻辑。

对于实际的应用程序,它装有凉亭,因为我正在使用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]) {
   ...
}]);

控制器(单独的fie):

'use strict';

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

你可以看到我依赖地狱。我在角度站点上进行了示例测试,主要问题是依赖项和myApp对控制器不可见。 “ReferenceError:无法在控制器/服务中找到变量:myApp”

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

1 个答案:

答案 0 :(得分:2)

这不是关于依赖地狱,也不是关于测试。

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

myApp应该是在每个函数范围中动态定义的局部变量

(function () {

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

})();
(function () {

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

})();