将 HTML 附加到 Javascript Fireunit 测试

Question

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

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

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

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

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

我不太熟悉 jsTestDriver，但据我了解，您可以使用注释 append HTML 进行单元测试（或者这就是代码的样子）。 有没有办法可以用 fireunit 测试做这样的事情？ 或者我应该用来自各地的代码片段来打乱我的 test.html 并希望它们不会冲突。 定义一小块 HTML 会很好，它在 function 的开头加载，然后在测试 function 完成并移至下一个时删除自身。

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

Answer 1

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

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 控制台中，它现在正在运行，所以我想这对你有用。 试试看：）

没有 mocking 的另一种更好的方法是动态创建一个包含需要测试的 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，所以我不知道那里模板的异步加载可能性。