将 HTML 附加到 Javascript Fireunit 测试答案

【问题标题】：Appending HTML to Javascript Fireunit Tests将 HTML 附加到 Javascript Fireunit 测试
【发布时间】：2012-04-06 13:24:30
【问题描述】：

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

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

【问题讨论】：

标签： javascript unit-testing

【解决方案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 控制台中，它现在正在工作，所以我想这对你有用。试试看:)

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

【讨论】：