AngularJS - Unit test for http get to JSON file

Question

I am trying to write a unit test to test a simple factory that performs a http.get to retrieve a JSON file.

The factory is called within my controller.

Here's a plunker showing my http.get: http://plnkr.co/edit/xg9T5H1Kreo4lwxzRQem?p=preview

Ctrl:

app.controller('MainCtrl', function($scope, $http, factoryGetJSONFile) { 

  factoryGetJSONFile.getMyData(function(data) {
    $scope.Addresses = data.Addresses.AddressList;
    $scope.People = data.Names.People;
  });

});

Factory:

app.factory('factoryGetJSONFile', function($http) {
  return {
    getMyData: function(done) {
      $http.get('data.json')
      .success(function(data) {
        done(data);
      })
      .error(function(error) {
        alert('An error occured whilst trying to retrieve your data');
      });
    }
  }
});

Test:

// ---SPECS-------------------------

describe('with httpBackend', function () {
    var app;
    beforeEach(function () {
        app = angular.mock.module('plunker')
    });

    describe('MyCtrl', function () {
        var scope, ctrl, theService, httpMock;

        beforeEach(inject(function ($controller, $rootScope, factoryGetJSONFile, $httpBackend) {
            scope = $rootScope.$new(),
            ctrl = $controller('MyCtrl', {
                $scope: scope,
                factoryGetJSONFile: theService,
                $httpBackend: httpMock
            });
        }));

        it("should make a GET call to data.json", function () {
                console.log("********** SERVICE ***********");
                  httpMock.expectGET("data.json").respond("Response found!");
                //expect(factoryGetJSONFile.getMyData()).toBeDefined();
                httpMock.flush();
            });

    })
});

Error:

TypeError: 'undefined' is not an object (evaluating 'httpMock.expectGET')

as your code is now it would only compile if you write factoryGetJSONFile: factoryGetJSONFile but it would simply call the original service. You have to define a mock service and put it in theService — sam
– sam, Commented Nov 21, 2014 at 9:22

merlin · Accepted Answer · 2014-11-21 09:22:57Z

2

You should assign $httpBackend to httpMock in beforeEach like this:

   beforeEach(inject(function ($controller, $rootScope, factoryGetJSONFile, $httpBackend) {
        httpMock = $httpBackend;
        scope = $rootScope.$new();
        ctrl = $controller('MyCtrl', {
            $scope: scope,
            factoryGetJSONFile: factoryGetJSONFile,
            $httpBackend: httpMock
        });
    }));

answered Nov 21, 2014 at 9:22

merlin

341 gold badge15 silver badges23 bronze badges

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

2 Comments

Oam Psy Over a year ago

why define it in the beforeEach and inside the ctrl parameters?

Oam Psy Over a year ago

tried your code, get an error: Error: Unexpected request: GET /data.json? Expected GET /data.json Where is the ? coming from??

Collectives™ on Stack Overflow

AngularJS - Unit test for http get to JSON file

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related