Question

我正在尝试为我用来插入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

在Angular.js指令上运行Testacular单元测试时包含JavaScript的问题

0 个答案: