0

我正在尝试为用于插入 Leaflet.js 映射的指令编写单元测试。

这个标签

<div ng-controller="WorldMapCtrl">
    <sap id="map"></sap>
</div>

与此控制器一起使用

function WorldMapCtrl($scope) {}

以及以下指令

angular.module('MyApp').
    directive('sap', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [40, -86],
                zoom: 2
            });
            //create a CloudMade tile layer and add it to the map
         L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 4, minZoom: 2
            }).addTo(map);
        }
    };
});

这会正确地将地图插入到页面中。当我运行以下单元测试时，它崩溃了

TypeError：无法读取 null 的属性“_leaflet”

describe('directives', function() {
    beforeEach(module('MyApp'));

    // Testing Leaflet map directive
    describe('Testing Leaflet map directive', function() {
        it('should create the leaflet dir for proper injection into the page', function() {
            inject(function($compile, $rootScope) {
                var element = $compile('<sap id="map"></sap>')($rootScope);
                expect(element.className).toBe('leaflet-container leaflet-fade-anim');
            })
        });
    });
});

从我可以从一些谷歌搜索中得知，该错误似乎相当普遍。也许没有正确放置标签（使用 id="map"）或类似的东西可能会导致问题。但是，我没有看到我可以通过该指令的测试来改变什么。有什么想法我在这里做错了吗？

我还在 testacular.conf.js 中包含了必要的 JS 文件，其顺序与它们包含在 index.html 中的顺序相同。所以，这不是文件不存在的问题（至少我假设）。

谷歌搜索的一个结果（遗憾的是，它没有帮助）：https ://groups.google.com/forum/#!msg/leaflet-js/2QH7aw8uUZQ/cWD3sxu8nXsJ

4

0 回答 0