Angular.js is a great framework used to make web apps, by manipulating the DOM and integrating with a rest backend.

Edit:
You should use ngMockE2E rather than the technique described bellow. They are verry similar. ngMockE2E is the more supported. An Example of using can be found github.com/~~/angular_e2e_http/tree/ngMockE2E



An Angular.js app has 3 main parts.
*  html where additional markup is used to populate a template with data.
* The controller's which control the templates and the services.
* The services which get data from a rest backend via xhr requests.

Testing angular apps can be done with unit tests and e2e tests. The unit tests are good for testing controllers and services but don't render the html. You need to be able to test the angular markup in the html because this is where the data is actually presented to the user, a mistake here and everything else is useless. A easy mistake here could be to miss type a ng-model.

In the unit tests you can easily inject a mocked http backend to feed test data into the services. But you cant do this in the e2e tests the same way. I've gotten around this to test everything in the app.

In my app we have a app.html which is the entry point to the app, it imports our javascript which then uses other template.html's to draw the screen. I've created a test version app.test.html to be used as a replacement in our e2e tests. App.test.html includes some extra javascript which sets a mocked the http backend for the app. This returns lets the e2e with static responses to our xhr requests.

In my app we have a app.html which is the entry point to the app, it imports the javascript which then uses our template.html's to draw the screen. I've created a test version of app.html which includes a mocked http backend for the app. This mock includes the static responses for our xhr requests.


Heres an example.

app.test.html

&lt!-- for using mocked data while testing --&gt
&ltscript type="text/javascript" src="../test/lib/angular/angular-mocks.js"&gt&lt/script&gt
&ltscript type="text/javascript" src="../test/e2e/mocks.js"&gt&lt/script&gt

mocks.js

App.config(function($provide){
  $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
});

App.run(function($httpBackend){
  console.log('Setting up mocks');
  $httpBackend.whenGET('/rest/foo?query=bar').
    respond({"foo":"bar"});
});

scenario.js

describe('app', function() {
  beforeEach(function() {    browser().navigateTo('../../app/app.test.html');});
  it('should render the response', function() {
    expect(element('.bar').text().tobe('bar');
  });
});


These are not complete end 2 end tests. A complete end 2 end test would run against a running backend. But my team have found that to be too much overhead for us. We know our test coverage is disjoint at the rest layer and are comfortable with that.

Edit:
Heres a example project showing the technique https://github.com/stephennancekivell/angular_e2e_http