AngularJS unit testing without relying on mocks for request data

I've finally got my AngularJS testing environment setup and I'm trying to test out to see if the pages on my application are working. This includes templates, routes, requests, directives and so on.

From what I've discovered, when testing out a working application it turns out that mocks are required to do most of the work. While this is nice, I would still like to test out actual templates and data from my application.

Whenever a GET call is made within my application, I get an error that looks like:

Unexpected request: GET application/templates/home.html
No more request expected
Error: Unexpected request: GET application/templates/home.html

Turns out that it can't download the request properly. Which is fine. From what I think is going on the testing runner (testacular) is unable to download the template file since it's on a different environment all together (no HTTP address provided). The only solutions I've come across on how to fix this are to stub the request with a mock using the $httpBackend service. While this is useful for certain situations, I want to fetch the actual data.

Any idea on how to fix this?

You probably want to write two different kinds of tests:

  1. Unit tests with mocks to test components in isolation, things like controllers, directives, etc
  2. e2e tests that run your full stack, including data from your own server.

These two kinds of tests each require a separate testacular configuration.

Angular provides support for navigating the test browser and interacting with your application, as a user would. The explanation and API is documented here: http://docs.angularjs.org/guide/dev_guide.e2e-testing

My testacular e2e config and explanation is posted here: http://stackoverflow.com/a/13410567/1739247

The important part for running the tests against your own server is proxies, as explained in that post.