5

私は過去数週間、HTML5キャンバス要素に依存するWebアプリケーションにBDDを使用するための最良の方法を見つけようとして、メソッドを実験してきました。

私はRspecでJasmineとCucumberを使用して、アプリケーションのすべての部分の仕様と統合テストを行ってきましたが、キャンバスの統合テストを行う必要がありました...失敗しました。キャンバスとの対話と初期化を処理するjQueryプラグインを作成しました。

キャンバス上の実際の描画を統合テストして、次のようなものを呼び出すときに確認したかったのです。

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

実際には、ポイント（10,10）でcanvas要素に作成された線があります。これが変化を証明したものです。描画されたピクセルに対してコンテキストメソッドgetImageData（）を使用しようとしました。これにより、キャンバスをどのようにクエリしても、黒い透明なピクセルを表すピクセルデータが取得されます。これは、MDCによって、コンテキスト外でキャンバスをクエリしていると表示されます。

これは、RoRを使用したジャスミンジェムの問題だと思います。私がその問題を解決できれば、私は黄金になりますが、それは私が喜んで受け入れる唯一の解決策ではありません。実際にピクセルデータを直接チェックしていなくても、キャンバスの統合テストを行うための効果的な方法を考えてみたいと思います。

あなたの助けを誰かに感謝します、これは本当に私をブロックに陥らせます。

4

2 に答える 2

4

キャンバスをテストするためにJasmineと統合するツールjs-imagediffを作成しました。ここで例を見ることができます：javascriptimagediffとjasmineを使用したユニットテストキャンバス。これが役立つかどうか教えてください。

ただし、getImageDataを使用して差分を実行します。その呼び出しで特定のエラーが発生していますか？または、参照しているMDCページへのリンクがありますか？

于 2011-12-16T17:04:26.740 に答える
0

これにはNightwatchjsを使用できます... http：//nightwatchjs.org/ DOM要素と対話するためのAPIがありますが、拡張も可能です。CanvasベースのPhaserゲームをエンドツーエンドでテストするために使用できるカスタムコマンドとアサーションの例をいくつか作成しましたが、それがどのように行われるかを確認し、Canvas描画APIへの呼び出しを実行する独自のテストを作成できます。

ここでいくつかの例を参照してください：https ：//github.com/hayesmaker/phase-2-e

于 2015-10-20T17:18:10.420 に答える