qrqhvw
Last Updated: February 25, 2016
·
8.662K
· rhysr
51c58b82ee6b34cd5e6e500ddd08891e

Angular e2e Testing Setup

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.

Say Thanks
Respond

2 Responses
Add your response

8908
C7feb49632e346fb86c4d13c503c2c73

When was this tutorial published?

over 1 year ago ·
12481
406e9e44c15b99307c593042a728e929

I think this is older. It looks, from the use of browser().navigateTo, like it uses ngScenario, which I think is replaced by protractor.

over 1 year ago ·