2011-08-07 14 views
5

私はここ数週間、HTML5キャンバス要素に重点を置いたWebアプリケーションとそのユーザーとのやりとりに最適な方法を見つけるために、数週間にわたってメソッドを試してきました。統合キャンバスのテスト

私はRspecでJasmineとCucumberを使用していますが、アプリケーションのあらゆる部分で仕様と統合テストが行​​われていますが、キャンバスの統合テストに失敗してしまっています。私はキャンバスとのやりとりを処理し、初期化するjQueryプラグインを作成しました。

は、私はあなたが

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

のようなものを呼び出すときのポイント(10,10)でのcanvas要素の上に作成された行が実際に存在していることを確認して、の積分するテストにキャンバス上で実際の描画を望んでいました。これがチェンジリングを証明しているので、描画されたピクセルに対してコンテキストメソッドgetImageData()を使用しようとしました。これは、キャンバスにどのようにクエリをしても、私は穴に私を導いています。私は、黒い透明ピクセルを表すピクセルデータを取得します。MDCは、キャンバスをコンテキストから照会していると言います。

これはRoRのジャスミン宝石の問題です。私がその問題を解決できるなら、私は金色になるだろうが、私が受け入れる唯一の解決策ではない。実際にピクセルデータを直接チェックしていなくても、キャンバスの統合テストに効果的な方法を考えるのを助けたいと思っています。

あなたの助けをお寄せいただきありがとうございます。これは本当に私をブロックにしています。

答えて

3

私はキャンバスをテストするためにJasmineと統合されたツールjs-imagediffを作成しました。ここにある例はunit testing canvas with javascript imagediff and jasmineです。これが有用かどうか私に教えてください。

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

+0

何クールマッチャーセット、難しい部分は、私の場合にはそう – austinbv

+0

に対してテストするためにキャンバスから欲しいものを生産することになる、私はむしろ、BDDよりも、回帰テストのためにこれを使用しています。私は開発版に対して安定したバージョンのプロジェクトをテストします。 これをBDDで使用するには、手動でキャンバスに描画し、spec'dキャンバスにメソッドを書き込むことで小さなテストを作成できます。私が知っている唯一の他の選択肢は、モックキャンバスとジャスミンのスパイを使用することです。私は、モックキャンバスの文脈で特定のメソッドが呼び出されることを期待しているテストが、どのようなものであるかを見るのがより直感的であると主張します。 – cesutherland

+0

ええ、スパイ・アトムを使用しています – austinbv

0

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

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