2016-05-05 8 views
0

私はこの質問を繰り返しています。 ジャスミンを使用したAngularJSとUnitテストケースの新機能です。私は最近、angularJsで遊んで始めました。私は非常に多くの記事を通ってきましたが、私は助けを得ることができませんでした。 以下のコントローラのジャスミンユニットテストケースを書きたいと思います。ここで、 "getSensorDetails" AngularJS:コントローラーの単体テストの書き方

intelApp.controller('healthIndexCtrl', [ '$scope','$http','$filter','deviceService', '$controller','$localStorage','getSensorDetails', function ($scope,$http,$filter,deviceService,$controller,$localStorage,getSensorDetails) { 
 
\t //device variable declaration 
 
\t $scope.device = { 
 
\t \t \t status : 'OFF', 
 
\t \t \t statusColor : 'red', 
 
\t \t \t id : '', 
 
\t \t \t parameterValues : [], 
 
\t \t \t trendChart : { 
 
\t \t \t currentChartData : '' 
 
\t \t \t } 
 
\t \t }; 
 
\t $scope.markers = []; 
 
\t $scope.devices=[]; 
 
\t $scope.sensorData=[]; 
 
\t $scope.isAnamolies=''; 
 
\t $scope.pagination=true; 
 
\t $scope.tab2Show=false; 
 
\t //====================================Map functions================================== 
 
\t 
 
\t var mapOptions = { 
 
\t   zoom: 4, 
 
\t   center: new google.maps.LatLng(21.0000, 78.0000), 
 
\t   mapTypeId: google.maps.MapTypeId.TERRAIN 
 
\t  } 
 
\t  $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
\t var infoWindow = new google.maps.InfoWindow(); 
 
\t 
 
\t var createMarker = function (info) { 
 
\t  
 
\t //set image depends on status 
 
\t var markerIcon=''; 
 
\t if(info.status=='Green'){ 
 
\t \t \t markerIcon='assets/images/green-dot.png'; 
 
\t }else if(info.status=='Yellow') 
 
\t { 
 
\t \t \t markerIcon='assets/images/yellow-dot.png' 
 
\t } 
 
\t else{ 
 
\t \t markerIcon='assets/images/red-dot.png'; 
 
\t } 
 
\t  
 
     var marker = new google.maps.Marker({ 
 
    \t  \t map: $scope.map, 
 
      position: new google.maps.LatLng(info.latitude, info.longitude), 
 
\t \t \t icon:markerIcon, 
 
      title: info.city, 
 
      Name:info.name 
 
     \t }); 
 
     
 
     google.maps.event.addListener(marker, 'mouseover', function() { 
 
      infoWindow.setContent('<h4>Device Information</h4>Device Name : ' + marker.Name +'<br>DeviceType : ' +info.deviceType + '<br>Description : '+info.deviceDesc); 
 
      infoWindow.open($scope.map, marker); 
 
      $scope.information=true; 
 
     }); 
 
\t  
 
\t google.maps.event.addListener(marker, 'click', function() { 
 
\t \t \t $scope.trendchart(info.name); 
 
\t }); 
 
\t  
 
\t  google.maps.event.addListener(marker, 'mouseout', function() { 
 
\t \t \t infoWindow.close(); 
 
\t }); 
 
      
 
     \t \t $scope.markers.push(marker); 
 
     \t \t 
 
    } 
 
\t 
 
\t $scope.openInfoWindow = function (e, selectedMarker) { 
 
     e.preventDefault(); 
 
     google.maps.event.trigger(selectedMarker, 'click'); 
 
    } 
 
\t \t 
 
\t $scope.clearMarkers = function() { 
 
\t  for (var i = 0; i < $scope.markers.length; i++) { 
 
\t   $scope.markers[i].setMap(null); 
 
\t  } 
 
\t  $scope.markers.length = 0; 
 
\t  } 
 
\t $scope.zoomToIncludeMarkers = function() { 
 
\t  var bounds = new google.maps.LatLngBounds(); 
 
\t \t console.log($scope.devices); 
 
\t  $scope.devices.forEach(function(device) { 
 
     \t var latLng = new google.maps.LatLng(device.latitude,device.longitude); 
 
     \t bounds.extend(latLng); 
 
     }); 
 
      
 
      $scope.map.fitBounds(bounds); 
 
    } 
 
\t 
 
\t $("#mapCanvas").on('shown.bs.tab', function() { 
 
\t \t $scope.tab2Show=false; 
 
\t \t google.maps.event.trigger(map, 'resize'); 
 
\t \t $scope.zoomToIncludeMarkers(); 
 
\t \t $scope.$apply(); 
 
\t \t }); 
 
\t 
 
\t  $("#deviceList").on('shown.bs.tab', function() { 
 
\t \t $scope.tab2Show=false; 
 
\t \t $("#mytable tr").removeClass('selected'); 
 
\t \t $scope.$apply(); 
 
\t \t }); 
 
\t 
 
\t //=============================Map ends here====================================== 
 
\t 
 

 
\t /** 
 
\t * $on function gives the filtered devices on healthindex page 
 
\t */ 
 
\t $scope.$on('passListToHealthIndex', function(event , obj){ 
 
\t \t $scope.deviceListShow=true; 
 
\t  $scope.pagination=obj.devices.length>0?false:true; 
 
\t  $scope.tab2Show=false; 
 
\t  $scope.warningShow=false; 
 
\t  $scope.devices = obj.devices; 
 
\t \t console.log($scope.devices); 
 
\t  //Plot marker for maps 
 
\t \t for(i=0;i<$scope.devices.length;i++){ 
 
\t \t \t createMarker($scope.devices[i]); 
 
\t \t \t $scope.zoomToIncludeMarkers(); 
 
\t \t } 
 
\t  
 
\t  //Pagination settings 
 
\t  $scope.viewby = 5; 
 
\t \t $scope.totalItems = $scope.devices.length; 
 
\t \t $scope.currentPage = 1; 
 
\t \t $scope.itemsPerPage = $scope.viewby; 
 
\t \t $scope.maxSize = 2; // Number of pager buttons to show \t \t 
 
\t \t $scope.setPage = function (pageNo) {$scope.currentPage = pageNo; }; 
 
\t \t $scope.pageChanged = function() { 
 
\t \t }; 
 
\t \t $scope.setItemsPerPage = function(num) { 
 
\t \t \t $scope.itemsPerPage = num; 
 
\t \t \t $scope.currentPage = 1; // reset to first paghe 
 
\t \t } 
 
\t }); 
 
\t 
 
\t 
 
\t //===============================Trend Chart ============================== 
 
\t //Function gets the sensor details, displays and visualize trend data in the line chart form 
 
\t $scope.trendchart=function(deviceName){ 
 
\t \t for(var cnt=0;cnt<$scope.devices.id;cnt++){ 
 
\t \t \t try{ 
 
\t \t \t document.getElementById('trendChart'+cnt).innerHTML= '&nbsp;'; 
 
\t \t \t }catch(e){ 
 
\t \t \t } 
 
\t \t } 
 
\t \t \t $("#mytable tr").click(function(){ 
 
\t \t \t \t $(this).addClass('selected').siblings().removeClass('selected');  
 
\t \t \t \t var value=$(this).find('td:first').html();  
 
\t \t \t \t }); 
 

 
\t \t \t $('.ok').on('click', function(e){ 
 
\t \t \t \t  alert($("#table tr.selected td:first").html()); 
 
\t \t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t  
 
\t /** 
 
\t * @HTTP GET to get sensor details 
 
\t * @param deviceName 
 
\t *@returns sensor details 
 
\t */ 
 
\t \t 
 
\t \t getSensorDetails.query({vending_machine_id:deviceName},function(RESPONSE){ 
 
\t \t \t $scope.sensorData=RESPONSE.data; 
 
\t \t \t $scope.device.parameterValues = $scope.sensorData.sensors; 
 
\t \t \t 
 
\t \t \t $scope.tab2Show=$scope.device.parameterValues.length>0?true:false; 
 
\t \t \t \t 
 
\t \t \t var temp=$filter('filter')($scope.devices, {deviceId:deviceName})[0]; 
 
\t \t \t $scope.isAnamolies=temp.status; 
 
\t \t \t 
 
\t \t \t if($scope.isAnamolies=='Yellow'){ 
 
\t \t \t \t $scope.warningShow=true; 
 
\t \t \t }else{ 
 
\t \t \t \t $scope.warningShow=false; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t $scope.$apply(); 
 
\t \t \t //Draw trendchart for each sensors 
 
\t \t \t for(var i=0;i<$scope.sensorData.sensors.length;i++){ 
 
\t \t \t \t drawTrendChart($scope.sensorData.sensors[i],"#trendChart"+i,$scope,"Time",$scope.sensorData.sensors[i].details.sensorName); 
 
\t \t \t \t jQuery("#trendChart"+i).tooltip(); 
 
\t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t \t 
 
\t \t }); 
 
\t 
 
\t } 
 
\t //Function to search device based on given searchString from devicelist 
 
\t $scope.searchForDevice = function(arr, searchString){ 
 
\t \t if(!searchString){ 
 
\t \t \t return arr; 
 
\t \t } \t 
 
\t \t var result = []; 
 
\t \t searchString = searchString.toLowerCase(); 
 
\t \t angular.forEach(arr, function(item){ 
 
\t \t \t if(item.name.toLowerCase().indexOf(searchString) != -1){ 
 
\t \t \t \t result.push(item); 
 
\t \t \t } \t 
 
\t \t }); 
 
\t \t return result; 
 
\t } 
 
\t \t //watches model "deviceSearchString" to get new values 
 
\t $scope.$watch('deviceSearchString', function (newVal, oldVal) { 
 
\t \t $scope.filteredDevices = $scope.searchForDevice($scope.devices, newVal); 
 
\t \t $scope.totalItems = $scope.filteredDevices.length; 
 
\t \t $scope.noOfPages = Math.ceil($scope.totalItems/$scope.itemsPerPage); 
 
\t \t $scope.currentPage = 1; 
 
\t \t }, true); 
 
\t \t 
 
\t //navigate to login page when you click on logout option in navigation 
 
\t $scope.logout = function(){ 
 
\t \t window.location = "index.html" 
 
\t \t } \t \t \t \t \t 
 
    
 
\t 
 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

は、RESTサービスの$ resouceを使用して工場出荷時のサービスです。

intelApp.factory('getSensorDetails',function($resource){ 
 
\t return $resource('http://retail-test-intelapiapp.demo-gotapaas.com/intel/sensorvalues',{},{ 
 
\t // \t return $resource('https://10.47.32.62:8244/deviceParameters/v1.0/sensorvalues',{},{ 
 
\t query: { 
 
     method: 'GET', 
 
     transformResponse: function(data, headers){ 
 
      response = {}; 
 
\t \t \t /*var temp=data.trim(); 
 
\t \t \t temp=temp.substring(1,data.length-2); 
 
\t \t \t temp= temp.replace(/\\/g, "");*/ 
 
      response.data = JSON.parse(data); 
 
      response.headers = headers(); 
 
      return response; 
 
     } 
 
\t }}); 
 
});

Iは、直線関数のユニットテストケースを作成する方法を知っているが、このコントローラはそれ以上を示します。 コントローラー用のユニットテストケースの作成方法を誰にでも見せてもらえるといいですね。 Adavance よろしく、

答えて

0

おかげでhttp://jasmine.github.io/edge/introduction.html http://ricostacruz.com/cheatsheets/jasmine.html このリンクは、あなたがよりよく理解するのに役立つかもしれない、これらを見てみてください。

説明が難しいので、試してみましょう。そして、この関数内で、あなたのコントローラと

beforeEach(module('app.module.modulename')); // this is the module name of your controller. 
、などの依存ファイルをロードする必要があり

describe('healthIndexCtrl', function() { 
}); 

テストでは、あなたのような、カバーしようとしているかを説明して記述して開始する必要があります

コントローラが起動します。

次に、あなたが

var scope, http, filter, deviceService, controller, localStorage, getSensorDetails; 
beforeEach(inject(function ($rootScope, $http, $filter, deviceService, $controller, $localStorage, getSensorDetails) { 
    scope = $rootScope.$new(); 
    http = $http; 
    deviceService = deviceService; 
    controller = $controller; 
    localStorage = $localStorage; 
    getSensorDetails = getSensorDetails; 
})); 

下記の注意などの試験を実施し、コントローラで使用される依存関係を注入する必要があります:あなたは、あなたがコントローラで使用されるすべてのスペックファイルにしないように行っているだけで依存関係を注入持っています。

あなたがヒットしてバックエンドである場合、またはファクトリレスポンスを模擬する必要がある場合は、spyOn()を使用してヒットを偽装し、以下のような擬似的な応答を与えることができます。

spyOn(getSensorDetails、 'query')。andreturnValue( 'あなたが望む応答を模擬します。オブジェクトや配列のデータ型でも可能です。

その後、最終的に、あなたは(それにあなたの期待()を書くことができます)、

it('some message', function() { 
    scope.$digest(); 
    expect(scope.map).toBe('some mock'); 
}); 

のように、私たちは、スコープを使用している$(ダイジェスト)。コントローラーの$スコープが仕様のモックで更新されるようにします。これが役立つ

だから、最終的には、すべて一緒に入れて、あなたのスペックは次のようになり、

describe('healthIndexCtrl', function() { 
    beforeEach(module('app.module.modulename')); 

    var scope, http, filter, deviceService, controller, localStorage, getSensorDetails; 
    beforeEach(inject(function ($rootScope, $http, $filter, deviceService, $controller, $localStorage, getSensorDetails) { 
     scope = $rootScope.$new(); 
     http = $http; 
     deviceService = deviceService; 
     controller = $controller; 
     localStorage = $localStorage; 
     getSensorDetails = getSensorDetails; 
    })); 

    it('some message', function() { 
     scope.$digest(); 
     expect(scope.map).toBe('some mock'); 
    }); 

}); 

ホープ。

関連する問題