使用控制器模块进行Karma / Jasmine测试Angular

Question

我正在尝试测试我的应用程序，该应用程序在其自己的模块上定义了每个控制器，即，不作为应用程序模块的控制器，然后将其加载为主应用程序模块的依赖项。 当我尝试使用Karma / Jasmine运行仅检查loginController是否已定义的测试时，得到以下输出：

'预期未定义。

编辑

我更新了login.controller.spec并将业力浏览器切换为chrome，这为我提供了更多有用的调试信息。 现在，我得到一个与工厂有关的错误，该工厂在主应用程序文件中添加到$ httpProvider.interceptors中：

未知提供者：authFactoryProvider <-authFactory <-$ http <-$ translateStaticFilesLoader <-$ translate

我发现与此相关的类似问题已通过包含angular-translate-loader-static-files.js解决，该问题在因果运行时将被加载：

调试[网络服务器]：投放（缓存）：/ path / to / my / app / bower_components / angular-translate-loader-static-files / angular-translate-loader-static-files.js

如何使用业力解决所有这些依赖性问题？

index.js

'use strict';

angular.module('app',
    [
    //'mockBackend', //uncomment when loading mock backend
    'ngAnimate',
    'ngCookies',
    'ngTouch',
    'ngSanitize',
    'ngResource',
    'ui.bootstrap',
    'ui.router',
    'ui.router.stateHelper',
    'pascalprecht.translate',
    'utilsModule',
    'loginModule',
    'vsmsPackageModule',
    'vsmsCampaignModule',
    'vdmsCampaignModule',
    'vdmsDashboardModule',
    'daterangepicker',
    'ui.event',
    'idmAdminModule',
    'helpdeskModule',
    'ncy-angular-breadcrumb',
    'rzModule',
    'vsmsDashboardModule',
    'highcharts-ng',
    'permission',
    'dndLists'
    ])
  .config(function ($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider, $translateProvider, $breadcrumbProvider, $compileProvider) {
    $urlRouterProvider.otherwise('/');
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
      $httpProvider.defaults.headers.get = {};
    }
    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';

    $locationProvider.html5Mode({
      enabled: false,
      requireBase: false
    });
    $translateProvider.useSanitizeValueStrategy('sanitize');
    $translateProvider.useStaticFilesLoader({
      prefix: '/locales/',
      suffix: '.json'
    });

    $translateProvider
    .preferredLanguage('en_us')
    .fallbackLanguage('en_us');

    $breadcrumbProvider.setOptions({
      templateUrl: 'components/templates/breadcrumb.tpl.html'
    });
    $compileProvider.debugInfoEnabled(false);
    // $compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);
    $httpProvider.interceptors.push('authFactory');
        $httpProvider.interceptors.push('headersFactory');
   })

login.module.js

angular.module('loginModule', []);

login.controller.js

  angular.module('loginModule')
  .controller('loginController', login);

  login.$inject = [
      '$log',
      '$uibModal',
      '$rootScope',
      'storageFactory',
      'loginFactory',
      '$state',
      'RoleStore',
      'PermissionStore'
  ];

  function login($log, $uibModal, $rootScope, storageFactory, loginFactory, $state, RoleStore, PermissionStore) {

      /* jshint validthis: true */
      var vm = this;
      vm.loginUser = loginUser;
      vm.forgotPassword = forgotPassword;
      vm.errorCode = null;
      PermissionStore.clearStore();

      function loginUser() {
      ...

我只是想测试该控制器是否存在，并且无法克服该错误：

预期未定义。

login.controller.spec.js

describe('loginController', function() {

  beforeEach(module('app'));

  var $controller,
  $scope,
  $log,
  $uibModal,
  $rootScope,
  storageFactory,
  loginFactory,
  $state,
  RoleStore,
  PermissionStore,
  vsmsCoreFactory;

  beforeEach(inject(function(_$controller_, _$log_, _$uibModal_, _$rootScope_, _storageFactory_, _loginFactory_, _$state_, _RoleStore_, _PermissionStore_, _vsmsCoreFactory_){
    $controller = _$controller_;
    $scope = $rootScope.new();
    $log = _$log_;
    $uibModal = _$uibModal_;
    $rootScope = _$rootScope_;
    storageFactory = _storageFactory_;
    loginFactory = _loginFactory_;
    $state = _$state_;
    RoleStore = _RoleStore_;
    PermissionStore = _PermissionStore_;
    vsmsCoreFactory = _vsmsCoreFactory_;
  }));

  describe('vm.loginUser', function() {
    it('should be defined', function() {
      var loginController = $controller('loginController', {
        $log: $log,
        $uibModal: $uibModal,
        $rootScope: $rootScope,
        storageFactory: storageFactory,
        loginFactory: loginFactory,
        $state: $state,
        RoleStore: RoleStore,
        PermissionStore: PermissionStore,
        vsmsCoreFactory: vsmsCoreFactory
      });
      expect(loginController).toBeDefined();
      // expect(testController.model.name).toEqual("controllerAs vm test");
    });
  });

});

unit-tests.js

'use strict';

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();

var wiredep = require('wiredep');

var paths = gulp.paths;

function runTests (singleRun, done) {
  var bowerDeps = wiredep({
    directory: 'bower_components',
    exclude: ['bootstrap-sass-official'],
    dependencies: true,
    devDependencies: true
  });

  var testFiles = bowerDeps.js.concat([
    './src/app/index.js',
    './src/components/scripts/ui-bootstrap-custom-tpls-2.1.3.js',
    './src/{app,components}/**/*.module.js',
    './src/{app,components}/**/*.factory.js',
    './src/{app,components}/**/*.controller.js',
    './src/{app,components}/**/*.spec.js'
  ]);

  gulp.src(testFiles)
    .pipe($.karma({
      configFile: 'karma.conf.js',
      action: (singleRun)? 'run': 'watch'
    }))
    .on('error', function (err) {
      // Make sure failed tests cause gulp to exit non-zero
      throw err;
    });
}

gulp.task('test', function (done) { runTests(true /* singleRun */, done) });
gulp.task('test:auto', function (done) { runTests(false /* singleRun */, done) });

Answer 1

请参考下面的链接，它已经被回答。

如何在Jasmine测试中注入控制器依赖项？

loginController依赖项未在单元测试中传递。

$ controller的第二个参数用于控制器依赖性。

空的依赖关系被传递。

$ controller（'loginController'，{}）;

在测试loginColtroller之前，请确保已加载所有从属模块。

我已经修改了您的代码。 我希望它能起作用。

'use strict';

describe('loginController', function() {

  beforeEach(module('loginModule'));

  var loginController;

  beforeEach(inject(function($controller, _$log_, _$uibModal_, _$rootScope_, _storageFactory_, _loginFactory_, _$state_, _RoleStore_, _PermissionStore_ ){
    scope = _$rootScope_.$new();
    loginController = $controller('loginController', 
    {   // all dependencies has to be passed in order
        '$log' : _$log_,
        '$uibModal' : _$uibModal_,
        '$rootScope' : _$rootScope_,
        'storageFactory' : _storageFactory_,
        'loginFactory': _loginFactory_,
        '$state': _$state_,
        'RoleStore': _RoleStore_,
        'PermissionStore': _PermissionStore_
    }, 
    {});
  }));

  it('should be defined', function() {
    expect(loginController).toBeDefined();
  });

});

Answer 2

问题出在您的login.module.js文件中。

在定义ui.bootstrap ，必须注入ui.bootstrap和ui.router作为依赖loginModule 。 否则，在定义loginController时将无法获取$uibModal和$state 。

这应该是您的loginModule的定义

angular.module('loginModule', ['ui.bootstrap', 'ui.router']);

PS ：我假设在这里， storageFactory ， loginFactory ， RoleStore和PermissionStore是在loginModule本身上定义的。

希望这可以帮助！