Angularjs 依赖注入的角度定向Karma-Jasmine测试

如何测试注入了常量的指令？ 下面是我的代码。我还将scope.element.node（）.getBoundingClientRect（）设置为0。请帮忙

指令

(function () {
    'use strict';

angular.module('ng-visualization')
    .directive('ngMap', ngMap);

ngMap.$inject = ['worldTopo'];

function ngMap(topology) {
    return {
        restrict: 'E',
        scope: {
            config: "=?"
        },
        compile: function (iElement, iAttrs) {
            console.log("Compiling..");
            return {
                pre: function ($scope, iElement, iAttrs) {
                    // console.log("Pre Linking..");
                    var uniqueId = "ng-map-" + Math.round(Math.random() * 1000);
                    iElement.append('<div id=' + uniqueId + '></div>');
                    iElement.append('<div id=tooltip-' + uniqueId + '></div>');
                },
                post: function ($scope, iElement, iAttrs) {
                    // console.log("Post Linking..");
                    $scope.element = d3.select(iElement.children()[0]);
                    $scope.tooltip = d3.select(iElement.children()[1]);
                    $scope.config = {
                        width: $scope.element.node().getBoundingClientRect().width,
                        height: $scope.element.node().getBoundingClientRect().width * 0.66,
                        land: {
                            fill: ($scope.config && $scope.config.land && $scope.config.land.fill) || "#B7B7B7",
                            hoverFill: ($scope.config && $scope.config.land && $scope.config.land.hoverFill) || "#008C95",
                            hoverText: ($scope.config && $scope.config.land && $scope.config.land.hoverText) || function (d) {
                                return d.properties.name;
                            },
                            clickToZoom: ($scope.config && $scope.config.land && $scope.config.land.clickToZoom) || true,
                            zoomTo: function (location, scale) {}
                        }
                    };

                    $scope.svg = $scope.element.append("svg").style({
                        display: "inline-block",
                        position: "relative",
                        width: $scope.config.width || "100%",
                        height: $scope.config.height || "100%",
                        // "padding-bottom": $scope.config.height || "100%",
                        "vertical-align": "middle",
                        overflow: "hidden"
                    });

                    $scope.globalG = $scope.svg.append("g");
                    $scope.mapG = $scope.globalG.append("g").attr("id", "map");

                    $scope.tooltip
                        .style({
                            "display": "inline-block",
                            "border-bottom": "1 px dotted black",
                            "visibility": "hidden",
                            "width": "200px",
                            "background-color": "white",
                            // "border": "19px",
                            "border": "1px solid #777777",
                            // "color": "#fff",
                            "text-align": "center",
                            // "border-radius": "6px",
                            "padding": "5px 5px",
                            "position": "absolute",
                            "z-index": "100"

                        })

                    $scope.projection = d3.geo.mercator()
                        .center([0, 0])
                        .scale($scope.config.width / 2 / Math.PI)
                        .translate([$scope.config.width / 2, $scope.config.height / 1.4])
                        .rotate([-10, 0]);

                    $scope.path = d3.geo.path()
                        .projection($scope.projection);

                    $scope.mapG.selectAll("path")
                        .data(topojson.feature(topology, topology.objects.countries).features)
                        .enter()
                        .append("path")
                        .attr("d", $scope.path)
                        .style("fill", $scope.config.land.fill)
                        .on("mouseover", function () {
                            $scope.tooltip.style("visibility", "visible");
                            d3.select(this).style("fill", $scope.config.land.hoverFill);
                        })
                        .on("mousemove", function (d) {
                            $scope.tooltip.html($scope.config.land.hoverText(d));
                            $scope.tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px");
                        })
                        .on("mouseout", function () {
                            $scope.tooltip.style("visibility", "hidden");
                            d3.select(this).style("fill", $scope.config.land.fill);
                        })
                        .on("click", function (d) {
                            if ($scope.config.land.clickToZoom) {
                                var x, y, k;
                                if (d && $scope.centered !== d) {
                                    var centroid = $scope.path.centroid(d);
                                    x = centroid[0];
                                    y = centroid[1];
                                    k = 3;
                                    $scope.centered = d;
                                } else {
                                    x = $scope.config.width / 2;
                                    y = $scope.config.height / 2;
                                    k = 1;
                                    $scope.centered = null;
                                }
                                $scope.globalG.transition()
                                    .duration(750)
                                    .attr("transform", "translate(" + $scope.config.width / 2 + "," + $scope.config.height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
                                    .style("stroke-width", 1.5 / k + "px");
                            }
                        });

                }
            }
        }
    };
}

})();

describe('ngMap', function () {

var $compile, $scope, topojson;

beforeEach(function () {
    module('ng-visualization');
    module(function ($provide) {
        // console.log($provide.constant)
        $provide.constant('worldTopo', {});
    })
    inject(function (_$compile_, _$rootScope_, _worldTopo_) {
        $compile = _$compile_;
        topojson = _worldTopo_;
        console.log(_worldTopo_);
        $scope = _$rootScope_.$new();
    });
});

it('should Replaces the element with the appropriate content', function () {

    var element = angular.element("<ng-map></ng-map>");
    console.log(element);
    console.log(d3.select(element));
    console.log("B4 Compiling..");
    var directive = $compile(element)($scope);
    console.log("After Compiling..");
    var scope = element.isolateScope();
    console.log(scope.element.node().getBoundingClientRect());
    scope.$apply();

});
});

（函数（）{
"严格使用",；
角度模块（'ng-visualization'）
.指令（“ngMap”，ngMap）；
ngMap.$inject=['worldTopo']；
功能图（拓扑）{
返回{
限制：'E'，
范围：{
配置：“=？”
},
编译：函数（IELENT、iAttrs）{
console.log（“编译…”）；
返回{
前置：功能（$scope、iElement、iAttrs）{
//console.log（“预链接…”）；
var uniqueId=“ng map-”+Math.round（Math.random（）*1000）；
iElement.append（“”）；
iElement.append（“”）；
},
职位：职能（$scope、iElement、iAttrs）{
//console.log（“后链接…”）；
$scope.element=d3.select（iElement.children（）[0]）；
$scope.tooltip=d3.select（iElement.children（）[1]）；
$scope.config={
宽度：$scope.element.node（）.getBoundingClientRect（）.width，
高度：$scope.element.node（）.getBoundingClientRect（）.width*0.66，
土地：{
填充：（$scope.config&&$scope.config.land&&$scope.config.land.fill）| |“#B7B7B7”，
hoverFill:（$scope.config&&$scope.config.land&&$scope.config.land.hoverFill）| |“#008C95”，
hoverText:（$scope.config&&$scope.config.land&&$scope.config.land.hoverText）函数（d）{
返回d.properties.name；
},
clickToZoom:（$scope.config&&$scope.config.land&&$scope.config.land.clickToZoom）true，
zoomTo:函数（位置、比例）{}
}
};
$scope.svg=$scope.element.append（“svg”）.style({
显示：“内联块”，
职位：“相对”，
宽度：$scope.config.width | |“100%”，
高度：$scope.config.height | |“100%”，
//“填充底部”：$scope.config.height | |“100%”，
“垂直对齐”：“中间”，
溢出：“隐藏”
});
$scope.globalG=$scope.svg.append（“g”）；
$scope.mapG=$scope.globalG.append（“g”）.attr（“id”，“map”）；
$scope.tooltip
.风格({
“显示”：“内联块”，
“边框底部”：“1像素点黑色”，
“可见性”：“隐藏”，
“宽度”：“200px”，
“背景色”：“白色”，
//“边界”：“19px”，
“边框”：“1px实心#777777”，
//“颜色”：“fff”，
“文本对齐”：“居中”，
//“边界半径”：“6px”，
“填充”：“5px 5px”，
“位置”：“绝对”，
“z指数”：“100”
})
$scope.projection=d3.geo.mercator（）
.center（[0,0]）
.scale（$scope.config.width/2/Math.PI）
.translate（[$scope.config.width/2，$scope.config.height/1.4]）
.旋转（[-10,0]）；
$scope.path=d3.geo.path（）
.projection（$scope.projection）；
$scope.mapG.selectAll（“路径”）
.data（topojson.feature（拓扑、拓扑、对象、国家/地区）.features）
.输入（）
.append（“路径”）
.attr（“d”，$scope.path）
.style（“fill”，$scope.config.land.fill）
.on（“鼠标悬停”，函数（）{
$scope.tooltip.style（“可见性”、“可见”）；
d3.选择（this.style）（“fill”，$scope.config.land.hoverFill）；
})
.on（“mousemove”，函数（d）{
$scope.tooltip.html（$scope.config.land.hoverText（d））；
$scope.tooltip.style（“top”、（event.pageY-10）+“px”）.style（“left”、（event.pageX+10）+“px”）；
})
.on（“mouseout”，函数（）{
$scope.tooltip.style（“可见性”、“隐藏”）；
d3.选择（this.style）（“fill”，$scope.config.land.fill）；
})
.打开（“单击”，功能（d）{
如果（$scope.config.land.clickToZoom）{
变量x，y，k；
如果（d&&$scope.centered！==d）{
var centroid=$scope.path.centroid（d）；
x=质心[0]；
y=质心[1]；
k=3；
$scope.centered=d；
}否则{
x=$scope.config.width/2；
y=$scope.config.height/2；
k=1；
$scope.centered=null；
}
$scope.globalG.transition（）
.持续时间（750）
ngBar
    √ should Replaces the element with the appropriate content
LOG LOG: Object{}
LOG LOG: Object{0: <ng-map></ng-map>, length: 1}
LOG LOG: [[Object{0: ..., length: ...}]]
LOG LOG: 'B4 Compiling..'
LOG LOG: 'Compiling..'

  ngMap
    × should Replaces the element with the appropriate content
        ReferenceError: **Can't find variable: topojson in src/js/ng-visualization.ng-map.directive.js (line 9)**
        post@src/js/ng-visualization.ng-map.directive.js:9:5855
        src/third_party/angular/angular.js:1346:23
        src/third_party/angular/angular.js:10420:49
        invokeLinkFn@src/third_party/angular/angular.js:10426:15
        nodeLinkFn@src/third_party/angular/angular.js:9815:23
        compositeLinkFn@src/third_party/angular/angular.js:9055:23
        publicLinkFn@src/third_party/angular/angular.js:8920:45
        test/ng-visualization.ng-map.directive.spec.js:25:42


PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (1 FAILED) (0.011 secs / 0.057 secs)
TOTAL: 1 FAILED, 1 SUCCESS