Basic Angular Test with Jasmine

Question

I'm new to AngularJS (I'm a Rails dev) and I'm trying to test a simple Angular controller that's using angular-ui-calendar. The calendar works but I want to at least have some test coverage here. I know I'm making a noob mistake here somewhere...

Here's the error:

    Chrome 36.0.1985 (Mac OS X 10.8.5) Controller: UserCalendarCtrl should return event sources FAILED
    TypeError: undefined is not a function
        at null.<anonymous> (/Users/freddyrangel/repositories/ayuinc/viva-angular/test/spec/controllers/user-calendar-controller.spec.js:24:31)
        at Object.invoke (/Users/freddyrangel/repositories/ayuinc/viva-angular/app/bower_components/angular/angular.js:3805:17)
        at workFn (/Users/freddyrangel/repositories/ayuinc/viva-angular/app/bower_components/angular-mocks/angular-mocks.js:2143:20)
    Error: Declaration Location
        at window.inject.angular.mock.inject (/Users/freddyrangel/repositories/ayuinc/viva-angular/app/bower_components/angular-mocks/angular-mocks.js:2128:25)
        at null.<anonymous> (/Users/freddyrangel/repositories/ayuinc/viva-angular/test/spec/controllers/user-calendar-controller.spec.js:23:14)
        at /Users/freddyrangel/repositories/ayuinc/viva-angular/test/spec/controllers/user-calendar-controller.spec.js:3:1
    TypeError: Cannot read property 'eventSources' of undefined
        at null.<anonymous> (/Users/freddyrangel/repositories/ayuinc/viva-angular/test/spec/controllers/user-calendar-controller.spec.js:37:21)

user-calendar-controller.spec.js

'use strict';

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

  var controller,
    mockScope;

  beforeEach(
    module('vivaAngularApp', 'ui.calendar')
  );

  beforeEach(inject(function ($controller, $rootScope) {
    mockScope = $rootScope.new();
    controller = $controller('UserCalendarCtrl', {
      $scope: mockScope
    });
  }));

  it('should return event sources', function() {
    expect(mockScope.eventSources).toBe(true);
  });
});

user-calendar-controller.js

'use strict';

app.controller('UserCalendarCtrl', function($scope) {
  var date = new Date(),
  d = date.getDate(),
  m = date.getMonth(),
  y = date.getFullYear();

  $scope.uiConfig = {
    calendar:{
      height: 450,
      editable: true,
      header:{
        left: 'month basicWeek basicDay agendaWeek agendaDay',
        center: 'title',
        right: 'today prev,next'
      },
      dayClick: $scope.alertEventOnClick,
      eventDrop: $scope.alertOnDrop,
      eventResize: $scope.alertOnResize
    }
  };

  $scope.eventSources = {
    url: 'http://162.243.222.54/fullcalendar/new_fechas_admin.php'
  };
});

mock/uicalendar.js

'use strict';

angular.module('ui.calendar');

karma.conf.js

// Karma configuration
// http://karma-runner.github.io/0.10/config/configuration-file.html

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/jquery/dist/jquery.js',
      'app/bower_components/angular/angular.js',
      'app/bower_components/moment/moment.js',
      'app/bower_components/fullcalendar/dist/fullcalendar.min.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-ui-calendar/src/calendar.js',
      'app/scripts/*.js',
      'app/scripts/**/*.js',
      'test/mock/**/*.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: true,


    // 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,

    plugins : [
      'karma-chrome-launcher',
      'karma-jasmine'
    ]
  });
};

Answer 1

Here are what I see so far:

• mockScope = $rootScope.$new();, notice a $ before new()
• in mock/uicalendar.js, if you would like to override the module, it should be angular.module('ui.calendar', []);.