Angular单元测试工厂注入

Question

我已经看到了这个问题的答案，但是没有一个解决方案适合我。我得到一个错误Error: [ng:areq] Argument 'fn' is not a function, got undefined，导致我的测试失败。将工厂注入非存根工厂的测试规范的正确方法是什么?

登录模块

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

登录控制器

  (function(){
      'use strict';
      angular.module('loginModule')
      .controller('loginController', login);
      login.$inject = [
          '$log',
          '$uibModal',
          '$rootScope',
          'storageFactory',
          'loginFactory',
          '$state',
          'RoleStore',
          'PermissionStore',
          'vsmsCoreFactory'
      ];
      function login($log, $uibModal, $rootScope, storageFactory, loginFactory, $state, RoleStore, PermissionStore, vsmsCoreFactory) {
          /* jshint validthis: true */
          var vm = this;
          vm.loginUser = loginUser;
          vm.forgotPassword = forgotPassword;
          vm.errorCode = null;
          PermissionStore.clearStore();
          vsmsCoreFactory.getHashFunction()
            .then(function(response) {
                if(response) {
                  storageFactory.setHashFunction(response); // unknown provider
              }
            });
          function loginUser() {
          ...

登录控制器规范

describe('loginController', function() {
  var $controller;
  beforeEach(module('loginModule'));
  beforeEach(inject(function(_$controller_){
    $controller = _$controller_;
  }));
  describe('vm.loginUser', function() {
    it('should be defined', function() {
      var loginController = $controller('loginController');
      expect(loginController.loginUser).toBeDefined();
    });
  });
});

单元测试文件

'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/components/scripts/ui-bootstrap-custom-tpls-2.1.3.js',
    './src/app/index.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) });

应用

'use strict';
angular.module('fotaAdminPortal',
    [
    'ngAnimate',
    'ngCookies',
    'ngTouch',
    'ngSanitize',
    'ngResource',
    'ui.bootstrap',
    'ui.router',
    'ui.router.stateHelper',
    'pascalprecht.translate',
    'utilsModule',
    'loginModule',
    ...
    ])

日志

Chrome 54.0.2840 (Mac OS X 10.11.6) loginController vm. exeloginUser应该定义为FAILED错误:[$injector:unpr]未知提供商:storageFactoryProvider <- storageFactory <- loginController

Answer 1

fotaAdminPortal模块未加载测试，因此vsmsCoreFactory从未注册。

也不需要手动将服务传递给控制器，因为当你创建它时注入器会自动这么做。当您需要传递一些不是全局注册的服务(如$scope)或模拟单个控制器实例的服务时，手动传递服务是有用的。

工厂的模拟只是一个未定义的变量，当依赖于它们的逻辑试图调用不存在的方法时，会导致错误。您需要在这些模拟上正确地存根任何方法。但是暂时把这些放在一边，你的测试应该是这样的:

describe('loginController', function() {
  var $controller;
  beforeEach(module('fotaAdminPortal'));
  beforeEach(inject(function(_$controller_){
    $controller = _$controller_;
  }));
  describe('vm.loginUser', function() {
      it('should be defined', function() {
        var loginController = $controller('loginController');
        expect(loginController.loginUser).toBeDefined();
      });
  });
});

如果你想单独加载loginModule，那么你需要将vsmsCoreFactory提取到另一个模块中，并将其作为依赖项添加:

angular.module('vsmsCore', [])
  .factory('vsmsCoreFactory', function($http, env, $log, storageFactory) {
  });
angular.module('loginModule', ['ui.bootstrap', 'permission', 'ui.router', 'vsmsCore']);

那么你可以用beforeEach(module('loginModule'))代替