Recently I had the pleasure of setting up Angular tests within a project. For testing, we decided on Karma test runner by Angular team. You can find details about the reasoning at the end of the post, but basically the idea was that we’d like to stick with the runner built and used by the Angular team itself.
The project is currently a Rails gem and there are a bunch of nice tutorials on how integrate the two (see resources), but this project has aspirations to become a full-blown Angular app without any direct Rails dependencies. So, solutions like rails_karma gem or rails assets was not an option.
The good news is that the project in question used Browserify and sprockets-browserify gem to integrate it into Rails. After a bit of investigation, we came upon karma-browserify node module. This way, the resources under test were still served by browserify in the same manner as they would be served with the live application, but Rails was actually not needed to run the tests. The module in question essentially adds Karma preprocessors that make Karma aware of browserify served resources. In the end, this made our tests run fast, without involving Rails, which is a nice bonus.
The coffeescript configuration that ended up running the test suite:
module.exports = (config) -> config.set basePath: '..' frameworks: [ 'jasmine' 'browserify' ] preprocessors: 'app/assets/javascripts/index.coffee': ['browserify'] # index contains all requires 'spec/**/*.coffee': ['coffee'] browserify: extensions: ['.coffee'] transform: ['coffeeify'] watch: true debug: true files: [ 'spec/support/karma_init.coffee' 'app/assets/javascripts/index.coffee' # load the application, have browserify serve it { # watch application files, but do not serve them from Karma since they are served by browserify pattern: 'app/assets/javascripts/*.+(coffee|js)' watched: true included: false served: false } 'spec/support/**/*.+(coffee|js)' # load specs dependencies 'spec/javascripts/**/*_spec.+(coffee|js)' # load the specs ] exclude: [] reporters: ['progress'] port: 9876 colors: true logLevel: config.LOG_INFO autoWatch: true browsers: ['PhantomJS'] captureTimeout: 60000 singleRun: false
Just run karma with karma start spec/karma.config.coffee
and that’s it.
Resources:
- http://angularjs.org
- http://karma-runner.github.io
- http://browserify.org
- https://github.com/janv/sprockets-browserify
- https://github.com/xdissent/karma-browserify
- https://rails-assets.org
- https://github.com/enspiral/rails_karma
- https://www.ruby-toolbox.com/categories/Testing_Rails_Engines
- https://github.com/josevalim/enginex
- http://sebastien.saunier.me/blog/2014/02/04/angular–rails-with-no-fuss.html
- http://bower.io
- http://dev.af83.com/2013/01/02/managing-rails-assets-with-bower.html