Question

我想在我们的网络应用中测试JavaScript代码。我们正在使用jQuery库和.Net MVC。我看了these answers，jqUnit看起来不错，所以我试了一下，只是意识到我必须为我要测试的每个页面重新创建所有标记。

我错过了什么吗？有没有其他方法来测试JS / jQuery代码？我们的标记有时很复杂，并且由于AJAX调用而变化很大。

我能想到的最好的尝试是将我们的应用程序粘贴在测试页面上的iframe中。尚未尝试过。

Answer 1

如果您的测试javascript函数/对象，我可能会建议YUI的测试组件。

http://developer.yahoo.com/yui/yuitest/

与JUnit的设置非常相似，但只需要包含一些测试javascript文件。只在测试模式下将它包含在您的页面中非常容易。

Answer 2

您可以在内存中创建要测试的结构，而无需将其附加到文档中。这将不适用于所有测试（例如CSS propeties不会影响未插入文档的项目，但在某些情况下，这可能值得一试）。

首先它非常快，第二，你不会破坏你完成测试后需要删除的测试项目的文档。

这是一个非常简单的例子。

test('My tests', function () {
    var testSubj = $('<div>This <b>is</b> my <span>test subject</span></div>');

    ok(testSubj.children('span') == 'test subject', 'Span is correct');
});

Answer 3

您可能需要两种方法，具体取决于代码：

可以进行单元测试的代码。有一些Javascript足够独立，您可以使用JSUnit以最少量的HTML标记对其进行测试。在某种程度上，此标记是您的测试夹具数据。

您可能想知道如何重构代码，以便以这种方式对其进行测试。你能使JS更加模块化，或者更少依赖某个标记吗？（可悲的是，有时你不能。）

需要集成测试的代码。就像你说的那样，重新创建所有标记是一件痛苦的事。其他人建议使用selenium（在一个框架中运行你的页面）。这是在其真实环境中测试Javascript代码的好方法。

这些的缺点是它们往往运行速度较慢，而且维护或变脆有点困难。查找“页面对象”模式以帮助您了解可维护性。

我们最终使用selenium自动化JS单元测试来驱动它。

Answer 4

可能值得考虑Selenium并在浏览器级别运行一些自动化测试。

当然，在一个理想的世界中，你可以在代码级别使用单元测试框架，但考虑到可能涉及大量的前期返工，一个可靠的折衷方案可能是测试javascript实际上是你需要什么来使用Selenium或类似的框架。

Answer 5

在iframe中测试你的应用程序可以正常工作。

我发现更好的是坚持使用Model-View-Presenter（MVP）范例（仅在客户端）并将UI组件分解为可消化的块，以便能够测试其内部的每个组件自己的“驱动程序”页面。大多数逻辑都驻留在Presenter中，这是纯JavaScript，因此可以使用纯JavaScript单元测试进行测试。可以使用像Selenium这样的框架测试各个UI组件，他们的测试只是确保他们将正确的事件抛给Presenter。如果后端访问部分被存根/模拟到某种类型的Fetcher类中，那么模型也可以作为纯JavaScript进行测试。

Answer 6

您可以使用模板引擎。许多不同的http服务器设置存在许多不同的模板引擎，因此您可能会找到一个适合您需求的模板引擎，并且可以使用您选择的（服务器端）编程语言实现。

现在，一旦安装了模板引擎，就可以使用原始布局并添加一个小标记，您可以在其中插入＆lt; script＆gt;测试时标记，不测试时没有。

这种方法的优点是：生产页面和测试页面之间绝对没有区别。您可以避免添加除测试之外的其他任何内容都不需要的iframe。

Answer 7

Windmill是一个优秀的基于python的javascript测试框架。它正在积极发展，所以它不断改进。我建议看看它。您可以创建自动化测试，它有一个很好的GUI，您也可以使用它来设置测试。还有很多其他功能，但没有理由在这里列出所有功能。

Answer 8

所以你似乎要问两种测试。一个是对你编写的消耗jquery的代码进行单元测试。答案比每个人通常认为的要简单得多。只是在你的单元测试中模拟jquery。它非常简单，其工作方式与使用任何其他编程语言进行模拟的方式非常相似。除了在javascript中没有框架的情况下很容易做到。实际上，我使用Test.TAP和rhino为我的项目在自动化测试套件中运行这些类型的测试。无需浏览器。

另一种测试是整合或回归测试。这就是硒等工具的用武之地。这些测试发生在您的实际应用中，旨在确保所有部分以您期望的方式协同工作。浏览器，JQuery，您的JavaScript和Web服务器。将这两种测试分开在你的脑海中是将javascript代码组合在一起的关键。理想情况下，您可以在多个浏览器中运行这些测试（甚至可能是浏览器的多个配置）。

Answer 9

visibone浏览器参考建议他们称之为'自信'。它基本上给出了如何实现JavaScript单元测试的建议。它非常简单。

请参阅以下图片链接的右下角：

http://www.visibone.com/products/ebk8-9_850.jpg

总结一下：

创建一个函数assert（）：

function assert(fact, details){
    if (!fact) alert("Assert failure: " + details);
}

你可以称之为：

assert((parseInt("1") == 1), "Check string '1' is equal to integer 1");

或者可能有更好的===比较：

assert((parseInt("1") === 1), "Check string '1' is equal to integer 1");

链接图片上还有更多内容，您的断言功能可能会变得更加复杂。

我在“JavaScript断言”上进行了谷歌搜索，并返回了很多链接，因此可能值得自己查看。

测试JavaScript代码而不重新创建标记？

9 个答案: