Big JS app testing - avoiding multiple karma.conf.js files

Question

I use karma + jasmine + phantom for my headless Javascript tests.

The problem I have is that I have a really big app consisting of a lot of JS modules which I want to test. So I need custom mocks for each case and custom includes for each case.

karma.conf.js allows me only to have files array which consist of patterns for all the files to include which is GREAT if my app would be small and not a big app with ton of files and modules.

My solution for now - create multiple karma.conf.js files for each test case. But this really sucks as having so lot of config files is a big bloat and if I would want to change one setting(like autoWatch) I would need to change all the config files.

My other solution - write custom handler in front of karma.conf.js to handle additional parameters(spec file or folder to bypass karma for searching it's config file) and simply build files array dynamically.

Now the problem I see with this is that karma runs only once and I would be limited to run one test spec... and I DO NOT WANT TO MODIFY KARMA ITSELF.

I have also considered using Grunt but haven't found a way to make it work for multiple test cases.

By the way, my ideal structure would be like this:

to have files:

test/specs/category/unit1_spec.js
test/mocks/category/unit1_mock.js

config file:

files: [
  {
    'includes': [array_of_includes],
    'spec': 'spec_file'
  }
]

mock file would be grabbed automatically from appropriate mocks directory.

and I could do karma start test/specs/category and it would recursively run all the test cases inside the folder.

tl;dr - I want to test comfortably a big app.

I would appreciate any suggestion to handle this task.

Solution 1

grunt-karma sounds ideal for your needs.

It is a grunt multitask which allows sub tasks to have a common configuration, which can be overridden by specific sub tasks.

The plugin consolidates Karma configuration into a single file. For example:

karma: {
  options: {
    configFile: 'karma.conf.js',
    runnerPort: 9999,
    browsers: ['Chrome', 'Firefox']
  },
  category1: {
    files: ['app/js/category1/**/*.js', 'test/category1/*.js']
  },
  category2: {
    files: ['app/js/category2/**/*.js', 'test/category2/*.js']
  }
}

Solution 2

Use an ENV variable to pass the argument to files in karma.conf.js:

files: [
  include1, include2, ..., includeN,
  process.env.JS_TESTS + "/*.js"
]

Then run karma like so:

JS_TESTS=test/category2 karma start karma.conf.js

Solution 3

You can use require statements in karma config files.

for example, in your karma config file you could do:

files: require('./karma.conf.files')

For a fuller answer .. I found another solution from this link: https://groups.google.com/forum/#!topic/karma-users/uAf7TuVBmCQ

With karma 0.8 (current stable)

// shared_conf.js
module.exports = {
  port: 8080
};

// karma1.conf.js
var shared = require('./shared_conf.js');

port = shared.port;

With karma 0.9 (currently in canary release):

// shared_conf.js
module.exports = function(karma) {
  karma.configure({
    port: 8080  
  });
};

// karma1.conf.js
var shared = require('./shared_conf.js');
module.exports = function(karma) {
  shared(karma);
  karma.configure({
    // override
  });
};

This worked for me to pull in an array of file names from a separate config file.

Solution 4

I noticed that whatever argument you pass into command line you get this argument camelCased in initial config object.

> karma start i-wanna-debug

module.exports = function (config) {
    config.set({
        singleRun: config.iWannaDebug ? false : true
    });
};

This allows you to use single Karma config file with multiple configurations.

View more solutions

Comments

[VtoCorleone]

This does not work for me. If I use "files" under each module, I end up with an error of "Cannot use 'in' operator to search for 'src' in <my file path>". If I use "src" instead of "files", it runs but those files are never pulled in for the tests. Any thoughts? I created a post on this yesterday. stackoverflow.com/questions/21467715/…

[jakub.g]

With karma 0.13, it's config that is exposed, not karma: module.exports = function(config) { config.set({ files: ['a', 'b', 'c'] }) }. Then in karma1.conf.js, apart from having config.set method, you can read config.files and all other values and modify them.

[Esaith]

Thank you. This is exactly what I needed. In dev, I'd test with multiple browsers but in VSTS I'd only want to test with PhantomJS. Instead of having two different config files, each in dev and testing environment, I have the same in both

[Roi Danton]

Small hint: karma start i-wanna-debug does not work for me, I had to prepend --, like karma start --i-wanna-debug. Btw, a single dash - allows to pass single character flags, like karma start -iwd while i and w and d are treated separately.