Can't instantiate angular controller in karma unit tests

Question

I'm facing some trouble with a generated project (by yoeman) and it's testing.

What I want is to build a fully automated testing environement. I use Gulp, Karma, Jasmine and angular-mocks.

TypeError: undefined is not an object (evaluating 'controller.awesomeThings')

In my console after 'gulp test' it throws this error message. but this doesn't make any sense for me.

Look at my test spec:

'use strict';

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

  // load the controller's module
  beforeEach(function() {
    module('evoriApp');
  });

  var controller;
  var scope;

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

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

And karma should have any file it needs (karma.conf.js):

files: [
      // bower:js
      'bower_components/angular/angular.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-aria/angular-aria.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-messages/angular-messages.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-material/angular-material.js',
      // endbower
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],

This is how the generated gulp method looks like:

gulp.task('test', ['start:server:test'], function () {
  var testToFiles = paths.testRequire.concat(paths.scripts, paths.mocks, paths.test);
  return gulp.src(testToFiles)
    .pipe($.karma({
      configFile: paths.karma,
      action: 'watch'
    }));
});

I don't know where the failure is. I checked all paths and rewrote the testfiles multiple times... But the error doesn't change.

Does anybody have an idea, what the error could be caused by?

Answer 1

Ok guys, I got it.

I tried to run the test in the jasmine standalone environement to minimies the area where the error root is.

This is what my controller looks like:

angular.module('evoriApp')
  .controller('AboutCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $scope.testVariable = 2;
  });

I rewrote the 'this.awesomeThings' to '$scope.awesomeThings' and didn't get it, that this is something different. Whatever...

This is the now running spec:

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

  // load the controller's module
  beforeEach(function() {
    module('evoriApp');
    console.log("1");
  });

  var controller;
  var scope;

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

  it('sollte instanziert worden sein', function() {
    expect(controller).toBeDefined();
  });

  it('sollte ein Object "awesomeThings" besitzen', function() {
    expect(scope.awesomeThings).toBeDefined();
  });

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

What I learned: In a test you have to generate the scope, which you pass to the controller, by yourself and afterward you got to use the passed scope variable for $scope.variables.