2011-08-07 82 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