angularjs - Angular.js ディレクティブで Testacular 単体テストを実行する際に含まれる JavaScript に関する問題

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" を使用する) か、同様のことが問題を引き起こす可能性があります。ただし、このディレクティブのテストで何が変更できるかわかりません。ここで私が間違っていることはありますか？

また、index.html に含まれているのと同じ順序で、必要な JS ファイルを testacular.conf.js に含めました。したがって、ファイルが存在しないという問題ではありません (少なくとも想定しています)。

グーグルからの1つの結果（悲しいことに、それは役に立ちません）：https://groups.google.com/forum/#!msg/leaflet-js/2QH7aw8uUZQ/cWD3sxu8nXsJ