Quick setup guide for end to end (e2e) testing of angularjs apps using karma, phantomjs and jasmine

Code is available in this github repo

This guide assumes you have gone through this guide

Create our directory for e2e tests or scenarios

mkdir test/e2e

Karma

Then we need to create our karma config

karma init configs/karma-e2e.conf.js

and answer the questions

• framework: jasmine
• require.js: no
• Browser: PhantomJs (cycle through options with tab)
• files: test/e2e/*.js
• exclude: leave empty
• karma watch: yes

we'll then need to edit the config file

configs/karma-e2e.conf.js

Replace jasmine with angular

JASMINE,
JASMINE_ADAPTER,

with

ANGULAR_SCENARIO,
ANGULAR_SCENARIO_ADAPTER,

karma web server

We need to tell karma where our app is running so it can run it's test against it. For this we set up a proxy, from the karma web server to our app. Go to http://localhost:9876/ and you should see your app.

proxies = {
    "/": "http://localhost:3000"
};

Next, we need to be able to access karma's web interface, where we can register additional browsers for testing, or access the test debug mode. So, we'll need a path that karma can be served on using it's built in webserver.
It's important that you don't use a path that could possibly conflict with any path on your app or it won't get served.

urlRoot = "/__karma/";

Test Server

Next, we need to start up the karma server to run tests as the code is modified

karma start configs/karma-e2e.conf.js

Add Tests

test/e2e/scenarios.js

describe('index page', function() {
    beforeEach(function() {
        browser().navigateTo('/')
    }); 

    it ('redirect works', function() {
        expect(browser().location().url()).toBe('/');
    }); 

    it ('has directive greeting', function() {
        expect(element('hello').count()).toBe(1);
    }); 

    it ('has partial greeting', function() {
        expect(element('p.partial-hello').count()).toBe(1);
    }); 

    it ('has model greeting', function() {
        expect(element('p.model-hello').count()).toBe(1);
    }); 
});

If you check the terminal where the test runner is running, you will see that it has found the scenarios.js, executed all 4 tests and if all has gone well, passed successfully.