Joe White’s Blog

Life, .NET, and Cats


Growl for angular-seed test-status notifications

Updated 5/4/2014 for Angular 1.2.16 and Karma 0.10.10.

When you run angular-seed’s test runner (formerly scripts\test.bat, now npm test), it runs all the tests once, and then enters watch mode. If you make a change to any of your source files (either production code or test code), it will automatically re-run the tests. This is pretty cool, but you need some way to see the test results.

If I were doing Angular development at work, I’d have dual monitors, and I could put my editor on one monitor and the test runner’s console window on the other monitor, so I’d get instant feedback. But then I’d go to look something up in the documentation, and now the console is covered up by a Web browser, so I’d have to juggle that. And in my case, Angular is just a hobby, and I don’t have dual monitors at home.

So I went looking for a way to show the build status via toast alerts. And it turned out to be pretty easy.

Growl

The Jasmine test runner has lots of extensions available, and one of them shows build status via Growl notifications.

Growl for Windows in action

Growl is a toast-alert platform for the Mac, and there’s also a Growl for Windows. I’ve included a screenshot of a couple of alerts so you can see what it looks like. Each alert sticks around for a few seconds, so I made my test fail, saved, quickly made it pass, saved, and took a screenshot.

So this is pretty cool. You’ll still have to look at the console window to see which tests failed and why, but if you expected it to pass and it did, you can just keep storming along.

Configuring angular-seed and Growl

  1. Download and install Growl for Windows. The installation is pretty simple.

  2. Go to a command prompt, cd to your project directory (the directory with the package.json in it), and type:

    npm install --save-dev karma-growl-reporter
    

    This will install the karma-growl-reporter Node.js module (and all its dependencies) into your project’s node_modules directory, where they need to be for Jasmine to find them.

    It will also (because of the --save-dev option) automatically modify your package.json file to say that you depend on the karma-growl-reporter package. This isn’t important now, but will be when you want to check out your code on another computer — you can rebuild your node_modules directory on that other computer by running npm install to install all the dependencies listed in your package.json.

  3. Edit your config/karma.conf.js and make the changes labeled “STEP 1” and “STEP 2”. (The below config file also includes the changes to make angular-seed run CoffeeScript tests.)

    module.exports = function(config){
        config.set({
        basePath : '../',
    
        files : [
          'app/lib/angular/angular.js',
          'app/lib/angular/angular-*.js',
          'test/lib/angular/angular-mocks.js',
          'app/js/**/*.js',
          'test/unit/**/*.coffee',
          'test/unit/**/*.js'
        ],
    
        autoWatch : true,
    
        frameworks: ['jasmine'],
    
        browsers : ['Chrome'],
    
        plugins : [
                // STEP 1: Add 'karma-growl-reporter' to this list
                'karma-growl-reporter',
                'karma-coffee-preprocessor',
                'karma-junit-reporter',
                'karma-chrome-launcher',
                'karma-firefox-launcher',
                'karma-jasmine'
                ],
    
        // STEP 2: Add the following section ("reporters") -- or if you already have
        // a "reporters" section, add 'growl' to the list:
        reporters: ['progress', 'growl'],
    
        junitReporter : {
          outputFile: 'test_out/unit.xml',
          suite: 'unit'
        }
    
    })}
    

Then run npm test, and you should see a toast alert pop up, telling you your tests are passing.

There are no responses to “Growl for angular-seed test-status notifications” yet.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Joe White's Blog copyright © 2004-2011. Portions of the site layout use Yahoo! YUI Reset, Fonts, and Grids.
Proudly powered by WordPress. Entries (RSS) and Comments (RSS). Privacy policy