Angular Directive Karma Jasmine使用依赖注入进行测试

Question

如何测试注入常量的指令？ 这是我的下面的代码。我也得 scope.element.node（）。getBoundingClientRect（）为0 0 0 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();

});
});

结果

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