Grunt configuration for chromeapp + Angular + Jasmine

I’ve spent the last couple of hours battling Grunt config to use Angular and Jasmine testing framework with Yeoman’s (yo) chromeapp a.k.a generator-chromeapp. Here’s how I did it:

  • Run yo chromeapp with the test-framework option
    
    yo chromeapp --test-framework=jasmine
    
    
  • Install Angular dependencies using bower
    
    bower install --save angular
    bower install --save-dev angular-mocks
    bower install --save angular-animate
    bower install --save angular-material #Optional
    
    

    If you plan to use bower, note that the generator puts the bower_components directory in the app folder. You can modify this by changing the “directory” in .bowerrc. I’ve chosen to keep it as-is

  • Create app.js in app/scripts and define your module
    
    angular.module('MyChromeApp', ['ngAnimate', 'ngMaterial']);
    
    
  • Modify your index.html
    
    <html ng-app = "MyChromeApp">
    ...
    <script src="bower_components/angular/angular.js"></script>
    <!-- Optional -->
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>
    
    <script src="scripts/app.js"></script>
    
    
  • Modify the jasmine task in Gruntfile.js
    jasmine: {
     all: {
     src: ['app/scripts/{,*/}*.js',
           '!app/scripts/main.js',
           '!app/scripts/chromereload.js'],
     options: {
       specs: 'test/spec/{,*/}*.js',
       vendor: ['app/bower_components/angular/angular.js',
                'app/bower_components/angular-animate/angular-animate.js', 
                'app/bower_components/angular-aria/angular-aria.js',
                'app/bower_components/angular-material/angular-material.js',
                'app/bower_components/angular-mocks/angular-mocks.js']
              }
       }
     }
    
  • You’re done! Now you can create controllers and services using
    yo angular:controller Dashboard
    yo angular:service Storage
    
  • Run jasmine for unit-testing
    grunt test