Enable e2e Testing with Yeoman Generator Angular

The speed of development on all these tools is going so fast that this post is bound to be obsolete by the time I’m done typing, but end-to-end testing in AngularJS is too important to ignore. I want it now! And this how I got it:

1. Create a /test/e2e/ directory

I’m running two separate Karma instances, one for unit tests and one for e2e tests. Unit tests go in /test/spec/foo/myTest.js (and are automatically put there when you use commands like $ yo ¬†angular:directive myDirective). Keeping the different types of tests separate seems like a good idea, so put your e2e tests in /test/e2e/myTest.js.

2. Configure karma.conf.js

I’m just gonna post the whole thing. Changes to default settings are in red:

// Karma configuration

// base path, that will be used to resolve files and exclude
basePath = '';

// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'app/bower_components/angular/angular.js',
  'app/bower_components/angular-mocks/angular-mocks.js',
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
];

// list of files to exclude
exclude = [];

// test results reporter to use
// possible values: dots || progress || growl
reporters = ['progress'];

// web server port
port = 8080;

// cli runner port
runnerPort = 9100;

// enable / disable colors in the output (reporters and logs)
colors = true;

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;

// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['PhantomJS'];

// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

3. Configure karma-e2e.conf.js

// Karma E2E configuration

// base path, that will be used to resolve files and exclude
basePath = '';

// list of files / patterns to load in the browser
files = [
  ANGULAR_SCENARIO,
  ANGULAR_SCENARIO_ADAPTER,
  'test/e2e/**/*.js'
];

// list of files to exclude
exclude = [];

// test results reporter to use
// possible values: dots || progress || growl
reporters = ['progress'];

// web server port
port = 9876;

// cli runner port
runnerPort = 9100;

// enable / disable colors in the output (reporters and logs)
colors = true;

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;

// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['PhantomJS'];

// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

proxies = { '/': 'http://localhost:9000' };

urlRoot = '/__karma/';

 

4. Spool It up!

  1. Start your app in one terminal window: $ grunt server
  2. Start unit testing in another terminal window: $ karma start
  3. Start e2e testing in a third terminal window: $ karma start karma-e2e.conf.js
  4. Profit!
The three processes are watching for changes to your files; every time you save a file they will automatically run your test again and/or reload your browser. Pretty awesome!

 

References

http://docs.angularjs.org/guide/dev_guide.e2e-testing

https://github.com/meskallito/angular-yeoman-e2e-test-demo/blob/master/testacular-e2e.conf.js

This entry was posted in AngularJS and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Frank
    Posted October 3 2013 at 7:26 am | Permalink

    Great post, such simple things but it helped me immensely. I am still fighting with my E2E-tests though, when I use browser().navigateTo() to go to the website, it doesn’t work. I always get a NOT FOUND message. It has something to do with that the web application is running on another port, but I can’t specify that… browser().navigateTo(‘http://localhost:9000′) gives some sort of weird sandbox error. How do I reach the web application from my tests?

  2. Posted October 3 2013 at 10:46 am | Permalink

    Hey Frank,

    Thanks for posting. I haven’t tested this but your question rings a bell. Have your tried browser().navigateTo(‘#/’)? If you don’t have html5 mode activated ($locationProvider.html5Mode(true)) you might have to add the hash before the path.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>