user3676597 user3676597 - 3 months ago 20
AngularJS Question

Angular testing Jasmine fails

I am new to testing, have Angular experience. I developed a Angular application an want to add tests to it to get a grip on Jasmine and Karma. So I setup Karma, added a simple 'getGreeting' function to one of my services in my Angular app and added a test file (/test/UtilsService.spec.js) with the Jasmine test. It fails because the service is undefined (angular-mocks.js is added). This is my code:

karma.conf.js:

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',


// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],


// list of files / patterns to load in the browser
files: [
'node_modules/**/*.js',
'app/**/*.js',
'test/UtilsService.spec.js'
],


// list of files to exclude
exclude: [
],


// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},


// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],


// web server port
port: 9876,


// enable / disable colors in the output (reporters and logs)
colors: true,


// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,


// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,


// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],


// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,

// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity


Test file in /test/UtilsService.spec.js:

describe('getGreeting',function(){
var UtilsService;
beforeEach(angular.mock.module('app.ontdekJouwTalent'));
beforeEach(inject(
function(_UtilsService_) {
UtilsService = _UtilsService_;
}
));
it('should test a dummy function',
function(){
expect(1+1).toEqual(2);
expect(UtilsService.getGreeting("Marc")).toEqual("Hello Marc");
}
)
});


Notice that I comment out loading / testing the service but only load the app: app.ontdekJouwTalent.
The UtilsService in /app/shared/services/UtilsService.js

angular.module('app.ontdekJouwTalent').
service('UtilsService',['AppConfig',function(AppConfig){
this.debug = function(data){
if(AppConfig.APPCONSTANTS_ISLOCAL){
return data;
}
}

this.getGreeting = function(name){
return "Hello " + name;
}
}])


The angular app is defined elsewhere - in /app/app.js like this:

angular.module('app.ontdekJouwTalent', [
'angular-storage',
'ui.bootstrap',
'ui.router',
'ui.router.modal',
'xeditable',
'angular-confirm',
'ui.select',
'ngSanitize',
'angular-growl',
'ngAnimate'
])


When running this from the webroot directory (wwwroot) in a cmd window with "karma start" I get

I:\www\ontdekJouwTalent\wwwroot>karma start
04 08 2016 19:23:32.633:WARN [karma]: No captured browser, open http://localhost:9876/
04 08 2016 19:23:32.756:INFO [karma]: Karma v1.1.2 server started at http://localhost:9876/
04 08 2016 19:23:32.757:INFO [launcher]: Launching browser Chrome with unlimited concurrency
04 08 2016 19:23:32.769:INFO [launcher]: Starting browser Chrome
04 08 2016 19:23:38.634:INFO [Chrome 51.0.2704 (Windows 10 0.0.0)]: Connected on socket /#CXn5vEn8tQBLJ23oAAAA with id 50497607
Chrome 51.0.2704 (Windows 10 0.0.0) ERROR
Uncaught ReferenceError: module is not defined
at node_modules/abbrev/abbrev.js:2


So 'module' is undefined... I have no clue how to tackle this. What is wrong here?

Answer

Ok, turns out I had to add a lot more files in the karma.conf.js files section! specifically:

    // list of files / patterns to load in the browser
files: [
    'node_modules/angular/angular.js',
    'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
    'node_modules/ui-select/dist/select.js',
    'node_modules/angular-mocks/angular-mocks.js',
    'node_modules/angular-growl-v2/build/angular-growl.min.js',
    'node_modules/angular-ui-router/release/angular-ui-router.min.js',
    'node_modules/angular-storage/dist/angular-storage.min.js',
    'node_modules/angular-animate/angular-animate.min.js',
    'node_modules/angular-sanitize/angular-sanitize.min.js',
    'node_modules/angular-xeditable/dist/js/xeditable.min.js',
    'node_modules/angular-ui-router/release/angular-ui-router.min.js',
    'node_modules/angular-ui-router-uib-modal/angular-ui-router-uib-modal.js',
    'node_modules/angular-confirm/angular-confirm.js',
    'node_modules/angular-aria/angular-aria.min.js',
    'node_modules/angular-messages/angular-messages.min.js',
    'app/app.js',

    'app/shared/services/APIService.js',
    'app/shared/services/SessionService.js',
    'app/login/AuthService.js',
    'app/translation/TranslationService.js',
    'app/shared/services/UtilsService.js',
    'test/UtilsService.spec.js'
],

Not quite clear why I have to include these services... my UtilsService certainly isn't needing them. My app includes 7 services, not 5. Also, why is there no need to include controllers as well (app uses +9)?

Comments