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

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

通常，最佳实践是将脚本移动到jsWeb 浏览器中的外部文件。

您可以将代码移动到.js文件中，然后将其包含在 HTML 中，方法是：

<script src='myfile.js'>

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

如果您需要常规测试而不是单元测试，我建议类似的东西PhantomJS实际上可以模拟浏览器并使您能够测试完整的用户体验。（其他好的替代方案包括我成功使用的 Selenium）

另外，这里有一篇关于使用 QUnit 测试 jQuery 的好文章。