Angularjs 在角度服务内测试d3

我的指令中有d3可视化。问题是有很多样板代码可以在许多其他可视化中重用，比如将元素[0]设置为d3可视化的容器。所以我决定创建一个服务来完成指令中所做的所有工作，并努力保持干燥。 我目前正忙于测试，而这正是我希望得到一些帮助的地方。我的代码如下

指示

angular.module('app')
  .directive('barchart', function (Barchartservice) {
    return {
      restrict: 'E',
      link: function postLink(scope, element, attrs) {

        scope.$on('drawCharts',function(ev,attrs){
          draw();
        });

        function draw(){
          if(!scope.dataset) return;

          var svg = Barchartservice.setContainer(svg, element);
          .
          .
          .
          .

        }
      }
    };
  });

服务

angular.module('app')
  .service('Barchartservice', function Barchartservice() {
    var margin = {top: 50, right: 20, bottom: 50, left: 40},
              container,
              width = (1120 || container.width() - 20) - margin.left - margin.right,
              height = 400 - margin.top - margin.bottom;
    return{
        setContainer: function(svg, element){
            container  = angular.element(element);
            svg = d3.select(element[0]).append('svg')
                    .attr('width', width + margin.left + margin.right)
                    .attr('height', height + margin.top + margin.bottom)
                    .append('g')
                    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
        return svg;
        }
    }
  });

试验

非常感谢您的帮助。

---

谢谢

您需要编译元素。在测试AngularJS时，您必须控制编译并将指令链接到dom树。完成此操作后，还需要调用scope.$apply（）

因此，首先需要在beforeach DI块中注入$compile服务和$rootScope服务

在beforeach中也设置scope=$rootScope，以便为测试引用干净的范围

var element = $compile('<barchart></barchart>')(scope);
scope.$apply();
expect(Barchartservice.setContainer()).toEqual('<barchart><svg></svg></barchart>');

var元素=$compile（“”）（范围）；
作用域：$apply（）；
expect（Barchartservice.setContainer（））.toEqual（“”）；

这会让你更进一步，但它可能不会完全通过测试。从您的来源来看，您似乎还需要广播drawCharts事件来实际运行setContainer函数。所以这也可能是一个问题

PhantomJS 1.9.2 (Mac OS X) Service: Barchartservice should do something FAILED
    TypeError: 'undefined' is not an object (evaluating 'element[0]')

var element = $compile('<barchart></barchart>')(scope);
scope.$apply();
expect(Barchartservice.setContainer()).toEqual('<barchart><svg></svg></barchart>');