{"id":17271,"library":"httpbackend","title":"HTTP Backend Mock for Protractor","description":"httpbackend is an npm module designed to mock HTTP requests specifically within an AngularJS application being tested by Protractor. Its primary function is to intercept `XMLHttpRequest` and `$http` requests made by the AngularJS application, allowing developers to define custom responses for specific URLs and methods. This facilitates isolated and deterministic testing of frontend logic without relying on a live backend server. The package is currently at version 2.0.0, last published in June 2017. Due to its tight coupling with AngularJS and Protractor, both of which are considered legacy technologies, the package is no longer actively maintained. Its release cadence was sporadic and has ceased, making it unsuitable for modern web development workflows involving current Angular versions (2+), React, Vue, or contemporary testing frameworks like Cypress or Playwright. Its key differentiator was its direct integration with Protractor's `browser` object for injecting mock modules into AngularJS applications.","status":"abandoned","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/nchaulet/httpbackend","tags":["javascript"],"install":[{"cmd":"npm install httpbackend","lang":"bash","label":"npm"},{"cmd":"yarn add httpbackend","lang":"bash","label":"yarn"},{"cmd":"pnpm add httpbackend","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the mock HTTP backend functionality to be injected into the AngularJS application under test. Must be included in the application's HTML.","package":"angular-mocks","optional":false},{"reason":"The library is designed to work exclusively with Protractor's `browser` object for test setup and interaction.","package":"protractor","optional":false}],"imports":[{"note":"This package is CJS-only. Attempting to use ESM `import` will result in a runtime error.","wrong":"import { HttpBackend } from 'httpbackend';","symbol":"HttpBackend","correct":"const HttpBackend = require('httpbackend');"}],"quickstart":{"code":"const HttpBackend = require('httpbackend');\nconst protractor = require('protractor');\nconst browser = protractor.browser;\nconst element = protractor.element;\nconst by = protractor.by;\n\ndescribe('HTTP Backend Mock Example', function() {\n    let backend = null;\n\n    beforeAll(function() {\n        // Assuming 'browser' is globally available in Protractor tests or injected.\n        backend = new HttpBackend(browser);\n    });\n\n    afterEach(function() {\n        // Clears all defined fixtures after each test to prevent side effects.\n        backend.clear();\n    });\n\n    it('should mock a GET request with a string response', function() {\n        // Define a mock response for any GET request to '/api/data'\n        backend.whenGET('/api/data').respond('Mocked Data');\n\n        // Navigate to an application URL that triggers a GET request to '/api/data'\n        // Ensure your Angular app on 127.0.0.1:8080 makes this request and displays the result.\n        browser.get('http://127.0.0.1:8080/some-page-that-fetches-data');\n\n        // Example: Assert on an element that displays the fetched data\n        // (Assuming an element with binding 'dataResult' displays the response)\n        const resultElement = element(by.binding('dataResult'));\n        expect(resultElement.getText()).toEqual('Mocked Data');\n    });\n\n    it('should mock a POST request with a function response mirroring input', function() {\n        // Define a mock response for POST requests, returning the request data back.\n        backend.whenPOST('/api/submit').respond(function(method, url, data) {\n            return [200, { receivedData: JSON.parse(data) }];\n        });\n\n        browser.get('http://127.0.0.1:8080/form-page');\n\n        // Simulate user interaction that triggers a POST request\n        element(by.model('formData.name')).sendKeys('Test User');\n        element(by.css('#submitButton')).click();\n\n        // Assert that the application processed the mocked response correctly\n        const responseDisplay = element(by.binding('postResponse.receivedData.name'));\n        expect(responseDisplay.getText()).toEqual('Test User');\n    });\n});","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use CommonJS `require()` syntax: `const HttpBackend = require('httpbackend');`.","message":"This package is CommonJS-only and does not support ES Modules (`import`/`export` syntax). Attempting to use ESM imports will lead to runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"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>`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"No direct fix for the package itself. It is recommended to use actively maintained alternatives tailored for modern web development practices and frameworks.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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`.","cause":"This error occurs when `new HttpBackend(browser)` is called, but the Protractor `browser` global object is not available in the test context.","error":"TypeError: browser is not defined"},{"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.","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.","error":"Error: [$injector:modulerr] Failed to instantiate module ngMock due to: Error: [ng:btstrp] App already bootstrapped with this element"},{"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.","cause":"`httpbackend` did not find a `whenGET`, `whenPOST`, etc., rule that matched the actual HTTP request made by the application under test.","error":"Error: No fixtures matched method GET to URL /api/data. There are no fixtures configured."}],"ecosystem":"npm","meta_description":null}