CODEWITHSUNDEEP
angularjsseleniumprotractor
SquarePeg
SquarePeg

Reputation: 1781

How do I use $httpBackend (e2e) without refreshing the page i.e without browser.get

I am using Protractor and ngMockE2E to mock api responses. It works fine if I use browser.get to navigate to the next page. The expected mock data is returned, however when I navigate to the next page using a click() on the search button, $httpBackend does not pick up the GET and live data is returned.

I need it to return mock data on a button click because the application starts a session when the application loads. Browser.get causes a page refresh so although the mock data gets returned, a new session is created also which is not what happens in a live environment.

Can $httpBackend invoke a whenGET after a button click?

I am using TypeScript to write the code and http-backend-proxy for the mock module which uses ngMockE2E under the hood:

//httpBackEndMocks.ts
var HttpBackend = require('http-backend-proxy');

var proxy = new HttpBackend(browser);

export class HttpBackendMocks {

    /**
     * Builds a mock module passing any number of the responses below
     */
    buildMockModule = (funcs: Function[]) => {
        if (Array.isArray(funcs)) {
            for (var arrayIndex in funcs) {
                funcs[arrayIndex];
            }
        }
        /** Allow all other GET requests to pass through e.g. html pages */
        proxy.onLoad.whenGET(/.*/).passThrough();
    }

    /**
     * ...
     */
    buildSimpleResponse() {
        var response = require('../responses/simple-respsonse.json');
        return proxy.onLoad.whenGET('the request url').respond(response);
    }

    otherResponse() {whenGET...}

    otherResponse() {whenGET...}

    ....

I can then require:

//search.page.spec

var httpBackEndMocks: app.test.HttpBackendMocks = require('../httpBackEndMocks.js');

and load which ever responses I need:

beforeEach:
var responsesToLoad = [
       httpBackEndMocks.buildSimpleResponse(),
       httpBackEndMocks.otherResponse()
        ];
httpBackEndMocks.buildMockModule(responsesToLoad);

When I transition to the next page with this:

//search.object.page

browser.get('the url ...');

It Works. It returns the mock data BUT causes a page refresh initialising a new session.

When I transition to the next page with this:

this.submitButton.click(); //Code to cause button click omitted

It transitions to the next page without a page refresh, therefore in the same session but returns live data.

Upvotes: 3

Views: 189

Answers (1)

SquarePeg
SquarePeg

Reputation: 1781

I figured out a solution myself for anyone who has a similar issue:

The mock module with any required responses should be added BEFORE protractor starts the application. This way whenever the initial browser.get(...) is called to load the homepage, all the whenGETs will be registered.

open(responsesToLoad: any[]): void {
        this.buildMockModuleWithRequiredResponses(responsesToLoad);
        browser.get('/home');
    }

Upvotes: 0

Related Questions