处理 angularjs 测试中的依赖关系
Dealing With Dependencies in angularjs Testing
这是为了工作(我有权限)所以我不能post确切的代码。
所以我必须测试一个大模块的控制器。该模块有一个很大的配置功能,带有一堆用于不同页面逻辑的控制器。
对于实际应用程序,它加载了 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) {
..
}
...
如您所见,我陷入了依赖地狱。我在 angular 站点上进行了示例测试,主要问题是依赖项和 myApp 对控制器不可见。 "ReferenceError: Can't find variable: myApp" 在 controllers/services
如果有人有更好的测试方法,我会洗耳恭听。
这与依赖地狱无关,也与测试无关。
代码似乎依赖于 myApp
全局变量,这与 Angular 模块的用途完全相反。
myApp
应该是在每个函数范围内动态定义的局部变量
(function () {
var myApp = angular.module('myApp', [...]);
...
})();
(function () {
var myApp = angular.module('myApp');
myApp.controller('controller', ...)
...
})();
这是为了工作(我有权限)所以我不能post确切的代码。
所以我必须测试一个大模块的控制器。该模块有一个很大的配置功能,带有一堆用于不同页面逻辑的控制器。
对于实际应用程序,它加载了 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) {
..
}
...
如您所见,我陷入了依赖地狱。我在 angular 站点上进行了示例测试,主要问题是依赖项和 myApp 对控制器不可见。 "ReferenceError: Can't find variable: myApp" 在 controllers/services
如果有人有更好的测试方法,我会洗耳恭听。
这与依赖地狱无关,也与测试无关。
代码似乎依赖于 myApp
全局变量,这与 Angular 模块的用途完全相反。
myApp
应该是在每个函数范围内动态定义的局部变量
(function () {
var myApp = angular.module('myApp', [...]);
...
})();
(function () {
var myApp = angular.module('myApp');
myApp.controller('controller', ...)
...
})();