将HTML添加到Javascript Fireunit测试

我一直有意将单元测试整合到我的javascript开发中一段时间，因为我已经习惯使用firebug进行调试和测试，所以fireunit自然是做JS单元的明显选择测试。将HTML添加到Javascript Fireunit测试

我明白如何使用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中，但我所有的方法都不够清晰，并且需要为每个测试函数编写大量的样板文件。我想听听一些可能已经提出了更有效的解决方案的人。

来源

2012-04-06 ryandlf

测试的实际执行之前，你可以这样做：

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);

清理过程:)

的

我没有进入Fireunit，所以我不知道模板的异步加载可能性。

来源

2012-04-21 18:00:35

将HTML添加到Javascript Fireunit测试

回答

相关问题