錯誤，同時運行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); 

     }); 
    }); 


}); 

//------------------------------------------------ 

錯誤：

鉻48.0 .2564（Windows 10 0。 0.0）MainCtrl $ scope.loadInboxData 收件箱的數據被稱爲FAILED

預期

[ 
    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' 
    } ) 
] 

等於未定義。

Answer 1

您在測試中很難依賴$ http。您應該嘲笑$ http服務的返回值。

看看文檔https://docs.angularjs.org/api/ngMock/service/$httpBackend。

Answer 2

這可能會幫助你，$ httpBackend是$ 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); 

     }); 
    }); 


}); 

模擬