Correct configuration with Gulp, Mocha, Browserify to execute client side test with server side tests

Question

I'm working on a node application utilizing gulp for our build processes and the gulp-mocha plugin for our test-runner.

 gulp.task('test', function () {
    return gulp.src(TESTJS)
        .pipe(mocha({reporter: 'spec'}))
        .on("error", function (err) {
            // handle the mocha errors so that they don't cloud the test results,
            // or end the watch
            console.log(err.toString());
            this.emit('end');
        });
 });

Currently TESTJS is only my server-side tests. I am wanting to use this same process to execute my client tests as well. I looked into gulp-blanket-mocha and gave it a shot but I keep running into the same issue. When trying to test my backbone code, it fails because the other client components necessary (namely jquery) are not found by the test runner and it fails. I get that I need to use some sort of headless webkit like phantomJS. But I am having real trouble figuring out how to incorporate that into this gulp process with browserify.

Anyone tried getting a setup like this going or have any ideas what I am missing here in terms of having my gulp "test" task execute my client side mocha tests as well as my server side?

Answer 1

A potential setup is :

• Test runner - this is the glue between gulp and karma and provides option to set the karma options.files with the gulp.src() stream. Frankly if you have no steps before your karma tests, then use karma directly within gulp task, without gulp plugin.
• Use associated karma plugins, to run on phantom/chrome/firefox
• Use associated karma plugins for coverage, alt-js compilation
• More plugins & configuring karma options for reporting of tests and coverage.

Using browserify will change the whole setup above.

• Since it needs to resolve requires, it must run on all the "entry point" files. Typically your tests should require sources, and must be entry points.
• Use karma-bro - it solves the problems in karma-browserify (ATM this doesnt even work - it cant work with bfy 5.0 api) & karma-browserifast.
• Coverage becomes tricky since sources/vendor-sources/tests are all bundled. So I had created a custom coverage transform, that marks which code whould be instrumented while bfy is bundling
• browserify should be a "preprocessor" in karma.
• A bunch of "transform: []" should be configured in browserfy options
• The transforms can be configured by taking an existing transform module and wrapping with a custom module like what I did above for browserify-istanbul