how to test $http call in angular js?

Question

I am trying to test my $http request using karma and jasmine.I make one controller and inject a service .In service I call $http service.I need to test that service how I will test this service this is my controller.

angular.module('app',[]).controller('first',function($scope,data){
    $scope.name='test';
    data.getData().then(function(data){
          console.log(data);
    })

}).factory('data',function($http){
    return{
        getData:getData
    }

    function getData(){
             return $http.get('data.json').success(successCall).error(errorcallback)
    }

    function   successCall(data){
          return data
    }
    function   errorcallback(data){
        return data
    }
})

here is plunker http://plnkr.co/edit/POryyDUc8bvvfvI5Oap7?p=preview

i start like this

describe('http controller test', function () {

    var $rootScope,
        $scope,
        controller;

    beforeEach(function(){
        module('app')  ;

        inject(function($injector){
            $rootScope  =  $injector.get('$rootScope') ;
            $scope=$rootScope.$new();
            controller =$injector.get('$controller')('first',{$scope:$scope})
        })
    })

    describe('Init value',function(){
        it('check name value',function(){
            expect($scope.name).toEqual('test');
        })

    })

    it('it should be true',function(){
        expect(true).toBeTruthy();

    })
})

could you please tell me how to write test when there is dependency of service in controller ?? how to test $http request in jasmine?in my controller there is a dependency of a service .how to inject this in my test file?

If you want to test the service and the request to the server, use $httpBackend: docs.angularjs.org/api/ngMock/service/$httpBackend — Bas Slagter
– Bas Slagter, Commented Dec 18, 2015 at 15:55
yes I studied ..but I understand little bit ..could you please change y example — user944513
– user944513, Commented Dec 18, 2015 at 15:56

Community · Accepted Answer · 2017-05-23 11:44:42Z

0

You can inject the data service this way:

 describe('http controller test', function () {
    var $rootScope,
        $scope,
        data,
        controller;

     beforeEach(module('app'));

     beforeEach(inject(function ($controller, $rootScope, $state, _data_) {
        scope = $rootScope.$new();
        state = $state;
        data = _data_;
        controller = $controller('first',{$scope:$scope});
     });

     it('data service should be defined',function(){
         expect(data).toBeDefined();
     });
});

There is an example regarding testing promises using Angular and Jasmine here and an example regarding testing $http promises here using $httpBackend.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Dec 18, 2015 at 15:50

pgrodrigues

2,0781 gold badge25 silver badges30 bronze badges

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

3 Comments

user944513 Over a year ago

is there any online test editor to test this ? I am studying there is $httpbackend ? can we use that httpbackend ?

user944513 Over a year ago

Many times I saw this jasmine keyword spyOn spyOn ...? what is that

user944513 Over a year ago

if httpbackend and spyOn is necessary for $http request why didn't you use

Brian McAuliffe · Accepted Answer · 2015-12-18 16:04:26Z

$httpbackend is what you need.

API Reference / ngMock / service components in ngMock / $httpBackend

Here is a snippet from that page.

    describe('MyController', function() {
   var $httpBackend, $rootScope, createController, authRequestHandler;

   // Set up the module
   beforeEach(module('MyApp'));

   beforeEach(inject(function($injector) {
     // Set up the mock http service responses
     $httpBackend = $injector.get('$httpBackend');
     // backend definition common for all tests
     authRequestHandler = $httpBackend.when('GET', '/auth.py')
                            .respond({userId: 'userX'}, {'A-Token': 'xxx'});

     // Get hold of a scope (i.e. the root scope)
     $rootScope = $injector.get('$rootScope');
     // The $controller service is used to create instances of controllers
     var $controller = $injector.get('$controller');

     createController = function() {
       return $controller('MyController', {'$scope' : $rootScope });
     };
   }));


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


   it('should fetch authentication token', function() {
     $httpBackend.expectGET('/auth.py');
     var controller = createController();
     $httpBackend.flush();
   });

Collectives™ on Stack Overflow

how to test $http call in angular js?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related