title: Unit Test Angular http.post with Data in Header
body: <p>I am trying to write a unit test for service that performs a http.post to an api that passes credentials in the header.</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>app.controller('LoginController', function($scope, $http, signInService) {
  
      $scope.LogIn = function(usrnm, pwd) {
          signInService.authUser(usrnm, pwd)
          .success(function (data, status, headers, config) {
              // Display success message
              $scope.gotToAddress = data.successUrl;
          })
          .error(function (data, status, headers, config) {
             // Display error message
          }
      }
  });
  </code></pre>
  
  <p><strong>signInService:</strong></p>
  
  <pre><code>app.service('signInService', function($http) {
  
      this.authUser = function (usrnm, pwd) {
  
          return $http({
              url: '/api/json/authenticate',
              method: "POST",
              data: '{}',
              headers: {
                  'Content-Type': 'application/json',
                  'X-app-Username': usrnm,
                  'X-app-Password': pwd
              }
          });
      };
  });
  </code></pre>
  
  <p><strong>Unit test:</strong></p>
  
  <pre><code>describe('mocking service http call', function() {
      beforeEach(module('myApp'));
  
      var LoginController, $scope;
  
      describe('with httpBackend', function() {
          beforeEach(inject(function($controller, $rootScope, $httpBackend) {
              $scope = $rootScope.$new();
  
              $httpBackend.when('POST', '/api/json/authenticate', {}, function(headers) {
              return {
                  'Content-Type': 'application/json',
                  'X-app-Username': 'admin',
                  'X-app-Password': 'admin'
              };
          }).respond(200)
  
              LoginController = $controller('LoginController', { $scope: $scope });
              $httpBackend.flush();
          }));
  
          it('should set data to "things and stuff"', function() {
              expect($scope.data).toEqual({things: 'and stuff'});
          });
      });
  });
  </code></pre>
  
  <p>When running the test i am seeing the following error: mocking service http call » with httpBackend
  Error: No pending request to flush ! </p>
  
  <hr>
  
  <p>Controller with service on .succeed:</p>
  
  <pre><code>app.controller('LoginController', function($scope, $http, signInService, cookieSrv) {
  
      $scope.LogIn = function(usrnm, pwd) {
          signInService.authUser(usrnm, pwd)
          .success(function (data, status, headers, config) {
              // Display success message
              var cookieID = 'myCookie';
              cookieSrv.createCookie(cookieID, data.token, 3, data.redirectUrl);
          })
          .error(function (data, status, headers, config) {
             // Display error message
          }
      }
  });
  </code></pre>
  
  <p><strong>cookieSrv.js</strong></p>
  
  <pre><code>app.service('cookieSrv', function() {
      return {
          createCookie : function(cookieID, token, days, redirectUrl) {
              if (days) {
                  var date = new Date();
                  date.setTime(date.getTime()+(days*24*60*60*1000));
                  var expires = "; expires="+date.toGMTString();
              }
              else var expires = "";
              document.cookie = cookieID+"="+token+expires+"; path=/";
  
              window.location.assign(redirectUrl)
          }
      }
  });
  </code></pre>