1

试图掌握 QUnit 的窍门，运行时遇到了一些麻烦：当我运行以下测试时：

   test("Trying QUnit", function() {
            expect(1);
            var div = $('<div>')
            div.addClass('field-box');
            same(fieldBox(), div, 'Expected ' + div + ' was: ' + fieldBox());
        });
    });

    function fieldBox() {
        return $('<div class="field-box">');
    }

我收到消息：

Expected [object Object] was: [object Object]
Expected:   
[
  <div class="field-box"></div>
]

这并没有给我任何错误的暗示。如果我更改 fieldBox-method 以返回一个带有“field-boxing”类的 div，我会收到以下更多解释性消息：

 Expected [object Object] was: [object Object]
Expected:   
[
  <div class="field-box"></div>
]
Result: 
[
  <div class="field-boxing"></div>
]
Diff:   
 [
   <div class="field-box"></div>
class="field-boxing"></div>
 ]

这让我相信我的初始测试实际上没有任何问题，因为没有显示 Diff。然而还是失败了，为什么？

4

2 回答 2

0

DOM 对象是通过它们的身份而不是它们的内容来比较的，即使使用的是相同的（现在是 deepEquals，same 已被弃用）。

使用 .html() 您正在比较文本表示，那里有实际内容。

于 2011-08-14T22:29:13.810 回答
0

该测试通过 -

test("Trying QUnit", function() {
    expect(1);
    var div = $('<div>')
    div.addClass('field-box');
    same(fieldBox().html(), div.html(), 'Expected ' + div + ' was: ' + fieldBox());
});

可能是 qunit 正在比较两个 JavaScript 对象，尽管对象中包含的内容相同，但对象并不相同（即它们不指向内存中的同一对象），因此测试失败。

编辑

我使用下面的代码转储了两个对象的对象图 -

for (property in div[0]) {
    output += property + ': ' + div[0][property]+'; ';
}

'var div' div 的 parentNode 属性是 -

parentNode: null;

对于'fieldBox()'函数div，它是-

parentNode: [object DocumentFragment];

我认为这种差异是由于创建对象的方式不同造成的。然后，Qunit 将在迭代每个对象属性并相应地使测试失败时发现这种差异。

于 2011-07-15T09:25:42.017 回答