angular-mocks-async demo

https://github.com/amoldavsky/angular-mocks-async

by Assaf Moldavsky

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-mocks.js"></script>
<script src="https://cdn.rawgit.com/amoldavsky/angular-mocks-async/master/src/angular-mocks-async.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>
<article ng-app="myApp" ng-controller="asyncTest">
  <h2>Angular Mock Async Demo</h2>
  <p>the buttons below are mocked using setTimeout</p>
  <button class="btn btn-primary" href="" ng-click="httpTest('GET')">GET</button>
  <button class="btn btn-primary" href="" ng-click="httpTest('POST')">POST</button>
  <button class="btn btn-primary" href="" ng-click="httpTest('PUT')">PUT</button>
  <button class="btn btn-primary" href="" ng-click="httpTest('DELETE')">DELETE</button>
  <br><br>
  <h5>Output</h5>
  <div class="output">
    {{ output }}
  </div>
</article>

CSS

.output {
  border: 1px solid #ddd;
  min-height: 10em;
}

JavaScript

(function( ng ) {

    var app = ng.module( 'myApp', [
    		'ngMockE2E', 
        'ngMockE2EAsync'
		]);

		app.controller( 'asyncTest', [ '$scope', '$http', function( $scope, $http ) {
    
    	$scope.output = "";
    
    	$scope.httpTest = function( method ) {
      
      	$scope.output = "";
        
				$http({
        	url: "http://api.example.com/user/103",
          method: method
        }).then( function( response ) {
        	$scope.output = response.data;
        });
      };
    
    }] );
    
     app.run( [ '$httpBackend', '$q', function( $httpBackend, $q ) {

        $httpBackend.whenAsync(
                    'GET',
                    new RegExp( 'http://api.example.com/user/.+$' )
        ).respond( function( method, url, data, config ) {

                var re = /.*\/user\/(\w+)/;
                var userId = parseInt(url.replace(re, '$1'), 10);

                var response = $q.defer();

                setTimeout( function() {

                    var data = {
                        userId: userId
                    };
                    response.resolve( [ 200, "this is a mocked async GET response", "123" ] );

                }, 1000 );

                return response.promise;

        });
        
        $httpBackend.whenAsync(
                    'POST',
                    new RegExp( 'http://api.example.com/user/.+$' )
        ).respond( function( method, url, data, config ) {

                var re = /.*\/user\/(\w+)/;
                var userId = parseInt(url.replace(re, '$1'), 10);

                var response = $q.defer();

                setTimeout( function() {

                    var data = {
                        userId: userId
                    };
                    response.resolve( [ 200, "this is a mocked async POST response", "123" ] );

                }, 1000 );

                return response.promise;

        });
        
        $httpBackend.whenAsync(
                    'PUT',
                  ...