AngularJS-单元测试控制器和服务

Question

我是Angularjs的单元测试的新手，并且一直在拉我的头发。我目前正在测试一个简单的控制器，该控制器会产生一些输出，我需要对其进行单元测试。

控制器：SummaryController

(function(app) {
  'use strict';
  function SummaryController($scope, $stateParams, $state, $interval, $payments, $cashierApp, $window, $banks, $prepaidcards, $flash, $player, $cookies, $rootScope, $filter) {
    // lots of stuff going on here, but I only need this part
    $scope.showQR = $payments.get('paymentoption').content.field_display_qrcode;
    // a basic assignment of a boolean value which I need to check if it is defined
  }
  app.controller('depositStatusCtrl', ['$scope', '$stateParams', '$state', '$interval', '$payments', '$cashierApp', '$window', '$banks', '$prepaidcards', '$flash', '$player', '$cookies', '$rootScope', '$filter', SummaryController]);
})(angular.module('cashierApp'));

spec（单位测试）：controller.spec.js

'use strict';
describe('Cashier App: Deposit Status Page', function() {
  var service,
    ctrl,
    scope;
  beforeEach(module('cashierApp'));
  beforeEach(inject(function($rootScope, $controller, SummaryController) {
    scope = $rootScope.$new();
    mockSummaryCtrl = SummaryController;
    spyOn(mockSummaryCtrl, 'save').andCallThrough();
    firstController = $controller('depositStatusCtrl', {
      $scope: scope,
      SummaryController: mockSummaryCtrl
    });
  }));
  it('should check if qrcode display is enabled', function() {
    expect(scope.showQR).toBeDefined();
    // expect(scope.showQR).toBe(true);
    // expect(scope.showQR).toBe(false);
  });
});

我已经尝试了我可以在网络上找到的所有可能方法，而我尝试使用的方法是基于此处的示例。

我根本无法工作。您如何正确 AngularJS中的测试控制器和/或提供商？当我运行karma start（我正在使用 karma-jasmine ，btw）时，我总是会遇到相同的错误：

Error: [$injector:unpr] Unknown provider: SummaryControllerProvider <- SummaryController

edit ：这是我的 karma.conf.js ，以防万一您需要知道我如何使用我的依赖项。

'use strict';
module.exports = function(config) {
  var configuration = {
    autoWatch: true,
    frameworks: ['jasmine'],
    files: [
      'node_modules/angular/angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'node_modules/angular-ui-router/release/angular-ui-router.js',
      'bower_components/angular-carousel/dist/angular-carousel.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-messages/angular-messages.js',
      'bower_components/ngclipboard/src/ngclipboard.js',
      'bower_components/angular-qrcode/angular-qrcode.js',
      'bower_components/angular-sanitize/angular-sanitize.min.js',
      'bower_components/ng-file-upload/ng-file-upload-all.min.js',
      'bower_components/ng-device-detector/ng-device-detector.min.js',
      'bower_components/re-tree/re-tree.min.js',
      'bower_components/angular-timer/dist/angular-timer.min.js',
      'bower_components/angular-touch/angular-touch.min.js',
      'bower_components/highlightjs/highlight.pack.min.js',
      'bower_components/moment/moment.js',
      'src/app/app.js',
      'src/app/core/cashier.core.js',
      'src/app/core/directives/modal/modal.js',
      'src/app/pages/deposit/deposit.js',
      'src/app/pages/withdrawal/withdrawal.js',
      'src/app/paymentoptions/alipaywap/alipaywap.js',
      'src/app/paymentoptions/alipaywap/alipaywap.confirm.js',
      'src/app/paymentoptions/astropay/astropay.js',
      'src/app/paymentoptions/atmotc/atmotc.js',
      'src/app/paymentoptions/atmotc/atmotc.confirm.js',
      'src/app/paymentoptions/banktransfer/banktransfer.js',
      'src/app/paymentoptions/banktransfer/banktransfer.confirm.js',
      'src/app/paymentoptions/bitcoin/bitcoin.js',
      'src/app/paymentoptions/bitcoinwithdrawal/bitcoinwithdrawal.js',
      'src/app/paymentoptions/debitcard/debitcard.js',
      'src/app/paymentoptions/lbtwithdrawal/lbtwithdrawal.js',
      'src/app/paymentoptions/prepaidcard/prepaidcard.js',
      'src/app/paymentoptions/qqpay/qqpay.js',
      'src/app/paymentoptions/unionpay/unionpay.js',
      'src/app/paymentoptions/wcnp/wcnp.js',
      'src/app/paymentoptions/wechat/wechat.js',
      'src/app/pages/deposit/deposit.status/deposit.status.controller.js',
      'src/app/pages/deposit/deposit.status/deposit.status.controller.spec.js'
    ],
    reporters: ['progress', 'coverage', 'junit'],
    ngHtml2JsPreprocessor: {
      stripPrefix: 'src/',
      moduleName: 'templates'
    },
    // browsers: ['PhantomJS','Chrome'],
    browsers: ['Chrome'],
    plugins: [
      'karma-chrome-launcher',
      'karma-phantomjs-launcher',
      'karma-angular-filesort',
      'karma-jasmine',
      'karma-ng-html2js-preprocessor',
      'karma-junit-reporter',
      'karma-coverage'
    ],
    junitReporter: {
      outputFile: 'target/unittest-results.xml',
      suite: ''
    },
    preprocessors: {
      'src/**/*.html': ['ng-html2js'],
      'src/**/*.js': ['coverage']
    },
    coverageReporter: {
      reporters: [{
          type: 'cobertura',
          dir: 'target/coverage/'
        },
        {
          type: 'html',
          dir: 'target/coverage/'
        }
      ]
    }
  };
  // This block is needed to execute Chrome on Travis
  // If you ever plan to use Chrome and Travis, you can keep it
  // If not, you can safely remove it
  // https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076
  if (configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) {
    configuration.customLaunchers = {
      'chrome-travis-ci': {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    };
    configuration.browsers = ['chrome-travis-ci'];
  }
  config.set(configuration);
};

Answer 1

尝试从此开始。您没有出现Angular的喷油器仅与已知的"类型"一起工作的错误 - 服务器，Services，E.T.C。在您的示例中，您试图获得一些功能，但现在没有。但是，它通过控制器名称知道此功能-PoadeStatUsctrl。

 beforeEach(inject(function($rootScope, $controller, depositStatusCtrl) {
    spyOn(depositStatusCtrl, 'save').andCallThrough();
  }));
  it('should check if qrcode display is enabled', function() {
    expect(depositStatusCtrl).toBeDefined();
  });