How to test $http with Jasmine in AngularJS

Question

I'm trying to test the data received from an $http request in my controller.

I don't have too much experience testing with Angular so I'm struggling to under stand how to do it.

$scope. always comes back undefined and when I've tried fetching the data from the test, that seems to fail also. What am I missing?

Controller:

'use strict';

var myApp = angular.module('myApp.view1', ['ngRoute']);

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}]);


myApp.controller('View1Ctrl', [

  '$scope',
  '$http',

  function($scope, $http) {
    $http.get('view1/data.json')
    .then(function(res){
      $scope.data = res.data.data
    });
}]);

Test:

'use strict';

describe('myApp.view1 module', function() {

  beforeEach(module('myApp.view1'));


  describe('view1 controller', function(){

    var scope, testCont;

      beforeEach(inject(function($rootScope, $controller) {
          scope = $rootScope.$new();
          testCont = $controller('View1Ctrl', {$scope: scope});
      }));

    it('should....', function(){
      expect($scope.data).toBeDefined();
    });

  });
});

@AlvaroJoao the problem wouldn't be with that file, since i can grab it just fine in my controller — IAmAkittycatAMA
– IAmAkittycatAMA, Commented Jun 30, 2016 at 4:18
can you double check the res.data.data is the correct path to json's data? — Alvaro Silvino
– Alvaro Silvino, Commented Jun 30, 2016 at 4:19

IAmAkittycatAMA · Accepted Answer · 2016-06-30 04:46:41Z

The HTTP requests will not fire unless you call $httpBackend.flush().

More information can be found here: http://docs.angularjs.org/api/ngMock.$httpBackend

Test:

'use strict';

describe('myApp.view1 module', function() {
var $httpBackend, $rootScope, createController, jsonHandler;
beforeEach(module('myApp.view1'));


describe('view1 controller', function(){

var scope, testCont;

  beforeEach(inject(function($rootScope, $controller, $injector) {
   // Set up the mock http service responses
   $httpBackend = $injector.get('$httpBackend');
   // backend definition common for all tests
   jsonHandler= $httpBackend.when('GET', '/view1/data.json')
                            .respond({data: '[XXX,XXX,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('View1Ctrl', {'$scope' : $rootScope });
    };

  }));

it('should....', function(){

   $httpBackend.expectGET('/view1/data.json');
   var controller = createController();
    $httpBackend.flush();
});

});
});

Collectives™ on Stack Overflow

How to test $http with Jasmine in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related