单元测试AngularJS指令，postLink D3不改变DOM

我正在尝试使用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');
    }
  };
});

angular.module（'app'，[]）；
角度。模块（'app'）。指令（'d3Test'，函数（）{
返回{
模板：“”，
限制：'E'，
范围：{
someAttr:“@”，
},
链接：函数postLink（范围、元素、属性）{
d3.选择（'#map'）。追加（'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>');
   });

});

描述（'directive test'，函数（）{
var元素、范围；
在每个（模块（“应用”）之前；
beforeach（注入（函数（$rootScope，$compile）{
scope=$rootScope.$new（）；
元素=“”；
元素=$compile（元素）（范围）；
作用域：$apply（）；
}));
它（'应该有一个SVG子元素'，函数（）{
expect（element.html（））.toEqual（“”）；
});
});

我收到的错误是：

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>'.

PhantomJS 1.9.8（Mac OS X）指令测试应该有一个SVG子元素失败 预期“”等于“”。 我对如何测试D3将进行的DOM更改的期望是否错误？

---

如何最好地测试这个问题？

问题很简单。

d3.select

方法正在

窗口中搜索元素。document

。 在您的测试用例中，您的元素位于分离的dom元素中，而不是

窗口的一部分

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

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

注意：此代码适用于angular+jQuery。如果在项目中不使用jQuery，则可能需要调整选择器，因为这样只能按标记名进行查找。
嘿，对我来说行元素=$compile（元素）（范围）；看起来很奇怪。这是故意的吗？看起来您希望将scope作为parameter.nm传递，显然是这样写的。但在AnuglarJS页面上，他们使用scope.$digest（）；而不是应用$当我回忆起来的时候，《文摘》触发了一个全新的循环correctly@Codebryo，$digest和$apply似乎没有什么区别。如果我在链接函数中添加范围值，Jasmine可以看到它们，因此代码正在执行，只有D3部分似乎没有做任何事情。哇，这救了我的命。我几乎完全放弃了测试d3代码。当一件如此简单的事情能引起如此多的心痛时，它会感到悲伤。但我想这就是我选择这个领域的原因。