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'));

规范（单元测试）：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);
  });
});

我已尝试过我可以在网上找到的所有可行方法，而我尝试使用的方法基于示例here。

我根本无法使用它。您如何正确测试AngularJS中的控制器和/或提供程序？当我运行karma start（我正在使用 karma-jasmine ，顺便说一句）时，我总是得到同样的错误：

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

编辑：这是我的 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的注入器只能用于已知的“类型” - 控制器，服务，e.t.c。在你的例子中，你试图获得一些功能，现在它没有。但是，它通过控制器名称 - depositStatusCtrl知道此功能。

 beforeEach(inject(function($rootScope, $controller, depositStatusCtrl) {
    spyOn(depositStatusCtrl, 'save').andCallThrough();
  }));

  it('should check if qrcode display is enabled', function() {
    expect(depositStatusCtrl).toBeDefined();
  });

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

1 个答案: