HTTP Backend Mock for Protractor

Common errors

• TypeError: browser is not defined

  cause This error occurs when `new HttpBackend(browser)` is called, but the Protractor `browser` global object is not available in the test context.
  fix Ensure your test is running within a Protractor environment where the `browser` object is automatically provided. If not, you might need to manually require Protractor and assign `protractor.browser`.

• Error: [$injector:modulerr] Failed to instantiate module ngMock due to: Error: [ng:btstrp] App already bootstrapped with this element

  cause This usually indicates that `angular-mocks.js` was not loaded correctly or that an attempt was made to bootstrap an AngularJS application twice, often in a Protractor context when the mock module injection conflicts with an existing bootstrap.
  fix Verify `angular-mocks.js` is included in your application under test. Ensure your Protractor `onPrepare` function correctly configures the mock module loading without conflicting with the app's initial bootstrapping.

• Error: No fixtures matched method GET to URL /api/data. There are no fixtures configured.

  cause `httpbackend` did not find a `whenGET`, `whenPOST`, etc., rule that matched the actual HTTP request made by the application under test.
  fix Double-check the method (GET, POST, PUT, etc.) and URL pattern provided to `backend.whenGET(/regex/)` or `backend.whenGET('/exact/path')` against the actual request made by your AngularJS application. Use regular expressions for more flexible matching.

Warnings

• breaking The `httpbackend` package is designed exclusively for AngularJS applications tested with Protractor. Both technologies are now considered legacy and are largely unmaintained. It is not compatible with modern Angular (2+), React, Vue, or contemporary testing frameworks like Cypress or Playwright.
  Fix: For new projects or migration, consider using native mock features of modern testing frameworks (e.g., Cypress intercept, Playwright route, Jest mocks) or dedicated HTTP mocking libraries designed for current frameworks.
• gotcha This package is CommonJS-only and does not support ES Modules (`import`/`export` syntax). Attempting to use ESM imports will lead to runtime errors.
  Fix: Use CommonJS `require()` syntax: `const HttpBackend = require('httpbackend');`.
• gotcha The `angular-mocks` library, a peer dependency for `httpbackend`'s functionality, must be explicitly included and loaded in your AngularJS application's HTML page *before* your application code, typically via a `<script>` tag. `httpbackend` does not manage this dependency directly.
  Fix: Ensure `bower_components/angular-mocks/angular-mocks.js` (or equivalent) is loaded in your test application's HTML. Example: `<script src="/bower_components/angular-mocks/angular-mocks.js"></script>`.
• gotcha The package has not been updated since 2017 and is effectively abandoned. It may contain unpatched security vulnerabilities, critical bugs, or be incompatible with newer Node.js versions or browser environments. Using it in production or sensitive testing environments is strongly discouraged.
  Fix: No direct fix for the package itself. It is recommended to use actively maintained alternatives tailored for modern web development practices and frameworks.

Install

• npm install httpbackend npm
• yarn add httpbackend yarn
• pnpm add httpbackend pnpm

Imports

• HttpBackend
  wrong:

  import { HttpBackend } from 'httpbackend';

  correct:

  const HttpBackend = require('httpbackend');

  This package is CJS-only. Attempting to use ESM `import` will result in a runtime error.

Quickstart

This quickstart demonstrates how to set up `httpbackend` with Protractor to mock both GET and POST requests, providing predefined responses for isolated testing of an AngularJS application's frontend logic.

const HttpBackend = require('httpbackend');
const protractor = require('protractor');
const browser = protractor.browser;
const element = protractor.element;
const by = protractor.by;

describe('HTTP Backend Mock Example', function() {
    let backend = null;

    beforeAll(function() {
        // Assuming 'browser' is globally available in Protractor tests or injected.
        backend = new HttpBackend(browser);
    });

    afterEach(function() {
        // Clears all defined fixtures after each test to prevent side effects.
        backend.clear();
    });

    it('should mock a GET request with a string response', function() {
        // Define a mock response for any GET request to '/api/data'
        backend.whenGET('/api/data').respond('Mocked Data');

        // Navigate to an application URL that triggers a GET request to '/api/data'
        // Ensure your Angular app on 127.0.0.1:8080 makes this request and displays the result.
        browser.get('http://127.0.0.1:8080/some-page-that-fetches-data');

        // Example: Assert on an element that displays the fetched data
        // (Assuming an element with binding 'dataResult' displays the response)
        const resultElement = element(by.binding('dataResult'));
        expect(resultElement.getText()).toEqual('Mocked Data');
    });

    it('should mock a POST request with a function response mirroring input', function() {
        // Define a mock response for POST requests, returning the request data back.
        backend.whenPOST('/api/submit').respond(function(method, url, data) {
            return [200, { receivedData: JSON.parse(data) }];
        });

        browser.get('http://127.0.0.1:8080/form-page');

        // Simulate user interaction that triggers a POST request
        element(by.model('formData.name')).sendKeys('Test User');
        element(by.css('#submitButton')).click();

        // Assert that the application processed the mocked response correctly
        const responseDisplay = element(by.binding('postResponse.receivedData.name'));
        expect(responseDisplay.getText()).toEqual('Test User');
    });
});