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

Question

我想在我们的网络应用程序中测试 JavaScript 代码。 我们正在使用 jQuery 库和 .Net MVC。 我查看了这些答案和jqUnit 看起来不错，所以我尝试了它，只是为了意识到我必须为我想测试的每个页面重新创建所有标记。

我错过了什么吗？ 是否有其他测试 JS/jQuery 代码的方法？ 我们的标记有时很复杂，并且会因 AJAX 调用而发生巨大变化。

我能想到的最好办法就是尝试将我们的应用程序粘贴到测试页面的 iframe 中。 还没试过。

Answer 1

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

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

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

Answer 2

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

首先，它非常快，其次，您不会因为完成测试后需要删除的测试项目而破坏您的文档。

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

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

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

1. 可进行单元测试的代码。 有一些 Javascript 足够独立，您可以使用 JSUnit 通过最少的 HTML 标记来测试它。 在某种程度上，这个标记就是您的测试夹具数据。

您可能想弄清楚如何重组代码，以便可以通过这种方式进行测试。 你能让 JS 更加模块化，或者更少地依赖于某种标记吗？ （遗憾的是，有时您不能。）

2. 需要集成测试的代码。 正如您所说，重新创建所有标记非常痛苦。 其他人建议使用 selenium （它在框架中运行您的页面）。 这是在真实环境中测试 Javascript 代码的好方法。

它们的缺点是运行速度往往较慢，并且维护起来有点困难或脆弱。 查找“页面对象”模式来帮助您解决可维护性方面的问题。

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

Answer 4

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

当然，在理想的情况下，您会在代码级别使用单元测试框架，但考虑到这可能涉及大量的前期返工，一个可靠的折衷方案可能是测试 javascript 是否确实满足您的需要使用 Selenium 或类似的框架。

Answer 5

在 iframe 中测试您的应用程序是可行的。

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

Answer 6

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

现在，一旦安装了模板引擎，您就可以使用原始布局并添加一个小标记，您可以在其中插入

这种方法的优点：生产页面和测试页面之间不需要绝对没有差异。 您可以避免添加除了测试之外不需要的 iframe。

Answer 7

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

Answer 8

所以您似乎要问两种测试。 一种是对您编写的使用 jquery 的代码进行单元测试。 这个问题的答案比大家通常想象的要简单得多。 只需在单元测试中模拟 jquery 即可。 它非常简单，并且工作方式与使用任何其他编程语言进行模拟的方式几乎相同。 不过即使没有 javascript 框架也很容易做到。 实际上，我使用 Test.TAP 在自动化测试套件中运行这些类型的测试和犀牛为我的项目。 无需浏览器。

另一种测试是集成或回归测试。 这就是像 selenium 这样的工具的用武之地。这些测试发生在您的实际应用程序中，旨在确保所有部分按照您期望的方式协同工作。 浏览器、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断言”，并得到了很多链接，所以可能值得你自己检查一下。