2011-08-07 48 views
5

我一直在尝试使用过去几周的方法,试图找到最佳的方法来使用BDD作为依赖于HTML5画布元素的Web应用程序以及用户与它的交互。集成测试画布

我一直在使用茉莉花和黄瓜与Rspec,规范和集成测试我的应用程序的每个部分,但任何尝试,我已经不得不集成测试画布已经出现...不成功。我写了一个jQuery插件,用于处理与画布的交互以及初始化它。

我想一体化测试画布上的实际绘图,并确保当你调用像

$("canvas").draw("lineTo", 10, 10) 

存在实际上是在点(10,10)的canvas元素上创建一条线。这已经证明了变化,我试图在任何绘制的像素上使用上下文方法getImageData()。这导致我陷入了一个漏洞,无论我如何查询画布,我都会获得代表黑色透明像素的像素数据,MDC称这是我从背景中查询画布的问题。

这是我认为与茉莉花宝石RoR问题。如果我能解决这个问题,我会是个好主意,但这不是我愿意接受的唯一解决方案。即使我没有直接检查像素数据,我也希望能够帮助您考虑集成测试画布的有效方法。

感谢任何人的帮助,这真是让我陷入困境。

回答

3

我写了一个工具,js-imagediff,它与Jasmine集成来测试画布。你可以在这里看到一个例子:unit testing canvas with javascript imagediff and jasmine。让我知道这是否有用。

但它使用getImageData来执行diff。您是否收到该电话的具体错误?或者你有链接到你指的MDC页面?

+0

什么酷匹配集,最困难的部分会产生你从画布想测试对 – austinbv

+0

所以在我的情况是什么,我用这个回归测试,而不是BDD。我根据开发版本测试一个项目的稳定版本。 要在BDD中使用此功能,可以通过手动在画布上绘图并向指定画布写入方法来创建小型测试。我知道的唯一的其他选择是使用模拟画布和茉莉花间谍。我会争辩说,更直观地看到你的测试是期待在模拟画布上下文中调用某些方法的经文。 – cesutherland

+0

是的,我正在使用间谍atm – austinbv

0

您可以使用Nightwatchjs ... http://nightwatchjs.org/ 它有一个与DOM元素进行交互的api,但它也是可扩展的。我已经写了一些示例自定义命令和断言,您可以使用它们来端到端测试基于Canvas的Phaser游戏,但是您可以看到它是如何完成的,并创建自己的测试来执行对画布绘制API的调用。

在这里看到一些例子:https://github.com/hayesmaker/phase-2-e