Using Protractor with $httpBackend correctly

Question

I've read about how Protractor works, I've written several E2E tests in it and still I feel uncomfortable about using it with $httpBackend service and I think it's possible I'm missing an important part of the picture.

In order to have the HTTP calls mocked out, I'd need to use $httpBackend service provided within Angular's ngMockE2E module. To have that module included in the application I'm testing, I'd need to configure it when bootstrapping my main module, as its dependency, like this:

angular.module('myApp', ['ngMockE2E', 'bunch-of-other-dependencies'])

It effectively means I need to have the separate initialization for my E2E tests from the production initialization. This also means I need to have the separate index.html.

Maintaining those 2 additional files that are "almost" identical to its roots seems cumbersome. Moreover, separate index and module definition means that the tests will be testing on slightly different application than the production, which for me seems to be against its purpose.

Do I understand the puzzle here correctly or am I missing something? Are there any better solutions to run backendless E2E tests with Angular? Or maybe at least there are some workarounds to minimize the impact of the maintenance annoyances, if they are really unevitable?

Andre Paap · Accepted Answer · 2014-08-06T06:23:10.253

I found a workaround that might work for you.

I define my app in the html page and add my base module and ngMockE2E as dependencies. In my dist build I added grunt-processhtml that removes everything between the build:remove comments.

In grunt serve I did not include the grunt-processhtml so that runs with the $httpBackend. In the same way I add my httpBackend expectations that are removed in the dist build.

angular.module('myApp', [
    'myAppModule'
 <!-- build:remove -->
 <!-- including ngMock to test locally, but build remove wil make sure it's not in the dist -->
    , 'ngMockE2E'
    <!-- /build -->
    '
]) ;

It's a bit of work to setup, but once setup it gives a lot of flexibility.

Using Protractor with $httpBackend correctly

1 Answers1