Search code examples
angularjsunit-testingjasminekarma-jasmineangular-mock

Unable to inject controller to Karma test


I have spent hours trying to set up unit testing on an existing angularjs code base. I believe I have pinned the issue down to a single oddity in our code compared to the suggested implementation from angular's docs.

We instantiate our module with var app= angular.module(...) whereas examples I have found use angular.module(...). Would this require me to reference the module differently in the beforeEach shown below?

Version Details:

  • AngularJS v1.2.7
  • Angular-Mocks v1.2.7

myController.js:

app.controller('myController', function (
  $scope,
  $rootScope,
  $location,
  $window,
  globalServices,
  $routeParams,
  $sce) {
  ...
}

Sample.spec.js:

describe('myController', function() {

  beforeEach(module('app'));  

  describe('tests', function() {
    var scope, controller;

    beforeEach(inject(function($controller) {
      scope = {};
      controller = $controller('myController', { $scope: scope });
    }));    

    it('should define controller', function() {
      expect(controller).toBeDefined();
    });

  });
});

app.js

var app = angular.module('app', [
    'ngRoute',
    'ui.bootstrap',
    'ui.tinymce',
    'ngResource',
    'ngCookies',
    ...
]);

karma.conf.js:

//jshint strict: false
module.exports = function(config) {
  config.set({

    basePath: './',

    files: [  
      'Scripts/angular.min.js',
      'Scripts/angular-mocks.js',       
      'Scripts/angular-route.min.js',
      'Scripts/angular-resource.js',
      'Scripts/angular-cookies.min.js',
      'Scripts/ui-sortable.js',
      'Scripts/angular-strap.min.js',    
      'Scripts/jquery.min.js',
      'tinymce/tinymce.min.js',      
      'Scripts/ui-bootstrap-tpls-0.4.0.js',
      'tinymce/jquery.tinymce.min.js',
      'app/directives/adapt/adapt.js',
      'app/app.js',
      'app/controllers/myController.js',
      'app/tests/Sample.spec.js'      
    ],

    autoWatch: true,

    frameworks: ['jasmine'],

    browsers: ['PhantomJS'],

    logLevel: config.LOG_DEBUG,

    plugins: [
      'karma-phantomjs-launcher',
      'karma-jasmine',
      'karma-junit-reporter',
      'phantomjs-polyfill'
    ],

    reporters: ['progress']

  });
};

I receive the following error: Error: $injector:modulerr Module Error Failed to instantiate module app due to: {1}

If I comment out the controller code, the module('app') will not throw an error.

Thank you very much for the help. I have hit a wall with this one.


Solution

  • Make sure all the dependencies on module is resolved, this problem occurs when you are trying to inject a service that not been loaded.