7

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

尝试.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>

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

一个 jsfiddle 在：http: //jsfiddle.net/MspUF/

更新：将 HTML 内容和 JavaScript 代码分开是可以的，但是，能够测试它的细节是什么。

4

2 回答 2

6

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

于 2013-04-05T23:02:27.020 回答
2

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

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

<script src='myfile.js'>

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

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

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

于 2013-03-31T12:39:56.530 回答