Question

我已编写了这么多年的编码，但是我第一次用Jasmine编写angularJS应用程序的测试用例...我经历了很多Jasmine教程，但其中大多数都包含简单应用程序，如计算器或进行类似的计算。我尝试了一些调整，它运行良好。

但我发现很难在一些复杂的情况下实现它，如下面的那些。

举个例子。角度代码下面会生成一个带有标记的地图

//Data
var cities = [
    {
        city : 'Toronto',
        desc : 'This is the best city in the world!',
        lat : 43.7000,
        long : -79.4000
    },
    {
        city : 'New York',
        desc : 'This city is aiiiiite!',
        lat : 40.6700,
        long : -73.9400
    },
    {
        city : 'Chicago',
        desc : 'This is the second best city in the world!',
        lat : 41.8819,
        long : -87.6278
    },
    {
        city : 'Los Angeles',
        desc : 'This city is live!',
        lat : 34.0500,
        long : -118.2500
    },
    {
        city : 'Las Vegas',
        desc : 'Sin City...\'nuff said!',
        lat : 36.0800,
        long : -115.1522
    }
];

//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (info){

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            title: info.city
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });

        $scope.markers.push(marker);

    }  

    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker){
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }

});

所以当我开始编写测试用例时，它没有用户输入

describe('generate the map', function() {
  it('generate the map with the markers', function() {
    // how does test start?
  });
});

第二个控制器是数据所在的位置，我从php文件中获取值，并在用户点击时打开模态。

 angular.module('mapsApp', [])
    .controller('userInputs', function ($scope,$modal,$location,$http) {

 $scope.fblock= [];
     $http.get('grab_from_1.php').success(function(a){
         $scope.fblock= a;
            }).error(function(data){
                $scope.fblock= a;
            });

  $scope.fblock2= [];
     $http.get('grab_from_2.php').success(function(b){
         $scope.fblock2= b;
            }).error(function(b){
                $scope.fblock2 = b;
            });



    $scope.open = function (_vals) {

        var modalInstance = $modal.open({
            controller: "popin",
            templateUrl: 'get_template.php',
            resolve: {
                values: function()
                {
                    return _vals;
                },
                dates: function()
                {
                    return $scope.fblock2.filter(function (vals2) {
                        return vals2.id == _vals.id;
                    })

                }
            }
        });
    };


 }]);




    angular.module('mapsApp', []).controller('popin', function ($scope,modalInstance,$location,$http,vals1,vals2) {


      $scope.onclicking = function (cid) {
           $modalInstance.dismiss('cancel');
             $location.path('/information/'+cid);

        };

$scope.vals1= vals1;
$scope.vals2= vals2;


});

因此单元测试将类似于

describe('grab users from fblock 1nd fblock 2 and show a popup', function() {
  it('grab users from fblock 1', function() {

  });

 it('grab users from fblock 2', function() {

  });

it('open the popup modal', function() {

  });

}）;

它不是我没有尝试过，我发现有点难以应用基础知识，我知道对于我上面写的测试控制器有点复杂的情况。

如果有人可以帮助或指导我使用Jasmine编写正确的测试用例，我将非常感激

使用Jasmine为AngularJS控制器编写单元测试，使用Google地图，模态

0 个答案: