Angular Directive Karma Jasmine Testing with dependency injection

Question

How can i test a directive that has a constant injected into them? Here is my Below Code. Im also Getting scope.element.node().getBoundingClientRect() to be 0 0 0 0. Please help.

Directive

(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"); } }); } } } }; } })(); 

Test Case

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(); }); }); 

Results

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