Error while executing karma tests

Question

I am trying to run karma unit tests for my application. The application is created using my company's custom angular yeoman generator. (The generator is very similar to the angular-yeoman generator).

I am trying to run karma jasmine test for my application. But I keep on getting the error message whenever I run grunt test

Chrome 35.0.1916 (Mac OS X 10.9.0) ERROR Uncaught object at /Users//Dummy Apps/karma1/app/bower_components/angular/angular.js:1611

Warning: Task "karma:unit" failed. Use --force to continue.

I have the following in my Gruntfile.js:

karma: {
      unit: {
        configFile: 'karma.conf.js',
        singleRun: true
      }
    }

In karma.conf.js file I have :

    module.exports = function(config) {
     config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'app/bower_components/angular*/angular.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/angular-resource/angular-resource.js',
      'app/bower_components/angular-cookies/angular-cookies.js',
      'app/bower_components/angular-sanitize/angular-sanitize.js',
      'app/bower_components/angular-route/angular-route.js',
      'app/bower_components/angular-bootstrap/ui-bootstrap.js',
      'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
      'app/bower_components/service-state/js/StateService.js',      
      'app/scripts/controllers/dashboard.js',
      '../test/spec/**/*.js'
    ],

    // list of files / patterns to exclude
    exclude: [],
    // web server port
    port: 8080,

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


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


    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false
  });
};

My package.json file :

{
  "name": "karma1",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-css": "~0.5.4",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-compass": "~0.5.0",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-less": "~0.9.0",
    "grunt-contrib-cssmin": "~0.6.0",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-contrib-watch": "~0.5.2",
    "grunt-autoprefixer": "~0.2.0",
    "grunt-usemin": "~0.1.11",
    "grunt-rev": "~0.1.0",
    "grunt-shell": "~0.2.2",
    "grunt-concurrent": "~0.3.0",
    "load-grunt-tasks": "~0.1.0",
    "grunt-google-cdn": "~0.2.0",
    "grunt-ngmin": "~0.0.2",
    "time-grunt": "~0.1.0",
    "karma-ng-scenario": "^0.1.0",
    "grunt-karma": "^0.8.3",
    "karma": "^0.12.16",
    "karma-ng-html2js-preprocessor": "^0.1.0",
    "karma-jasmine": "^0.1.5",
    "karma-chrome-launcher": "^0.1.4",
    "karma-mocha": "latest",
    "chai": "1.4.0",
    "karma-script-launcher": "~0.1.0",
    "karma-html2js-preprocessor": "~0.1.0",
    "karma-requirejs": "~0.2.0",
    "karma-coffee-preprocessor": "~0.1.0",
    "karma-phantomjs-launcher": "~0.1.0",
    "grunt-open": "~0.2.2",
    "ng-midway-tester": "2.0.5"
  },
  "engines": {
    "node": ">=0.8.0"
  },
  "scripts": {
    "test": "grunt test"
  }
}

My test controller is : 'use strict';

describe('Controller: DashboardCtrl', function () {

  // load the controller's module
  beforeEach(module('karma1App'));

  var DashboardCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller,$rootScope) {
    scope = $rootScope.$new();
    DashboardCtrl = $controller('DashboardCtrl', {
      $scope: scope
    });
  }));

  it('should attach a list of awesomeThings to the scope', function () {
    expect(scope.awesomeThings.length).toBe(3);
  });
});

I use REQUIREJS to load the other dependencies, but REQUIRE is used only in the directives. As a kick start I want to test my controllers and services but I keep getting this error.

Any idea what is going wrong.

Thanks!

@68cherries - Hi could be please elaborate your comment. May be I am missing something. Thanks — Anirban

Anirban Anirban · Accepted Answer · 2014-06-05T17:20:07

The point I was missing that I was not loading the angular app. I am loading the angular app through a config file config.js

/* global angular */

'use strict';

var karma1App = angular.module('karma1App', [
'pascalprecht.translate', 'ngResource', 'ngRoute',
'ui.bootstrap' ]); karma1App.config(['$routeProvider', function ($routeProvider) {
$routeProvider
  .when('/site', {
    activeTabName: 'site',
    templateUrl: 'views/site.html',
    controller: 'SiteCtrl'
  })
  .when('/Cases', {
    templateUrl: 'views/Cases.html',
    controller: 'CasesCtrl'
  })
  .when('/Cases/:caseid', {
    templateUrl: 'views/Case.html',
    controller: 'CaseCtrl'
  })
  .when('/Alarms', {
    templateUrl: 'views/Alarms.html',
    controller: 'AlarmsCtrl'
  })
  .when('/Analysis', {
    templateUrl: 'views/Analysis.html',
    controller: 'AnalysisCtrl'
  })
  .when('/Reports', {
    templateUrl: 'views/Reports.html',
    controller: 'ReportsCtrl'
  })   /*
  .when('/dashboard', {
    activeTabName: 'dashboard',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
*/ .when('/admin', { templateUrl: 'views/admin.html', controller: 'AdminCtrl' }) .otherwise({ redirectTo: '/site' }); }]);

In the karma.conf.js I added this following script tag :

files: [
  'app/bower_components/angular*/angular.js',
  'app/bower_components/angular-mocks/angular-mocks.js',
  'app/bower_components/angular-resource/angular-resource.js',
  'app/bower_components/angular-cookies/angular-cookies.js',
  'app/bower_components/angular-sanitize/angular-sanitize.js',
  'app/bower_components/angular-route/angular-route.js',
  'app/bower_components/angular-bootstrap/ui-bootstrap.js',
  'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
  './test/test-main.js', 
  'app/scripts/controllers/dashboard.js',
  '../test/spec/**/*.js'
]

The test-main.js has the following line of code ONLY:

  /* global angular */

  'use strict';

 var karma1App = angular.module('karma1App', [
  'ngResource',
  'ngRoute', // Angular 1.2 requires separate ngRoute
  'ui.bootstrap',
  'StateService'
   ]);

After loading the test-main.js file in the karma.conf.js file I was able to unit test my application using karma.

Hope this helps.

Thanks, Anirban

Error while executing karma tests

1 Answers