Error while running angularJS unit test case in Karma-Jasmine - angularjs

Question

MainCtrl.js
var app = angular.module('mailApp');
app.controller('MainCtrl', ['$scope','$http',function($scope,$http) {
$scope.sortType = 'date'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.inboxDetails = [];
$scope.loadInboxData = function(a){
if(a==1){
$http.get('inboxData.json')
.then(function(response){
$scope.inboxData = response.data;
});}
else if(a==2){
$http.get('inboxData1.json')
.then(function(response){
$scope.inboxData = response.data;
});}
}
//-----------------------------------------------
testMainCtrl.js
'use strict';
describe('MainCtrl', function () {
var $controller;
beforeEach(module('mailApp'));
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
//Test cases to verify Inbox Data
describe('$scope.loadInboxData', function () {
it('Inbox data is called', function () {
var $scope = {};
var controller = $controller('MainCtrl', {$scope: $scope});
$scope.inboxData = [{"subject": "Angular Example 11", "date": "3/8/2016", "to": "test1", "from":"abcd1","details":"Test Message 1" },{ "subject": "Angular Example 21", "date": "3/8/2016", "to": "test2", "from":"abcd2","details":"Test Message 2" },{ "subject": "Angular Example 31", "date": "4/8/2016", "to": "test3", "from":"abcd3","details":"Test Message 3" },{ "subject": "Angular Example 41", "date": "5/8/2016", "to": "test3", "from":"abcd4","details":"Test Message 4" }];
var a=$scope.loadInboxData(1);
expect($scope.inboxData).toEqual(a);
});
});
});
//------------------------------------------------
Error :
Chrome 48.0.2564 (Windows 10 0.0.0) MainCtrl $scope.loadInboxData
Inbox data is called FAILED
Expected
[
Object( {
subject:'Angular Example 11',
date:'3/8/2016',
to:'test1',
from:'abcd1',
details:'Test Message 1'
} ),
Object( {
subject:'Angular Example 21',
date:'3/8/2016',
to:'test2',
from:'abcd2',
details:'Test Message 2'
} ),
Object( {
subject:'Angular Example 31',
date:'4/8/2016',
to:'test3',
from:'abcd3',
details:'Test Message 3'
} ),
Object( {
subject:'Angular Example 41',
date:'5/8/2016',
to:'test3',
from:'abcd4',
details:'Test Message 4'
} )
]
to equal undefined.

Answer 1

You have a hard dependency on $http in your test. You should mock a return value from the $http service.
Take a look at the documentation https://docs.angularjs.org/api/ngMock/service/$httpBackend.

Answer 2

This may help you, $httpBackend is mock of $http
'use strict';
describe('MainCtrl', function () {
var $controller,$httpBackend;
beforeEach(module('mailApp'));
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
beforeEach(inject(function($injector) {
$httpBackend = $injector.get('$httpBackend');
}));
//Test cases to verify Inbox Data
describe('$scope.loadInboxData', function () {
it('Inbox data is called', function () {
var $scope = {};
var controller = $controller('MainCtrl', {$scope: $scope});
$scope.inboxData = [{"subject": "Angular Example 11", "date": "3/8/2016", "to": "test1", "from":"abcd1","details":"Test Message 1" },{ "subject": "Angular Example 21", "date": "3/8/2016", "to": "test2", "from":"abcd2","details":"Test Message 2" },{ "subject": "Angular Example 31", "date": "4/8/2016", "to": "test3", "from":"abcd3","details":"Test Message 3" },{ "subject": "Angular Example 41", "date": "5/8/2016", "to": "test3", "from":"abcd4","details":"Test Message 4" }];
$httpBackend.when('GET', 'inboxData.json').respond(yourjsonresponseData1);
$httpBackend.when('GET', 'inboxData2.json').respond(yourjsonresponseData2);
var a=$scope.loadInboxData(1);
expect($scope.inboxData).toEqual(a);
});
});
});