ngMockE2E $httpBackend "passThrough()" doesn't work

Hi, I'm trying to set up some test that actually do hit the backend, but I can't get this to work:

$httpBackend.whenPOST(/./).passThrough()
$httpBackend.whenGET(/./).passThrough()

But I get the error: "POST /some/url No more request expected"

I am still able to use .whenGET().respond(), and it's variants, to mock the requests. Am I doing something wrong with passThrough()?

[mstaessen]

I too have this issue. As far as I can tell, the mocked $httpBackend keeps the "real" $httpBackend as a delegate but for some reason, this delegate is also a mocked $httpBackend, which does not expect the request resulting in this error.

[thescientist13]

Anyone got any feedback on this issue? I can't believe how hard it is to write an actual integration test in Angular... ugh.

[davidowens]

I found that this worked for me when I was having that problem on my views folder. Maybe it's a start for you too.

$httpBackend.whenGET(/views\/.*/).passThrough();

(from here https://groups.google.com/forum/?fromgroups=#!topic/angular/ObdxCoCObYU)

[tadas-subonis]

And duplicate here: #2512

[megalithic]

I don't see where #2512 is actually a duplicate. There, the problem is failing to actually instantiate ngMockE2E for the httpbackend. Here, the problem is that the ngMockE2E delegates passThrough() requests to ngMock httpbackend (i.e. doesn't use a real http backend as the delegate)

[trav]

I am also having this issue.

[imthiyazph]

As a workaround, I modified angular-mocks.js and commented out the registration of $HttpBackendProvider in ngMock module. This way, the $httpBackend in ngMockE2E will use the actual $httpBackend in ng module when passThrough option is used.
In my specs where I was using ngMock.$httpBackend to mock the $http service, I added ngMockE2E as my module dependency to get my specs running.

[rozzerhmq]

I am having this issue too. This issue is reported from a year ago and still there...

[rodrigopedra]

I'm using version 1.2.9

If you are using ngAnimate and animating ngView, include the angular-animate.js after angular-mocks.js

this is my setup:

<script src="scripts/vendor/angular-1.2.9/angular.js"></script>
<script src="scripts/vendor/angular-1.2.9/angular-route.js"></script>
<script src="scripts/vendor/angular-1.2.9/angular-sanitize.js"></script>
<script src="scripts/vendor/angular-1.2.9/angular-resource.js"></script>
<script src="scripts/vendor/angular-1.2.9/angular-mocks.js"></script>
<script src="scripts/vendor/angular-1.2.9/angular-animate.js"></script>
<script src="scripts/app.js"></script>

and a sample app.js:

angular.module('app', ['ngRoute', 'ngAnimate', 'ngMockE2E'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    'use strict';

    $routeProvider
        .when('/home', {
            controller: 'HomeCtrl',
            templateUrl: 'partials/home.html'
        })
        .otherwise( { redirectTo: '/home' } );

    $locationProvider.html5Mode(false).hashPrefix('!');
}])
.run(['$httpBackend',
    function ($httpBackend) {
        $httpBackend.whenGET(/\.html$/).passThrough();
    }
]);

I was having problems when including angular-animate.js before angular-mocks.js, I checked the network panel and the .html file was being downloaded correctly, then checked the elements panel and the DOM was being altered correctly too... changing the load order of the scripts worked for me.

[schmod]

I too have this issue. As far as I can tell, the mocked $httpBackend keeps the "real" $httpBackend as a delegate but for some reason, this delegate is also a mocked $httpBackend, which does not expect the request resulting in this error.

I also noticed this when trying to debug this issue.

In a "real" browser, the ngMockE2E backend keeps the real $httpBackend around as its $delegate. However, when I'm running Jasmine/Karma, for some reason, that delegate isn't defined, and the "real" $httpBackend's constructor never seems to be called at all.

[schmod]

I some more digging, and this appears to be an artifact of the fact that the angular-mocks injector (window.inject) automatically adds ng and ngMock as module dependencies to anything that it injects.

Loading ngMock and ngMockE2E at the same time appears to the injector's providerCache cache, which ultimately leads to ngMockE2E's $httpBackend $delegate pointing to ngMock's $httpBackend, rather than ng's $httpBackend (which is what the documented functionality is).

If we manually inject ng's $httpBackend into ngMockE2E, it looks like the delegate gets set correctly...

If I make the following change to angular-mocks.js, .passThrough() works correctly in Jasmine, and "normal" browsers:

@@ -1761,7 +1761,9 @@ angular.module('ngMock', ['ng']).provider({
  * Currently there is only one mock present in this module -
  * the {@link ngMockE2E.$httpBackend e2e $httpBackend} mock.
  */
-angular.module('ngMockE2E', ['ng']).config(['$provide', function($provide) {
+angular.module('ngMockE2E', ['ng']).service('$httpBackend', function(){
+   return angular.injector(['ng']).get('$httpBackend');
+}).config(['$provide', function($provide) {
   $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
 }]);