http-backend-proxy is not working with protractor e2e

Question

I'm new to e2e testing and angular, and am trying to figure out how to mock http requests. I have an app that I need to make xhr requests to things like a footer and a constants file, that I want to actually go through, but the actual service calls like adding something to the DB, I want to mock (so that whenever I run e2e tests it doesn't populate test data everytime).

I will eventually be hitting an API, but just to get the ball rolling I am making an $http get to /someUrl on that function which handles that element's click.

describe('companyManagement', function() {
    var proxy;
    var HttpBackend = require('http-backend-proxy');
    beforeEach(function(){
        proxy = new HttpBackend(browser);

        proxy.onLoad.whenGET('/someUrl/').respond(200,{'mock':'data'});
        browser.get('/#/companyManagement');

        browser.pause();
        element(by.repeater('org in vm.organizations').row(0)).element(by.css('.contentHeader')).click();
    });
    it('alias should be correct in the org list', function(){
        var x;
    });
});

This is my current code. I require http-backend-proxy, and set some things up in my before each for my it statements that I will write later on. The beforeEach creates a new HttpBackend object, and does proxy.onLoad.whenGET('/someUrl').respond(200,{mock:'data'});. I then get the page (a baseUrl is set in my .conf file), and pause the browser so I can view the console. At this point, when I view the browser console, it gives my Unexpected Request errors. One for modules/footer/footer.html and one for constants/constants.json.

Error: Unexpected request: GET modules/footer/footer.html No more request expected $httpBackend@http://localhost:9000/bower_components/angular-mocks/angular-mocks.js:1244:1 sendReq@http://localhost:9000/bower_components/angular/angular.js:10515:1 $http/serverRequest@http://localhost:9000/bower_components/angular/angular.js:10222:16 processQueue@http://localhost:9000/bower_components/angular/angular.js:14745:28 scheduleProcessQueue/<@http://localhost:9000/bower_components/angular/angular.js:14761:27 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:15989:16 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:15800:15 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:16097:13 bootstrapApply@http://localhost:9000/bower_components/angular/angular.js:1660:9 invoke@http://localhost:9000/bower_components/angular/angular.js:4478:14 bootstrap/doBootstrap@http://localhost:9000/bower_components/angular/angular.js:1658:1 bootstrap/angular.resumeBootstrap@http://localhost:9000/bower_components/angular/angular.js:1686:12 anonymous@http://localhost:9000/#/companyManagement line 69 > Function:1:1 handleEvaluateEvent@http://localhost:9000/#/companyManagement:69:20

Nothing is displayed on the page, so protactor cannot click that element. I've tried things like proxy.onLoad.whenGET('/.*/').respond(200,{'mock':'data'});, but the same error occurs.

Can someone explain to me how to properly mock up http requests?

Michael Radionov Michael Radionov · Accepted Answer · 2015-12-05T11:57:18

You can simply make all requests for HTML and other static files to pass through using respective method. http-backend-proxy will just ignore them and their response will be untouched.

proxy.onLoad.whenGET(/\.html$/).passThrough();
proxy.onLoad.whenGET(/constants\.json$/).passThrough();

It' a common approach, because SPA usually make a lot of XHR requests to fetch templates, which don't have to be mocked in most of the cases. But because http-backend tracks all requests by default, you have to explicitly tell which particular ones need to be ignored.

http-backend-proxy is not working with protractor e2e

1 Answers