Middleman Sprockets and Karma testing

#1

Hey Guys,

I’m trying to setup a Frontend workflow using Middleman (because i love the asset pipeline) and the Karma testrunner voor JS testing.

In Karma you normally supply the folder where you keep your js and js spec files so that when one of them changes the test runner fires up. However, these files get compiled by Karma itself, so sprockets don’t work.

I found a way around it by referencing to the localhost:4567/*.js files in karma, which loads the compiled version. By doing this, is lose the functionality of Karma automatically running when some of my source files change.

Is there a way to reference to a prebuild/cached version that middleman keeps?

#2

Hi @Eptis,

Would it be helpful to let Karma handle compiling the JavaScripts rather than Sprockets?

If so, you could disable the JavaScript compilation for those files without too much effort.

I don’t know much about Karma, but could you have a JavaScript source and separate JavaScript build directory? That would also be fairly straightforward to make work with Middleman.

#3

Mmm yeah, that could work but that would I can’t use some of the source gems and just use a vendor folder. However, I use EmblemJS as a templating language and I don’t Karma can precompile this…

#4

Thanks. If I’ve got this right, you’d like to:

  • Let Middleman handle compiling the JavaScripts
  • Run the Karma tests every time one of the JavaScript files change

You could do this using something like Kicker to run Karma in a test-once-and-exit mode:

kicker -e "karma --no-auto-watch" source/javascripts/

(I’m not sure if that’s the correct Karma command for you.) Kicker would watch for changes in the JavaScript, and run the Karma command every time a change was detected.

To install Kicker, just run gem install kicker.

If you want more power, you could use Guard instead of Kicker, but with the advantage of only having to run one command for both Middleman and Karma, rather than two.

Hope that helps!

#5

I finally solved it without using kicker/guard.

You can specify files in the karma.conf like this:

files: ["path/to/file", "path/to/another/file"]

which automatically watches, includes and serves them to the framework. You can also be more specific, like this:

files: [
        {pattern: '**/*', watched: true, included: false, served: false},
        {pattern: 'http://localhost:4567/javascripts/all.js', watched: true, included: true, served: true},
        {pattern: 'http://localhost:4567/javascripts/tests.js', watched: true, included: true, served: true}
    ]

This way, all my files are watched, but only the compiled assets are served by middleman to Karma, making preprocessors obsolete in Karma :smile:. So Karma is only used for running the tests :smile: