我正在尝试使用 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 更改的期望是否错误? 我怎样才能最好地测试这个?
最佳答案
问题很简单。
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 - 单元测试 AngularJS 指令,postLink D3 不更改 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28417206/