title: Testing d3 inside of an angular service
body: <p>I have d3 visualization inside of my directive. The problem with that is that there is a lot of boilerplate code that can be reused across many other visualizations, like setting the element[0] to the container of the d3 visualization. So I decided to create a service to do all the work that was being done in the directive and try to keep myself DRY.
  I'm stuck with testing at the moment and this is where I was hoping to get some help. My code is as follows</p>
  
  <p>Directive</p>
  
  <pre>
  <code>
  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);
            .
            .
            .
            .
  
          }
        }
      };
    });
  
  </code>
  </pre>
  
  <p>Service</p>
  
  <pre>
  <code>
  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;
          }
      }
    });
  </code>
  </pre>
  
  <p>Test</p>
  
  <pre>
  <code>
  'use strict';
  
  describe('Service: Barchartservice', function () {
  
    // load the service's module
    beforeEach(module('clientApp'));
  
    // instantiate service
    var Barchartservice;
    beforeEach(inject(function (_Barchartservice_) {
      Barchartservice = _Barchartservice_;
    }));
  
    it('should insert an svg element into the barchart directive', function () {
      var svg = undefined;
      var element = [];
      element[0] = '&lt;barchart>&lt;/barchart>';
      expect(Barchartservice.setContainer()).toEqual('&lt;barchart>&lt;svg>&lt;/svg>&lt;/barchart>');
    });
  
  });
  </code>
  </pre>
  
  <p>Error</p>
  
  <pre>
  <code>
  PhantomJS 1.9.2 (Mac OS X) Service: Barchartservice should do something FAILED
      TypeError: 'undefined' is not an object (evaluating 'element[0]')
  </code>
  </pre>
  
  <p>Any help is much appreciated.
  Thanks!</p>