将 HTML 附加到 Javascript Fireunit 测试

Appending HTML to Javascript Fireunit Tests

本文关键字：Javascript Fireunit 测试 HTML      更新时间：2023-09-26

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

我知道如何使用火力装置，但我仍然对如何实际有效地使用它感到困惑。我主要担心的是无法测试任何实际操作DOM的功能，让我们面对它，几乎是所有这些。

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

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

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

我对jsTestDriver不太熟悉，但据我了解，您可以使用注释将HTML附加到单元测试中（或者这就是代码的外观）。有没有办法通过火力单元测试做这样的事情？还是我应该把我的测试弄乱.html用来自各地的代码片段来混乱，并希望它们不会冲突。最好定义一小段 HTML，该 HTML 在函数开始时加载，然后在测试函数完成时自行删除并移动到下一个函数。

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

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

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，所以我不知道那里的模板的异步加载可能性。

相关文章：