CODEWITHSUNDEEP
angularjstestinggulpkarma-jasmine
MDalt
MDalt

Reputation: 1801

Service not defining when injecting it for Karma testing - AngularJS

I've seen a few of these questions on the internet, but none of the answers seem to solve my problem. I have a service that works perfectly in my served app, but when I test it in Karma it is not being defined.

I've got my modules and associated controllers, directives and services in a src folder. The structure of this file is as follows:

angular.module('cst-error-framework', ['md.alerts', 'md.input', 'md.modals']);

angular.module('md.alerts', [])
    .directive(//..associated directives here

angular.module('md.input', [])
    //blah blah blah

angular.module('md.modals', [])
    //directives and controllers

   .factory('mdErrorHandler', function () {
        //contents here
    });

I know this seems a bit cumbersome but there are other reasons I have this in one file.

Then my spec for mdErrorHandler is as follows:

describe('Service errorHandler', function () {

beforeEach(function() {
    module('cst-error-framework');
    angular.mock.module('templates');
});
var mdErrorHandler;

beforeEach(inject(function(_mdErrorHandler_){
    mdErrorHandler = _mdErrorHandler_;
    console.log(mdErrorHandler);
}));

Here is my karma.conf.js:

module.exports = function(config) {
  config.set({

   basePath: '',

   frameworks: ['jasmine'],

   files: [
     'bower_components/jquery/dist/jquery.js',
     'bower_components/angular/angular.js',
     'bower_components/angular-sanitize/angular-sanitize.js',
     'bower_components/angular-mocks/angular-mocks.js',

     'dist/cst-error-framework.js',
     'dist/cst-error-framework.css',

     'src/**/templates/*.html',
     'src/helpers/*.js',
     'src/**/test/*.spec.js'
    ],

   preprocessors : {
     'src/**/templates/*.html': 'ng-html2js'
   },

   ngHtml2JsPreprocessor: {
     stripPrefix: 'src/',
     moduleName: 'templates'
   },

   exclude: [],

   port: 9876,

   logLevel: config.LOG_INFO,

   autoWatch: true,

   browsers: [process.env.TRAVIS ? 'Firefox' : 'Chrome'],

   singleRun: false
  });
  'use strict';
  };

Then when I run the karma tests, my mdErrorHandler is not being defined, so the result of my console.log is just [].

Any idea what's going on? Is it something to do with the order with which Karma is loading stuff? Would like to avoid having to completely refactor my main .js file.

EDIT Starting to suspect that maybe something in my gulpfile is causing issues? Here is my Karma Gulp task:

gulp.task('karma', ['build'], function(done) {
 karma.start({
   configFile: __dirname + '/karma.conf.js',
   singleRun: true
 }, done);
});

Upvotes: 0

Views: 738

Answers (2)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

In order to run your test suite, you must put atleast single expectation in your test suite.

describe('Service errorHandler', function() {

    beforeEach(function() {
        module('cst-error-framework');
        console.log(1);
    });
    var mdErrorHandler;

    beforeEach(inject(function(_mdErrorHandler_) {
        mdErrorHandler = _mdErrorHandler_;
        console.log(mdErrorHandler);

    }));

    it('do for nothing', function() {
        expect(true).toBe(true);
    })
});

Upvotes: 0

lucky.hooligan
lucky.hooligan

Reputation: 81

When you instantiate the module in your test, you don't need the function declaration.

So instead of 

beforeEach(function() {
    module('cst-error-framework');
    angular.mock.module('templates');
});

try

beforeEach(module('cst-error-framework');
beforeEach(angular.mock.module('templates');

Upvotes: 1

Related Questions