javascript - Angular-D3.js，Jasmine测试生成HTML

我有一个d3.js代码:

var svgX = svg.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "end")
        .attr("x", graphConfig.width)
        .attr("y", graphConfig.height - 6)
        .style("font-size","16px")
        .text(keyDim);

我想通过以下方式用Jasmine测试生成的html:

var svgXHtml = d3.select(angular.element('<text class="x label" text-anchor="end" x="500" y="294" style="font-size: 16px;">time</text>')[0]);
expect(svgX).toBe(svgXHtml);

尽管<text>...</text>和svgX的svgXHtml部分相同，但测试失败。在控制台中，我看到:Expected [ [ HTMLNode, parentNode: HTMLNode ] ] to be [ [ HTMLNode, parentNode: HTMLNode ] ]
只需记录svgX和svgXHtml即可:

LOG: [[<text class="x label" text-anchor="end" x="500" y="294" style="font-size: 16px;">time</text>]]
LOG: [[<text class="x label" text-anchor="end" x="500" y="294" style="font-size: 16px;">time</text>]]

对我来说看起来一样，但是测试失败。

那么，如何以正确的方式来做呢？

最佳答案

显然，svgX和svgXHtml中的每一个都是对象，.toBe()方法是对===比较的引用。因此，当前您正在尝试比较Object的单独实例。在这种情况下，Jasmine具有称为.toEqual()的 super 方法，该方法将比较两个Object的结构。

如果.toEqual()告诉您深度比较未找到匹配项，则可以尝试对该对象进行字符串化以进行直观比较:
expect(JSON.stringify(svgX)).toEqual(JSON.stringify(svgXHtml));
这将有助于比较您所拥有的完全不同的对象-svg实例和d3实例。



至少现在您可以自由使用.toBe():D