Error: Unexpected request: POST Karma-jasmine-angular

Question

the actual scenario is like when I am trying to test my angular js controller and service together in which first I call a get ajax request and on its success I call a user service which also contains a post ajax request. When I run test I got the following error.

Error: Unexpected request: POST http://localhost:8080/services/access No more request expected in /home/test/WebstormProjects/test2/bower_components/angular-mocks/angular-mocks.js

I found some similar questions in stack overflow but it is not fit my scenario. These are the following questions which I found.

Unexpected request: GET No more request expected at $httpBackend

Mocking $httpBackend - how to handle "Unexpected request, No more request expected"?

AngularJS $httpBackend - "No more request expected" error

Here is my code which I did and try.

test.js

describe('Login controller',function(){

  beforeEach(module('app'));

  var httpBackend,ctrl, scope,userService;

  beforeEach(inject(function($controller, $rootScope,$httpBackend,$injector,_userService_) {

    scope = $rootScope.$new();
    httpBackend = $injector.get('$httpBackend');

    userService = _userService_;

    ctrl = $controller('LoginController', {
      $scope: scope
    });
  }));

  it('should set authentication true', function() {

    scope.authenticateUser();

    var username = 'test';
    var password = '123456';
    var requestToken = "";

    httpBackend.whenGET('http://localhost:8080/services/request').respond(200,{
      status : 0
    });

    httpBackend.expect('POST', 'http://localhost:8080/services/access').respond(200, {
      status:"success"
    });

    var returnedPromise = userService.authenticateUser(username,password,requestToken);

    httpBackend.flush();

    expect(scope.result).toEqual(0);

    httpBackend.verifyNoOutstandingExpectation();
    httpBackend.verifyNoOutstandingRequest();

  });
});

app.js

app.controller('LoginController', function LoginController($scope,$http,userService) {
  $scope.test="hello";
  $scope.authenticateUser = function(){
    var username = 'test';
    var password = '123456';
    var token = "";

    $http.get('http://localhost:8080/services/request').success(function(data) {
        $scope.result = data.status;
        userService.authenticateUser(username, password, "").then(function(response){});
    });
  };
});

userService.js

userService.authenticateUser = function(username, password,requestToken){

            var status = $http({
                method: 'POST',
                url: "http://localhost:8080/services/access",
                data: $.param({username:username,password:password,request_token:requestToken}),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}

            }).success(function(data, status, headers, config) {
                return data;

            }).
              error(function(data, status, headers, config) {
                return null;
            });
            return status;
        };

        return userService;

I am new with karma-jasmine-angular test and I am struggling with this kind of scenarios. Please provide me proper guidance to resolve this kind of testing situation. Any help will be appreciate. If possible please suggest me some good demos to test a service which called on success of a service. Thanks in advance.

Answer 1

You forgot to fake backend respond when POST request to http://localhost:8080/services/access. On the test you only test the expected POST request whether it was made or with correct params. Just add in fake response and it will work perfectly

httpBackend
    .when('POST', 'http://localhost:8080/services/access')
    .respond(200, {
        status: "success"
});

Link fiddle for your preference.