Question

我在Jasmine上阅读的材料中，他们只测试.js个文件。但是，如果测试是在网页上，比如使用代码：

try.html：

<input id="the-input"></input>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

    $("#the-input").focus(function() {
        $(this).css("background", "#ff9");
    });

    $("#the-input").blur(function() {
        $(this).css("background", "#cff");
    });  

</script>

也就是说，如果用户点击（或选项卡到）输入框，将框的背景设为黄色，当焦点偏出时，则将其设为浅蓝色。在这种情况下，我们如何在.html文件中测试上述行为？（这个html文件应该放在哪里 - 它可以是Jasmine lib文件和SpecRunner.html之外的任何地方，以及SpecRunner.html如何以某种方式包含它来测试页面？

jsfiddle位于：http://jsfiddle.net/MspUF/

更新：将HTML内容与JavaScript代码分开是完美的，但仍然可以测试它的具体内容。

Answer 1

经过一番研究，我找到了一种简单的方法来测试JavaScript以及HTML，CSS和JSON数据。它是Jasmine-jQuery，它们被称为HTML固定装置等。所以不是一个完整的，自包含的页面，但可能足以告诉你的小部件如果鼠标在它上面就可以正常工作，或者如果用户点击会发生什么在某事上。（通过使用jQuery .mouseover()或.click()等）

Answer 2

通常，最佳做法是将脚本移动到Web浏览器中的外部js文件中。

您可以将代码移动到.js文件，然后通过执行以下操作将其包含在HTML中：

<script src='myfile.js'>

将包含它，这将允许您轻松使用Jasmine来测试文件。您可以在DOM之外模拟DOM以进行单元测试。

如果您需要进行常规测试而不是单元测试，我建议使用PhantomJS这样的实际模拟浏览器并使您能够测试完整的用户体验。（其他好的替代品包括我成功的Selenium）

此外，here is a nice article 关于使用QUnit测试jQuery。

如何为具有HTML和JavaScript或jQuery的网页编写Jasmine测试？

2 个答案: