angular JS mock json unit testing

Question

var app= angular.module('app', []);

below is my factory method that will get the data from the sample.json

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

below is my controller. I can able to access the service data in my controller

app.controller('homeController', ['$scope', 'factoryGetJSONFile', function ($scope, factoryGetJSONFile) {

    factoryGetJSONFile.getMyData(function (data) {
        $scope.name = data.projectDetails.name;
        $scope.duration = data.projectDetails.duration;
        console.log($scope.name+ " and duration is " + $scope.duration);
    });

}]);

Below is my sample.json

{
    "status": 200,
    "projectDetails": {
        "name": "Project Name",
        "duration": "4 Months",
        "business_place": "Dummy address"
    }
}

How to write the unit test cases for the above get service. I would like to test projectDetails.name in my test cases.

You can find it here link jsfiddle.net/seshuggina/5u7L8mou/2 — Seshu Vuggina
– Seshu Vuggina, Commented Sep 30, 2015 at 19:44

Theo Sherry · Accepted Answer · 2015-10-01 03:52:20Z

1

To mock http responses you can use the $httpbackend service. For example, if you want to test the getMyData method of the object created by your factory, you'd do something like:

var $httpbackend,
factoryGetJSONFile;

var sample.json = // Your sample JSON
var getUrl = 'mock/sample.json';

beforeEach(inject(function(_$httpbackend_, _factoryGetJSONFile_) {
    // Load app
    module('app');
    // Make services available in tests
    $httpbackend = _$httpbackend_;
    factoryGetJSONFile = _factoryGetJSONFile;

    // Mock the server's response
    $httpbackend.when('GET', getUrl).
        respond(sample.json);

}));

It('factoryGetJSONFile.getMyData should make correct GET request', function() {
    // Call your services method and flush $httpbackend so the mock response is sent
    var response = factoryGetJSONFile.getMyData();
    $httpBackend.flush();

    expect(response).toEqual(jasmine.objectContaining(sample.json));
});

edited Oct 1, 2015 at 3:52

answered Sep 30, 2015 at 17:45

Theo Sherry

1231 gold badge3 silver badges11 bronze badges

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

4 Comments

Seshu Vuggina Over a year ago

its not working.. its throwing following error factoryGetJSONFile.getMyData should make correct GET request

Theo Sherry Over a year ago

What error is it throwing? What you gave is just the description of the test. You need ngMocks installed to use $httpbackend so check that angular-mocks.js is included in your karma.conf.js file.

Seshu Vuggina Over a year ago

I have included angular-mock.js. Expected undefined to equal Object({ status: 200, projectDetails: Object({ name: 'Project Name', duration: '4 Months', business_place: 'some address' }) }).

Theo Sherry Over a year ago

You have to load your app in the unit tests; I forgot to put that in. I'll update my answer. If it still doesn't work after that please upload your tests somewhere and I'll look at them.

Collectives™ on Stack Overflow

angular JS mock json unit testing

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related