How can I automate both E2E and unit tests with Yeoman & AngularJS?

Question

I'm using Yeoman and generator-angular to manage AngularJS apps, but I'm having trouble with automated testing.

Running grunt test will run unit tests once. I can get E2E tests to run after unit tests by altering the karma config block in Gruntfile.js, adding e2e:

karma: {   //...   e2e: {     configFile: 'karma-e2e.conf.js',     singleRun: true   } }, 

Great: now when I type grunt test all tests are run. But they're only run one time, and there's a big overhead (starting compass, running the server, launching the Chrome processes, etc.). Instead, the server and Chrome processes should remain running and, when I save a test, tests should be re-run.

I can achieve this by modifying both karma.conf.js and karma-e2e.conf.js and setting singleRun = true, then running karma start in one terminal pane, and karma start karma-e2e.conf.js in another. Provided none of the ports in the karma configs conflict (which they do by default), this works. Now I'm bypassing Grunt and just doing my own thing (which seems a little silly, as Grunt is supposed to make things easier).

Anyway, after a few more changes (fixes?) — not detailed for brevity — this works but doesn't cut it: I now have to run two different commands and keep an eye on two different terminal panes. Surely there's a better way.

How can I run a single command to watch my test files and re-run tests appropriately?

Bonus question: why on Earth is this functionality not provided as is? Is it just a question of the developer(s) of generator-angular not having enough time to implement this stuff? I ask because I'm only just getting into Angular/Yeoman/Karma (as you probably noticed), and feel that automated testing of both E2E and unit tests are crucial to workflow.

Answer 1

As I mentioned in a comment to your question - PhantomJS saves a lot of hassle. That aside, I believe you can handle everything from within your Gruntfile and just continue to run grunt test to start the whole thing.

grunt-karma allows full customization of your karma options with some handy add-ons.

From the docs:

....

You can override any of the config file's settings directly:

karma: {      unit: {     configFile: 'karma.conf.js',     runnerPort: 9999,     singleRun: true,     browsers: ['PhantomJS']      } } 

---

Sharing Configs

If you have multiple targets, it may be helpful to share common configuration settings between them. Grunt-karma supports this by using the options property:

karma: {   options: {     configFile: 'karma.conf.js',     runnerPort: 9999,     browsers: ['Chrome', 'Firefox']   },   continuous: {     singleRun: true     browsers: ['PhantomJS']   },   dev: {     reporters: 'dots'   } } 

Additionally you may want to snoop around in Yeoman's generator-angular Gruntfile code to see what else may be available or at least mockable.