AngularJS - Unit Testing Controllers and Services - angularjs

Question

I'm quite new to unit testing of AngularJS, and have been pulling my hair figuring things out. I am currently testing a simple controller that produces some outputs, which I need to unit test.
controller: 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 (unit test): 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);
});
});
I've tried every possible approach I can find on the web, and this one I tried to use was based on an example here.
I cannot get this to work at all. How do you properly test controllers and/or providers in AngularJS? When I run karma start (I'm using karma-jasmine, btw), I always get the same error of:
Error: [$injector:unpr] Unknown provider: SummaryControllerProvider <- SummaryController
EDIT: Here's my karma.conf.js just in case you need to know how I use my dependencies.
'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

Try to start from this. The reason you get not an error that angular's injector works with only known "types" - controller, services, e.t.c. And in your example you tried to get some function, that it does not now. However, it knows this function by controllers name - depositStatusCtrl.
beforeEach(inject(function($rootScope, $controller, depositStatusCtrl) {
spyOn(depositStatusCtrl, 'save').andCallThrough();
}));
it('should check if qrcode display is enabled', function() {
expect(depositStatusCtrl).toBeDefined();
});