無法訪問茉莉花測試中的leafletData對象

Question

我們正在使用帶有小葉的angularjs來顯示地圖。除此之外，我們使用茉莉花（1.3.1.5）+ maven進行測試。在寫入的規格中，我們無法訪問leafletData對象。控制器是這樣的：

angular.module('TestProject').controller('TestCtrl', ['$scope', 'leafletData',  
     function TestCtrl($scope, leafletData){ 
     'use strict'; 
      $scope.map; 
      leafletData.getMap().then(function(map) { 
       var southWest = L.latLng(-90, -180), 
       northEast = L.latLng(90, 180), 
       bounds = L.latLngBounds(southWest, northEast); 
       mapObj.setMaxBounds(bounds); 
       mapObj.options.maxZoom = 19; 
       mapObj.options.minZoom = 1; 
       $scope.map=map; 
       $scope.featureGroup = L.featureGroup().addTo($scope.map); 
     }); 
    }]); 

爲控制器的規格是：

describe("test controller",function() { 
     var scope,leafletData, compile; 

     beforeEach(module("TestProject")); 

     beforeEach(inject(function($controller, $rootScope, $compile, leafletData) { 
      scope = $rootScope.$new(); 
      compile = $compile; 

      $controller('TestCtrl', { 
       '$scope' : scope, 
       'leafletData' : leafletData 
      }); 
     })); 

     it("test function", function() { 
      var element = angular.element('<leaflet></leaflet>'); 
      element = compile(element)(scope); 
      expect(leafletData).toBeDefined(); 
      leafletData.getMap().then(function(map) { 
       scope.map = map; 
      }); 
      $rootScope.$digest(); 
      expect(scope.map.getZoom()).toEqual(1); 
      expect(scope.map.getCenter().lat).toEqual(0); 
      expect(scope.map.getCenter().lng).toEqual(0); 
     }); 

    }); 

而且我們得到的錯誤是：

1）測試控制器也測試功能< < <失敗！ *預計未定義將被定義。 （第22行）

我們已經在angular-leaflet-directive中特別導入了所有的js文件，但是在undefined中，它似乎沒有工作。我們也有這種感覺，這可能是角度模塊名稱差異的問題，我們嘗試使用beforeEach（module（「TestProject」，「leaflet-directive」））;但這也沒有解決我們的問題。

請幫助我們！

Answer 1

leafletData未定義，因爲它是在測試的頂部聲明的，但從未有賦值給它。這是把注射進你的測試時要遵循的一般模式：

describe("test controller",function() { 
    var leafletData; 

    beforeEach(module("TestProject")); 

    beforeEach(inject(function(_leafletData_) { 
     // without this, leafletData will be undefined 
     leafletData = _leafletData_; 
    })); 

    it("should be defined", function() { 
     expect(leafletData).toBeDefined(); 
    }); 
}); 

而且，這樣做的任何單元測試時，測試代碼應該孤立測試。應該嘲笑它所依賴的任何服務（即在這種情況下爲leafletData）以及來自這些服務的響應。例如：

describe("test controller",function() { 
    var $q; 
    var scope; 
    var leafletData; 

    var mockMapData = { 
     // ... 
     // some mock map data 
     // ... 
    }; 

    beforeEach(module("TestProject")); 

    beforeEach(inject(function(_$controller_, _$rootScope_, _$q_, _leafletData_) { 
     scope = _$rootScope_.$new(); 
     $q = _$q_; 
     leafletData = _leafletData_; 

     // mock the leafletData 
     spyOn(leafletData, 'getMap').andReturn($q.when(mockMapData)); 

     _$controller_('TestCtrl', { 
      '$scope' : scope 
     }); 
    })); 

    it("test function", function() { 
     scope.$digest(); 
     expect(scope.map).toEqual(mockMapData); 
    }); 
});;