单元测试 AngularJS 指令，postLink D3 未更改 DOM

Question

我正在尝试使用 Jasmine 对 AngularJS 指令进行单元测试。该指令旨在使用 D3js 在 postLink 阶段将 SVG 元素添加到模板。这在实际应用中效果很好。

在单元测试中，似乎从未执行过 D3 代码。

这是仍然重现错误的代码的简化版本：

angular.module('app', []);

angular.module('app').directive('d3Test', function () {
  return {
    template: '<div id="map"></div>',
    restrict:'E',
    scope: {
      someAttr: '@',
    },
    link: function postLink(scope, element, attrs) {

      d3.select('#map').append('svg');
    }
  };
});

这是单元测试：

describe('directive test', function () {

  var element, scope;

  beforeEach(module('app'));

  beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope.$new();
    element = '<d3-test></d3-test>';
    element = $compile(element)(scope);
    scope.$apply();
  }));

  it('should have an SVG child element', function () {
     expect(element.html()).toEqual('<div id="map"><svg></svg></div>');
   });

});

我收到的错误是：

PhantomJS 1.9.8 (Mac OS X) directive test should have an SVG child element FAILED
    Expected '<div id="map"></div>' to equal '<div id="map"><svg></svg></div>'.

我对如何测试 D3 将进行的 DOM 更改的预期是否错误？我怎样才能最好地测试它？

Answer 1

问题很简单。 d3.select 方法正在搜索 window.document 中的元素。在您的测试用例中，您的元素位于 分离的 dom 元素 中，而不是 window.document.

的一部分

要解决此问题，您可以直接通过指令的元素获取节点，而不是使用全局选择器。

d3.select(element.find('div#map')[0]).append('svg');

注意：此代码适用于 angular+jQuery。如果您不在项目中使用 jQuery，您可能需要调整选择器，因为这样您就只能通过标签名称进行查找。 https://docs.angularjs.org/api/ng/function/angular.element

单元测试 AngularJS 指令，postLink D3 未更改 DOM

Unit testing AngularJS directive, postLink D3 not changing DOM

unit-testing

d3.js

angularjs