AngularJS : mock http service (Using $httpBackend) to respond with some data to the success method of Promise API

Question

I tried to interpret simpler version of my question.
1)I m writing Unit tests forcontroller(myController) method(subtract).
2)mocking http using httpbackend i want to return a response of 200 to success function of http in subtract method to down its value in the success function of any dummy DELETE url(which is always successful outside test environment).
3)But i see expect(scope.testvalue) to be 5 only. Any help is appreciated.

'use strict';
describe('MyController UNIT TEST specs ', function () {    
var scope, http, location, ctrl, httpBackend;
beforeEach(module('myApp', 'ui.router')); 

beforeEach(inject(function ($rootScope, $http, $controller, $httpBackend) {
    scope = $rootScope.$new();
    http = $http;
    httpBackend = $httpBackend;
    ctrl = $controller('myController', { $scope: scope, $http: http});
    httpBackend.when('DELETE', 'url').respond(200, 'fsdf');
}));

afterEach(function () {
    httpBackend.verifyNoOutstandingExpectation();
    httpBackend.verifyNoOutstandingRequest();
});    

it('test 1 : Subtract 1 from a value enter code here` using subtract method in myController', function () {
    httpBackend.when('DELETE', 'url').respond(200);
    var testvalue = 5;
    scope.subtract(testvalue);
    expect(testvalue).toBe(4);
});
});
angular.module("myApp").controller("myController", function ($scope, $http) {    
    $scope.subtract = function (testValue) {    
        $http({
            method: 'DELETE',
            url: 'url'
        }).then(function (data) { //success    
            //irrespective of data subtract 1 here     
            testValue - 1 = 4;    
        }, function (errResult) { //fail
            console.log(errResult);
        });
    }
})

Error i see is (expected) Error: Expected false to be true.

runTarm · Accepted Answer · 2014-07-15 16:15:06Z

3

In unit testing using angular-mock, you have to call httpBackend.flush() manually to start simulating the http request/response before expecting the result like this:

it('test 1 : Subtract 1 from a value enter code here` using subtract method in myController', function () {
    httpBackend.when('DELETE', 'url').respond(200);
    var testObj = { testValue: 5 };
    scope.subtract(testObj);
    httpBackend.flush();
    expect(testObj.testValue).toBe(4);
});

And your http callback doesn't modify the scope.testvalue, if you are expecting the testvalue in scope to changed the callback should be like this:

$scope.subtract = function (testObj) {
    $http({
        method: 'DELETE',
        url: 'url'
    }).then(function (data) { //success
        //irrespective of data subtract 1 here
        testObj.testValue = testObj.testValue - 1;
    }, function (errResult) { //fail
        console.log(errResult);
    });
};

For the full working example see: http://plnkr.co/edit/kFt5vV8zCtZpfJvduujc?p=preview

edited Jul 15, 2014 at 16:15

answered Jul 15, 2014 at 11:57

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Pramod Over a year ago

Thanks for the quick response.Sorry I had to edit the code. 1)The error seems to be Error: No pending request to flush ! when the flush is called on httpBackend. 1)Sry its not scope test value, I'm passing as argument but the variable itself.

runTarm Over a year ago

Where exactly did you put the httpBackend.flush() call?

Pramod Over a year ago

after line "scope.subtract(testvalue);" inside test

runTarm Over a year ago

I've updated the answer and included the plunker example. Please see if that is what you want. Also in javascript, argument variables are pass by value, so if you want to modify the variable in-place, you have to, at least, wrap it inside an object like in the answer.

Pramod Over a year ago

Can you tell me one thing. while running the test is it entering success function? In my case It's not entering the success method to be able to manipulate testObj

|

Collectives™ on Stack Overflow

AngularJS : mock http service (Using $httpBackend) to respond with some data to the success method of Promise API

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related