title: Unit testing AngularJS directive, postLink D3 not changing DOM
body: <p>I'm trying to unit test an AngularJS directive using Jasmine. The directive is meant to add SVG elements to the template in the postLink phase using D3js. This works fine in the actual application.</p>
  
  <p>In the unit test it appears that the D3 code is never executed.</p>
  
  <p>This is a simplified version of the code that still reproduces the error:</p>
  
  <pre><code>angular.module('app', []);
  
  angular.module('app').directive('d3Test', function () {
    return {
      template: '&lt;div id="map"&gt;&lt;/div&gt;',
      restrict:'E',
      scope: {
        someAttr: '@',
      },
      link: function postLink(scope, element, attrs) {
  
        d3.select('#map').append('svg');
      }
    };
  });
  </code></pre>
  
  <p>This is the unit test:</p>
  
  <pre><code>describe('directive test', function () {
  
    var element, scope;
  
    beforeEach(module('app'));
  
    beforeEach(inject(function ($rootScope, $compile) {
      scope = $rootScope.$new();
      element = '&lt;d3-test&gt;&lt;/d3-test&gt;';
      element = $compile(element)(scope);
      scope.$apply();
    }));
  
    it('should have an SVG child element', function () {
       expect(element.html()).toEqual('&lt;div id="map"&gt;&lt;svg&gt;&lt;/svg&gt;&lt;/div&gt;');
     });
  
  });
  </code></pre>
  
  <p>The error I receive is:</p>
  
  <pre><code>PhantomJS 1.9.8 (Mac OS X) directive test should have an SVG child element FAILED
      Expected '&lt;div id="map"&gt;&lt;/div&gt;' to equal '&lt;div id="map"&gt;&lt;svg&gt;&lt;/svg&gt;&lt;/div&gt;'.
  </code></pre>
  
  <p>Is my expectation wrong on how I can test for the DOM changes D3 will make?
  How can I best test this?</p>