httpMock

AngularJS module to mock (fake or stub) $http responses

Added by: Sam Deering

GitHub

Repository

dupontpioneer/httpmock

Stats

Stars: 0

Watchers: 0

Forks: 0

Module Description

httpMock

AngularJS module to mock (fake or stub) $http responses for specific URLs
(and allow all other AJAX requests to function normally)

Requirements: AngularJS 1.1.5+

Usage

Add the httpMock.js script to your index.html after the angular.js script.

<script src="httpMock.js"></script>

Add the httpMock module as a dependency for your application module.

angular.module('myApp', ['httpMock']);

To mock a $http response for a URL, dependency inject httpMock and set up the response.
(requests for URLs not intercepted are normal AJAX requests)

function Controller($scope, $http, httpMock) {
    // setup fake response
    httpMock
        .when('GET', 'api/test')
        .respond({message: 'hello world!'});

    // make request to fake URL
    $http
        .get('api/test')
        .success(function(data) {
            $scope.message = data.message; // 'hello-world!'
        });

    // make a normal request (not intercepted)
    $http
        .get('api/test2')
        .success(function(data) {
            // response from web server
            ...
        });
}

The response can be specific to data in the request, allowing multiple responses registered for the same URL which each return different data.

function Controller($scope, $http, httpMock) {
    // setup fake responses
    httpMock
        .when('POST', 'api/test', {id: 123})
        .respond({value: 'abc'});

    httpMock
        .when('POST', 'api/test', {id: 456})
        .respond({value: 'def'});

    // make requests to fake URL
    $http
        .post('api/test', {id: 123})
        .success(function(data) {
            $scope.value = data.value; // 'abc'
        });

    $http
        .post('api/test', {id: 456})
        .success(function(data) {
            $scope.value = data.value; // 'def'
        });
}

The response status code and headers can also be set.

function Controller($scope, $http, httpMock) {
    // setup fake response
    httpMock
        .when('GET', 'api/test')
        .respond(
            {message: 'hello world!'},            // response data
            256,                                  // response status code
            {'x-custom-header': 'custom-value'}); // response headers

    // make request to fake URL
    $http
        .get('api/test')
        .success(function(data, status, headers) {
            $scope.message = data.message;              // 'hello world!'
            $scope.status = status;                     // 256
            $scope.header = headers('x-custom-header'); // 'custom-value'
        });
}

Motivation

Front-end developers often need to work ahead of back-end developers. If the front-end developers do not want to get into the back-end code they need a way to mock HTTP responses in javascript.

The built-in E2E $httpBackend has support for request pass-through, but you have to explicitly specify which request URLs should pass through (and their corresponding HTTP methods). This also creates a difference between your development environment and your production environment because you have swapped out the normal backend for $http with the E2E $httpBackend. This library takes the opposite approach: all requests go through the normal $http backend with some special handling for mocked requests.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

License

Copyright DuPont Pioneer

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Module stats last updated: 2015-04-19 02:53:59

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!