angularjsunit-testingionic-frameworkjasmineangular-mock

Angular Mock Inject throws error without message using Karma and Jasmine


Using the angular.mock.inject(...) function when trying to unit test an Angular (Ionic) 1 application throws the following error. The strange thing is that there is no specific error message, making particularly hard to debug. No matter what I try, it always seems to throw this same non-descript error without any message.

PhantomJS 2.1.1 (Linux 0.0.0) LoginController should pass FAILED
    bower_components/angular/angular.js:4527:53
    forEach@bower_components/angular/angular.js:321:24
    loadModules@bower_components/angular/angular.js:4487:12
    createInjector@bower_components/angular/angular.js:4409:30
    WorkFn@bower_components/angular-mocks/angular-mocks.js:3160:60
    loaded@http://localhost:9876/context.js:151:17

Removing the call to angular.mock.inject() allows the test to pass.

Here's the test in question:

describe('LoginController', function() {

  var scope;
  var controller;

  beforeEach(angular.mock.module('mCommonJobs'));
  beforeEach(angular.mock.inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      controller = $controller('LoginController', {
          $scope: scope
      });
  }));

  it('should pass', function() {
    expect(true).toEqual(true);
  });

});

My bower dependencies:

  "dependencies": {
    "angular-resource": "#1.5.0",
    "ionic": "driftyco/ionic-bower#1.3.2",
    "ngCordova": "^0.1.27-alpha",
    "ng-cordova-oauth": "^0.3.0",
    "ngstorage": "^0.3.11",
    "angular-mocks": "^1.5.2"
  },
  "resolutions": {
    "angular": "~1.5.x"
  }

And the files set in the Karma test config:

files: [
  //Angular source
  'bower_components/angular/angular.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-sanitize/angular-sanitize.js',
  'bower_components/angular-ui-router/release/angular-ui-router.js',
  'bower_components/ionic/js/ionic.bundle.js',
  'bower_components/ng-cordova-oauth/dist/ng-cordova-oauth.js',
  'bower_components/ngCordova/dist/ng-cordova.js',
  'bower_components/ngCordova/dist/ng-cordova-mocks.js',
  'bower_components/ngstorage/ngStorage.js',
  //App code
  'app/**/*.module.js',
  'app/**/*.js',
  'app/*.js',
  //Test files
  'test/**/*.test.js'
],

Solution

  • This issue was resolved by not including all of ionic.bundle.js in the files config of karma, but by specifically including its parts.

    I also explicitly forced all versions of angular-related dependencies to be the same version (special thanks to Phil in the comments.).


    In the end, my bower.json had:

      "dependencies": {
        "angular-resource": "1.5.2",
        "ionic": "driftyco/ionic-bower#1.3.2",
        "ngCordova": "^0.1.27-alpha",
        "ng-cordova-oauth": "^0.3.0",
        "ngstorage": "^0.3.11",
        "angular-mocks": "1.5.2"
      },
    

    and my karma config looked like:

    files: [
      //Angular source
      'bower_components/angular/angular.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-ui-router/release/angular-ui-router.js',
      'bower_components/ionic/js/ionic.js',
      'bower_components/ionic/js/ionic-angular.js',
      'bower_components/ng-cordova-oauth/dist/ng-cordova-oauth.js',
      'bower_components/ngCordova/dist/ng-cordova.js',
      'bower_components/ngCordova/dist/ng-cordova-mocks.js',
      'bower_components/ngstorage/ngStorage.js',
      //App code
      'app/**/*.module.js',
      'app/**/*.js',
      'app/*.js',
      //Test files
      'test/**/*.test.js'
    ],