在不重新创建标记的情况下测试javascript代码?

如果您测试的是javascript函数/对象,我建议您使用yui的测试组件。

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

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

您只需创建要在内存中测试的结构,而不需要将其附加到文档中。这不适用于所有测试(例如,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');
});

根据代码的不同,您可能需要两种方法:

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

您可能想知道如何重组您的代码,以便用这种方式测试它。您可以使JS更模块化,或者更少地依赖于某个标记吗?(可悲的是,有时候你做不到。)

2. 需要集成测试的代码。正如您所说,重新创建所有标记是一种痛苦。其他人建议使用硒(它在一个框架中运行您的页面)。这是一种在实际环境中测试JavaScript代码的好方法。

它们的缺点是运行速度较慢,维护起来有点困难或易碎。查找“页面对象”模式以帮助您在可维护性方面有所帮助。

最后,我们使用Selenium来驱动JS单元测试,实现了自动化。

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

当然,在理想的环境中,您可以在代码级别使用单元测试框架,但是考虑到这可能需要大量的前期返工,一个可靠的折衷方案可能是测试JavaScript是否真的使用Selenium或类似的框架来完成您需要的工作。

在iframe中测试应用程序可以工作。

我发现更好的是坚持模型-视图-展示器(MVP)范式(仅在客户端),同时将UI组件分解为可理解的块,以便能够在自己的“驱动程序”页面中测试每个组件。大多数逻辑都位于表示器内,表示器是纯javascript,因此可以使用纯javascript单元测试进行测试。单个UI组件可以使用Selenium这样的框架进行测试,它们的测试只是确保将正确的事件发送给演示者。如果后端访问部分被存根化/模拟成某种获取类,那么该模型也可以作为纯JavaScript进行测试。

你可以使用 模板引擎 . 对于许多不同的HTTP服务器设置,存在许多不同的模板引擎,因此您可能会找到一个适合您需要的模板引擎,该模板引擎是用您选择的(服务器端)编程语言实现的。

现在,一旦安装了模板引擎,就可以使用原始布局并添加一个小标记,在测试时可以在其中插入<script>标记,在不测试时则不插入标记。

这种方法的优点是:生产页面和测试页面之间完全没有区别。除了测试之外,您可以避免添加不需要的iframe。

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

所以有两种测试你似乎在问。一种是单元测试您编写的使用jquery的代码。答案比大家通常想象的要简单得多。只需在单元测试中模拟jquery。这真的很简单,而且工作原理和用其他编程语言模拟几乎一样。但即使没有javascript中的框架也很容易做到。实际上,我在自动化测试套件中使用 Test.TAP 还有犀牛。不需要浏览器。

另一种测试是集成测试或回归测试。这就是像硒这样的工具出现的地方。这些测试发生在您的实际应用程序中,旨在确保所有的部分按您的预期方式一起工作。浏览器、jquery、JavaScript和Web服务器。将这两种测试分开在您的头脑中是为JavaScript代码组合测试套件的关键。理想情况下,您可以在多个浏览器(甚至可能是多个浏览器配置)中运行这些测试。

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断言”上做了一个谷歌搜索,并返回了很多链接,所以它可能值得你自己检查一下。