Mock Angular HttpClient in protractor e2e test

Question

My application is making an http call to my backend immediately on page load. My e2e test is failing because there is no backend running in my ci pipelines.

I have tried using the rxjs catchError piped operator on the http call

I have tried wrapping the whole http call in a try / except block

I am still getting the error showing up in the dev console (which is causing the e2e test to fail)

I am wondering how I can provide a mock HttpClient to the protractor tests?

Actual Http call

return this.http.get<any>( url ).subscribe(...)

(this.http is an instance of angular's HttpClient)

spec file:

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe( 'workspace-project App', () => {
  let page: AppPage;

  beforeEach( () => {
    page = new AppPage();
  } );

  it( 'should display login page', () => {
    page.navigateTo();
    expect( page.getLoginTitleText() ).toEqual( 'Welcome to
App
Click below to sign in with Google' );
  } );

  afterEach( async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get( logging.Type.BROWSER );
    expect( logs ).not.toContain( jasmine.objectContaining( {
      level: logging.Level.SEVERE,
    } as logging.Entry ) );
  } );
} );

protractor's page object file (app.po)

import { browser, by, element } from 'protractor';

export class AppPage {
  public navigateTo() {
    return browser.get( browser.baseUrl ) as Promise<any>;
  }

  public getLoginTitleText() {
    return element( by.css( 'app-root app-login div.login-wrapper form.login section.title' ) )
      .getText() as Promise<string>;
  }
}

error in dev console:

question from:https://stackoverflow.com/questions/65832462/mock-angular-httpclient-in-protractor-e2e-test

Answer 1

I am just responding to the question about mocking Angular HTTPClient. Assuming you have Angular version 4 or greater, there is a built in testing module for mocking httpclient called HttpClientTestingModule which you can get from the Testbed.

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
//add these imports:
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe( 'workspace-project App', () => {
  let page: AppPage;
  var httpMock: HttpTestingController;

  beforeEach( () => {
      TestBed.configureTestingModule({
      imports: [
      HttpClientTestingModule
      ]
    });
    page = new AppPage();
    httpMock = TestBed.get(HttpTestingController);
  } );

//add async keyword to test
//mock up the get request by recreating the URL
  it( 'should display login page', async () => {
    let urlPrefix = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port;
    let url = urlPrefix + 'infoo';
    let navigateTo_call = page.navigateTo();
    const request = httpMock.expectOne(url); 
    navigateTo_call.then(res => { 
   //do your checks here
   expect( page.getLoginTitleText() ).toEqual( 'Welcome to
App
Click below to sign in with Google' );
  });
   request.flush("a mock response object");
    
  } );

  afterEach( async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get( logging.Type.BROWSER );
    expect( logs ).not.toContain( jasmine.objectContaining( {
      level: logging.Level.SEVERE,
    } as logging.Entry ) );
  } );
} );