javascript - 比较断言中的函数输出类型

Question

我正在努力使用 chai、mocha 和 JS-DOM 编写测试断言。我有一个简单的功能，例如:

function HtmlElement(el) {
  this.element = (el instanceof HTMLElement) ? el :document.createElement(el);
}

在我的测试中:

it('should have addClass method', function () {
  const ul = (new HtmlElement('ul'));
  ul.element.should.be.equals('<ul></ul>'); // Outputs the actual UL 
});

但是错误:

AssertionError: expected <ul></ul> to equal '<ul></ul>'

是我无法理解的 - 返回什么类型的输出以及这里应该使用什么断言？

Answer 1

以下是 deceze 在 his comment 中的含义.在测试中:

ul.element.should.be.equals('<ul></ul>');

ul.element是一个 JavaScript 对象。更准确地说，它是一个 DOM 节点。然而，<ul></ul>是一个字符串。 Chai 与 === 进行了比较.如果您使用 === 将 DOM 节点与某物进行比较，唯一会返回真值的是完全相同的 DOM 节点。 “完全相同”意味着完全相同的 JavaScript 对象。如果你这样做:

const node = document.createElement("ul");
console.log(node === node);

你得到 true在控制台上。如果你这样做:

console.log(document.createElement("ul") === document.createElement("ul"));

你得到 false因为两个操作数是两个不同的对象。出于您的目的，这两个 DOM 节点可能“相同”，但就 === 而言它们并不相同。被关注到。由于没有字符串可以是与 DOM 节点相同的对象，因此您的测试失败。错误消息可能看起来令人困惑，但那是因为当 JSDOM 打印出错误时，它序列化了 DOM 节点。也就是说，然后 JSDOM 打印出 DOM 节点，它真正打印出它的 .outerHTML 的值。属性(property)，和.outerHTML是节点的序列化。

你想测试什么取决于你的最终目标是什么。如果你想测试元素的结构，你可以检查 .outerHTML ，类似于:

ul.element.should.have.property("outerHTML").equal("<ul></ul>");

你的测试标题是“应该有 addClass 方法”...所以也许你应该测试这个:

ul.element.should.have.property("addClass").be.a("function");

如果你想让它成为测试的代理，你会得到一个 HTMLElement ，我建议改为这样做:

ul.element.should.be.instanceof(HTMLElement);