在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);

        }); 
    });


});

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

錯誤：

Chrome 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);

        }); 
    });


});