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);

看起来和我一样，但测试失败了

---

那么，如何以正确的方式进行呢？

显然，

svgX

和

svgXHtml

都是对象，而

.toBe（）

方法是参考

==

比较的。所以，目前您正在尝试比较对象的不同实例。在本例中，Jasmine具有名为

.toEqual（）

的超级方法，该方法将比较两个对象的结构

如果

.toEqual（）

告诉您深度比较未找到匹配项，您可以尝试对该对象进行字符串化以进行即时比较：

expect（JSON.stringify（svgX））.toEqual（JSON.stringify（svgXHtml））

这将有助于比较您拥有的完全不同的对象-
svg
实例和
d3
实例


<>至少现在可以自由使用<代码> tobe（）/代码>：d
请考虑阅读。甚至对于那个（
“toBe”匹配器与===”
）都有解释不，它不起作用。在更改为
toEqual
后，我得到了同样的错误：
预期[[HTMLNode，parentNode:HTMLNode]]等于[[HTMLNode，parentNode:HTMLNode].
您将比较两个不同的对象实例，它们拥有不同的
prototype
，并且
ownProperty
。这就是为什么任何比较都不适用于该对象的原因。好吧，那么如何避免这个问题呢？在
svgX
或
svgX[0]上，使用
JSON.stringify（）
比较对象的上下文，而不是实例
我可以问一下为什么要使用
d3。选择
来选择已经存在的元素吗？因为我试图使
console.log（）
在这两种情况下看起来都一样，希望它能让我走得更远。如果我不这样做，我将得到
[[HTMLNode，parentNode:HTMLNode]]
，另一个就像
HTMLNode
一样。所以，我不需要它做任何其他事情。我的目标是从
time
构建html，使其与svgX相等。您是否可以尝试使用
d3来维护对
svgX的选择。也选择`？类似于
d3.select（'body'）.html（''）.append（'text'）
但是选择你实际添加的元素。我不能直接在代码中这样做，因为它会破坏应用程序。我可以尝试将svgX包装在测试中的
d3.select（）
中，这就是你的意思吗？它没有帮助。现在我看到一个日志为
[[…]]
（svgX），另一个日志如上所述。
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>]]