If you've been reading some of my other AngularJS posts you may have noticed that Gulp-Angular is by far my favorite Angular Yeoman generator. Being the huge TDD and unit testing fan that I am, I wanted to have my test runner automatically rerun the tests when I change a files (similar to browserSync in gulp serve, but for unit tests). This wasn't totally straightforward, and I'll explain how I got it to work below.
Hint 1: You Don't Use Karma.conf.js
When you go to the karma documentation they will tell you that in order to turn on "autoWatch" (the feature I'm looking for here) you must go into the karma.conf.js file and change this property to true:
autoWatch: false,
However, for this particular generator it doesn't work! Even when this property is set to true the tests only run once!
Hint 2: You Use Gulp to Do It
The trick is that the handy gulp scripts are set up to do this for you. Instead of the usual gulp test you need to tack ":auto" onto the end of it. So back in your command line you'd type:
gulp test:auto
See! It turns out that it's super easy after all. The gulp script isn't even dependent on whether karma.conf.js's autoWatch property is set to true. Running gulp test:auto will still run in auto-watch mode even if you have it set to false so don't even think about that anymore. If you are wondering about protractor tests, there is absolutely a similar gulp protractor:auto that runs protractor tests in auto watch mode. So there you have it! The moral of the story here is that you should not be fighting against your workflow tools. Instead you should get to know them well, take them out on fancy dates, and if the mood is right they might even let you cop a feel. Wait, what?!
RSS Feed