4

一段时间以来，我一直想将单元测试集成到我的 javascript 开发中，因为我已经习惯使用 firebug 进行调试和测试，所以 fireunit 自然是进行 JS 单元测试的明显选择。

我了解如何使用 fireunit，但我仍然对如何实际有效地使用它感到困惑。我主要担心的是无法测试任何实际操作 DOM 的函数，这让我们面对它，几乎是所有这些函数。

例如，我可能有一个看起来像这样的函数。

function() {
    var el = document.getElementById('el');
    if(el) {
        el.parentNode.removeChild(el); //Removes the child from the DOM
    }
}

这是一个基本示例，但使用该函数需要与 DOM 交互。当包含该元素的 HTML 未加载时，我如何对此进行单元测试！？！

我对 jsTestDriver 不太熟悉，但据我了解，您可以使用注释将 HTML 附加到单元测试中（或者这就是代码的样子）。有没有办法用fireunit测试做这样的事情？或者我应该只是将我的 test.html 与来自各地的代码片段混为一谈，并希望它们不会发生冲突。最好定义一小段在函数开始时加载的 HTML，然后在测试函数完成时将其自身移除并移至下一个函数。

我有一些想法，例如使用 innerHTML 将片段加载和卸载到测试 DIV 中，但我所有的方法似乎都不干净，并且需要为每个测试函数编写大量样板文件。我想听听一些可能已经提出更有效解决方案的人的意见。

4

1 回答 1

0

在实际执行测试之前，您可以执行以下操作：

var old = document.getElementById;
document.getElementById = function(foo) {
    console.log(foo);
    return {
        parentNode: {
            removeChild: function(bar) {
                console.log(bar);
            }
        }
    };
};

运行测试

document.getElementById("test"); // console output "test"

重置原方法：

document.getElementById = old;

我现在不能说这是否适用于跨浏览器。在我的 chrome 控制台中它现在正在工作，所以我想这对你有用。试试看 ：）

另一种没有模拟的更好方法是动态创建一个包含需要测试的 DOM 的元素：

var container = document.createElement("div");
container.innerHTML = 'your content <span id="el">foobar</span>';
document.body.appendChild(container);

在没有任何模拟对象的情况下运行您的测试

事后检查

console.log(document.getElementById("el"), document.getElementById("el").parentNode);

当然要清理 :)

container.parentNode.removeChild(container);

我不喜欢 Fireunit，所以我不知道那里模板的异步加载可能性。

于 2012-04-21T18:00:35.447 回答