Error In Getting AngulaJS + Angular AMD + RequireJS to Work with Karma and Jasmine

Question

I ma trying to add Karma & Jasmine+Require Js based Unit testing support for an AngularJS +Angular AMD & RequireJS Application that I have created. I have been wrecking my brain around this for two days now but I am still nowhere close to sealing the deal.

I keep getting the error :

INFO [karma]: Karma v0.12.21 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 36.0.1985 (Mac OS X 10.9.4)]: Connected on socket 8oFHaa2hqJPs0ecgIXCa with id 31963369
Chrome 36.0.1985 (Mac OS X 10.9.4) ERROR: 'There is no timestamp for     ../www/scripts/specs/UserControllerTest.js!'

WARN [web-server]: 404: /www/scripts/specs/UserControllerTest.js
Chrome 36.0.1985 (Mac OS X 10.9.4) ERROR
  Uncaught Error: Script error for: specs/UserControllerTest
  http://requirejs.org/docs/errors.html#scripterror
  at /usr/local/lib/node_modules/requirejs/require.js:141

My Code is as follows :

1. The Karma Config file :

   // Karma configuration
   // Generated on Fri Aug 15 2014 20:49:40 GMT+1000 (EST)
   
   module.exports = function(config) {
    config.set({
   
   // base path that will be used to resolve all patterns (eg. files, exclude)
   basePath: '.',
   
   
   // frameworks to use
   // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
   frameworks: ['jasmine', 'requirejs'],
   
   
   // list of files / patterns to load in the browser
   files: [
    'test-main.js',
    {pattern: 'specs/*.js', included: true}
   ],
   
   
   // list of files to exclude
   exclude: [
   ],
   
   
   // preprocess matching files before serving them to the browser
   // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },
   
   
    // test results reporter to use
   // possible values: 'dots', 'progress'
   // available reporters: https://npmjs.org/browse/keyword/karma-reporter
   reporters: ['progress'],
   
   
   // web server port
   port: 9876,
   
   
   // enable / disable colors in the output (reporters and logs)
   colors: true,
   
   
   // level of logging
   // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||   config.LOG_INFO || config.LOG_DEBUG
   logLevel: config.LOG_INFO,
   
   
   // enable / disable watching file and executing tests whenever any file changes
   autoWatch: true,
   
   
   // start these browsers
   // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
   browsers: ['Chrome'],
   
   
   // Continuous Integration mode
   // if true, Karma captures browsers, runs the tests and exits
   singleRun: false
    });
   };
   

2. My test-main.js file.

    var allTestFiles = [];
    var TEST_REGEXP = /(spec|test)\.js$/i;
   
    var pathToModule = function(path) {
      return path.replace(/^\/base\//, '').replace(/\.js$/, '');
    };
   
    Object.keys(window.__karma__.files).forEach(function(file) {
      if (TEST_REGEXP.test(file)) {
        // Normalize paths to RequireJS module names.
        allTestFiles.push(pathToModule(file));
      }
    });
   
    require.config({
      // Karma serves files under /base, which is the basePath from your config file
      baseUrl: '../www/scripts',
   
      // alias libraries paths
            paths: {
                'angular': '../libs/angular',
                'angular-route': '../libs/angular-route',
                'angular-animate':'../libs/angular-animate',
                'angular-mocks':'../libs/angular-mocks',
                'angularAMD': '../libs/angularAMD.min',
                'Framework7':'../libs/framework7',
                'UserController':'controller/UserCtrl',
                'WebCallManager':'services/WebCallManager'
            },
   
            // Add angular modules that does not support AMD out of the box, put it in a shim
            shim: { 
                'angularAMD': ['angular'],
                'angular-route': ['angular'],
                'angular-animate':['angular'],
                'angular-mocks':['angular'],
                'Framework7':{exports: 'Framework7'}
            },
   
            //kick start application
            //deps: ['app'],
   
      // dynamically load all test files
      deps: allTestFiles,
   
      // we have to kickoff jasmine, as it is asynchronous
      callback: window.__karma__.start
    });
   

3. And My Unit Test is :

        describe('UserController', function () {
   
        var scope,controller;
   
        //mock Application to allow us to inject our own dependencies
        beforeEach(angular.mock.module('app'));
   
   
        //mock the controller for the same reason and include $rootScope and $controller
        beforeEach(angular.mock.inject(function($rootScope, $controller) {
            //create an empty scope
            scope = $rootScope.$new();
            //declare the controller and inject our empty scope
            $controller('UserController', {$scope: scope});
   
          }));
   
   
   
        it('checks the controller name', function () {
            expect(scope.name).toBe('Superhero');
        });        
    });
   

I have uploaded all my code of my project to link here. Anyone who can help me with this is highly appreciated. I think In am at the end of my tether with this.

Answer 1

The error There is no timestamp for... means that karma is unable to access the file in question. You need to define the www directory so that is is accessible by karma. Try the following:

karma.config.js files: [ 'test-main.js', {pattern: './specs/*.js', included: true}, {pattern: '../../www/**/*.js', included: false} ],

Take a look at karma.conf in the angularAMD project and the Karma documentation for files.

Answer 2

marcoseu is right, the There is no timestamp for... error means karma cant find the the file, but there is more.

I'd recommend making karma's base path your project root. This avoids Karma making the file paths absolute instead of relative which keeps things simpler and avoids path reference problems (at least on my windows OS).

Your test should be a require module (i.e. using define) so it can be sure the objects it requires are fully loaded. See the example test at http://karma-runner.github.io/0.12/plus/requirejs.html

karma.config.js basePath: "../", files: [ 'test/test-main.js', {pattern: 'test/specs/*.js', included: false}, {pattern: 'www/**/*.js', included: false}, ],

Now your files are all served by Karma under /base.

test-main.js require.config({ baseUrl: "/base/www/scripts",

Debugging

But most importantly you can debug all of this. Run Karma, switch to the Karma created chrome instance, click the debug button, open the chrome developer tools. Check the console, and your source files. Especially the source of debug.html, as at the bottom it has the definition of all your karma served files.

You can also set breakpoints and then refresh the page to watch the tests being executed. You will be able to see for yourself why you are getting test errors. Win.