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',
     options: {
       specs: 'test/spec/{,*/}*.js',
       vendor: ['app/bower_components/angular/angular.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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s