Tag Archives: testing

Stubbing out angularjs backends for testing via fixtures simplified.

Original Blog post this comes from.

http://michalostruszka.pl/blog/2013/05/27/easy-stubbing-out-http-in-angularjs-for-backend-less-frontend-development/

 Previous Usage

I have been using the other solution that the article describes to create a fixtures service for testing purposes but that would mean including a grunt string substitution module to ensure I did not include it in the production app.

What I liked about the new style of doing things

Using the way from the blog you can stop changing your ng-app in your index.html file and just use ?nobackend on your urls to hit the fixtures service.

My Changes to make it more useful.

Changes to index.html to ensure it is not included in production

I have made a change to my index.html file to ensure it is not packaged when you run grunt build to get the minimised files.

The below tells the build task to exclude these files.

You have to add your angular-mocks to the app else it will not be able to hook into the $httpbackend for stubbing.

<!-- build:remove -->
  <!-- Local stubbing service for development -->
  <script src="bower_components/angular-mocks/angular-mocks.js"></script>
  <script src="scripts/mock/httpBackendStub.js"></script>
<!-- endbuild --></p><p>

Modification to the solution to continue to serve html files from angular app

Here is the modification to the httpBackendStub.js to allow the angular app to still route to the html files without having to run a separate server as the blog describes.

 ......

.run(function($httpBackend) {
  $httpBackend.whenGET(/^views\//).passThrough();
  $httpBackend.whenGET( 

.......

Protractor test changes.

Make sure to update your protractor tests to use the new ?nobackend url and fix any test assertions.

Protractor Issues

This may cause problems with any relative url links.  I have not investigated enough to find a good solution for this.

Phantomjs and testem

I ran into this problem with Testem not picking up phantomjs from the command line to run the tests.

My testem.json

{
“launch_in_dev”: [
“phantomjs”
]

}

The problem

npm folder where the installs occur for globals was still owned by root.

If I tried to run phantomjs from the command line it would throw up a stack trace about ownership.

The solution Chown

sudo chown -R the location where the global node modules are installed by npm.

OSX

sudo chown -R YOURUSER:YOURGROUP /usr/local/lib/node_modules/

Linux

sudo chown -R YOURUSER:YOURGROUP /usr/lib/node_modules/