Karma 0.12 + Requirejs: Karma looks for spec in the src directory

[topher-brennan]

I'm using Karma 0.12 and struggling to get it to work with Requirejs. I've been trying to follow this guide slavishly, but something isn't working.

My file structure looks like this (note that this is a large project, so I'll only give a partial listing. Importantly, many of the files in the /src directory have dependencies which I will not list):

$ project
|--SpecRunner.html
|--my.conf.js
|--src
| |--main.js
| |--rvv
| | |--rvv.js
| |--engage
| |--new_campaign.js
| |--engage.js
|--spec
|--test-main.js
|--engage
|--new_campaign_spec.js

Here's my config file:

// Karma configuration
// Generated on Fri Jun 27 2014 14:07:30 GMT-0700 (PDT)

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: [
      'spec/test-main.js',
      {pattern: 'src/**/*.js', included: false},
      {pattern: 'spec/**/*.js', included: false}
    ],


    // list of files to exclude
    exclude: [
        'src/main.js',
        '**/text4contest.js'
    ],


    // 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
  });
}; 

And here's test-main.js:

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: '/base/src',

  paths: {
    jquery: '/src/libs/js/jquery/jquery-1.7.1.min',
    jquery_ui: '/src/libs/js/jquery/jquery-ui-1.10.3.custom.min',
    jquery_scrolltofixed: '/src/libs/js/other/jquery-scrolltofixed',
    history: '/src/libs/js/jquery.history',
    d3: '/src/libs/js/other/d3',
    //awesome: 'rvv/main',
    nvd3: '/src/libs/js/other/nv.d3',
    dust: '/src/libs/js/other/dust-a',
    dust_helpers: '/src/libs/js/other/dust-helpers',
    range_slider: '/src/libs/js/other/jQDateRangeSlider-min',
    topojson: '/src/libs/js/other/topojson.v1.min',
    jstz: '/src/libs/js/other/jstz',
    underscore: '/src/libs/js/underscore',
    'jquery.history': '/src/libs/js/jquery.history',
  },
  shim: {
    'jquery_ui': ['jquery'],
    'nvd3': ['d3'],
    'dust': { exports: 'dust' },
    'dust_helpers': ['dust'],
    'range_slider': ['jquery','jquery_ui'],
    'jquery_scrolltofixed': ['jquery'],
    'jquery.history': {
        deps: ['jquery'],
        exports: 'History'
    },
    //'awesome' : {
        //deps: ['jquery','underscore','jquery.history','jquery_ui','d3','nvd3','dust','dust_helpers','range_slider','topojson','jquery_scrolltofixed'],
    //    exports: 'Rvv'
    //},
    'underscore': {
        exports: '_'
    },
},

  // dynamically load all test files
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});

Note that the shim and paths options, above, are copied from main.js and the baseUrl in main.js is '/src.'

May as well include new_campaign_spec.js for good measure:

define(['rvv/rvv', 'engage/new_campaign', 'engage/engage'], function(Rvv, $, _) {
    describe("NewCampaign", function() {
        it ("has a method getCampaignData", function() {
            expect(!!NewCampaign.getCampaignData).toBe(true);
        });
    });    
}); 

Okay, now here's what happens when I try to make this work. I get the following error message:

Chrome 35.0.1916 (Mac OS X 10.9.3) ERROR: 'There is no timestamp for /base/src/spec/engage/new_campaign_spec.js!'

WARN [web-server]: 404: /base/src/spec/engage/new_campaign_spec.js
Chrome 35.0.1916 (Mac OS X 10.9.3) ERROR
  Uncaught Error: Script error for: spec/engage/new_campaign_spec
  http://requirejs.org/docs/errors.html#scripterror
  at /Users/chrishallquist/RelevvantWeb/node_modules/requirejs/require.js:141

It basically seems like Karma is expecting my /spec folder to be within the /src folder. But if the guide to using Karma with Requires linked at the top of this issue is correct, then I'm really confused, because as far as I can tell I followed that guide exactly.

Note that changing the baseURL in test-main.js to just '/base' gets different error messages: nothing about the spec file, but now it's having issues finding the files in the /spec folder. Adding /src to the beginning of the file paths in new_campaign_spec.js isn't a solution, because then the issue is resolving the dependencies of the files required in new_campaign_spec.js. Perhaps I could solve the problem by then altering the paths for the dependencies in the /src directory, but then I'm on my way to completely re-doing how I handle dependency paths throughout the project. It doesn't seem like doing that should be necessary, and knowing I could do that if I have to wouldn't explain why I'm having this problem in the first place.

Edit: I tried following the advice in this StackOverflow entry, and once again this seems to fix the resolution of some paths but break other paths.

[pabloportugues]

Had the same problem and ended up using the same fix. The thing is that the code from the v0.10 returns the correct path.

var tests = [];
for (var file in window.__karma__.files) {
    if (/Spec\.js$/.test(file)) {
        tests.push(file);
    }
}

The v0.12 introduces the pathToModule method which returns the incorrect path.

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));
  }
});

I guess it was part of something else that hasn't yet been updated.