javascript - AngularJS Jasmine 测试谷歌地图 : offsetWidth is null

Question

我只使用 Jasmine 和 Karma(测试运行器)在 AngularJS 中进行了少量测试但我现在被困住了。我在局部 View 上集成了谷歌地图，我很想在相应的 Controller 中测试我为它编写的功能(点击发生时放置一个标记，改变 map 上圆的半径，......)

所有功能都可用，但测试它似乎要困难得多。这是我用来验证服务是否已定义的简单测试:

  it('should contain a locationDbService',
    function () {
        expect(locationDbService).toBeDefined();
    });

我在每次测试前都执行了以下代码:

var ctrl, scope, locationDbService;
// inject the $controller and $rootScope services
// in the beforeEach block
beforeEach(inject(function ($controller, $rootScope, _LocationDbService_) {
    // Create a new scope that's a child of the $rootScope
    scope = $rootScope.$new();
    // Create the controller
    ctrl = $controller('AddLocationCtrl', {
        $scope: scope,
        LocationDbService: _LocationDbService_
    });
    locationDbService = _LocationDbService_;
}));

Controller header 如下:

.controller('AddLocationCtrl', function ($scope, LocationDbService) {

在 Controller 中初始化函数:

    var map;

    $scope.initialize = function () {
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(51.142036, 4.440966)
        };

        map = new google.maps.Map(document.getElementById('map-canvas-add-location'), mapOptions);

    };

    google.maps.event.addDomListener(window, "load", $scope.initialize());

查看:

            <div class="item item-body">
                <div id="map-canvas-add-location"></div>
            </div>

我一开始遇到的问题是:

我通过将 google maps js 文件添加到 Karma conf 文件数组来“修复”它，这是正确的解决方案吗？

当我添加 js 文件并再次运行测试时，出现以下错误:

我已经在网上搜索解决方案好几个小时了，但找不到任何可行的解决方案。我究竟做错了什么？

提前致谢!

Answer 1

对于您的第一个错误屏幕，您是正确的，这是由于 jasmine 测试运行器未包含对 google maps js 文件的引用。

对于第二个错误，您没有带有 map-canvas-add-location 的 div 元素。您的 View 确实包含 div 元素，但它没有被加载到您的 jasmine 测试套件中。这是正确的行为，单元测试不应依赖于特定的 dom 结构，因为这会使它们更加脆弱。

我知道有两种方法可以处理第二个错误:

1. 利用服务包装对谷歌地图的特定调用依赖项。这就是我当前的 Angular map 项目的工作方式。
2. 将所有映射级别测试转换为 E2E 测试而不是单元测试。

我推荐第 1 种方法，因为仅进行端到端测试并不是一个可以掉以轻心的步骤。 E2E 测试通常更脆弱且更难维护。

这是一个包装服务的示例:

.factory('GoogleMap', function(){
    return {
        createMap: function(element, options){
            return new google.maps.Map(element, options);
        },
        mapOptions: {
            animation: google.maps.MapTypeId.DROP,
            maxZoom: 15,
            mapTypeControlOptions: {
                position: google.maps.ControlPosition.LEFT_BOTTOM,
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        },
        markerOptions:{
            animation: google.maps.Animation.DROP,
            clickable: true
        },
        position: function(location){
            return new google.maps.LatLng(location.latitude, location.longitude);
        },
        geocode: function(search, successFun){
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode(search, successFun);
        },
        bounds: function(){
            return new google.maps.LatLngBounds();
        }
    };
});

并在代码中使用:

var mapOptions = angular.extend({
        zoom: 15,
        center: GoogleMap.position({latitude: 51.142036, longitude: 4.440966})
    }, GoogleMap.mapOptions);
map = GoogleMap.createMap(document.getElementById('map-canvas-add-location'), mapOptions);

然后在您的测试中，您需要创建一个模拟的 GoogleMap 服务并设置监视该模拟服务以断言您的 map 已正确生成。

这是一个示例模拟 GoogleMap 服务:

.factory('mockGoogleMap', function(){
    var mapResult = {
        formatted_address: 'mock formatted address',
        geometry: {
            location: {
                lat: function(){
                    return 1;
                },
                lng: function(){
                    return 2;
                }
            }
        }
    };
    return {
        createMap: function(element, options){
            return {
                //add functions called by your controller on the map here
            };
        },
        mapOptions: {},
        markerOptions: {},
        position: function(location){
            return {latitude: location.latitude, longitude: location.longitude};
        },
        geocode: function(params, success){
            success([mapResult], null);
        },
        geocodeResult: mapResult,
        bounds: function(){
            return {
                extend: function(position){},
                getCenter: function(){ return {}; }
            };
        },
    };
});